Center canvas at title screen/screen entities

39 views
Skip to first unread message

dth...@gmail.com

unread,
Oct 3, 2016, 7:17:20 PM10/3/16
to melonJS - A lightweight HTML5 game engine
I'm setting the video to 800, 600 flex-width, scale auto, yet the title screen seems to render off to the left. How can I center the title screen?

During gameplay, the display fits the entire viewport nicely:
- Gameplay: http://i.imgur.com/fgJjmGc.png

But the title is off to the left:
- Title Screen: http://i.imgur.com/uOZpNyY.png

I understand this is due to the loaded background image of the title screen, but at centering it on the black background would look nicer.

Game.js: video loader:

if (!me.video.init(800, 600, {
wrapper : "screen",
renderer : me.video.CANVAS,
scale : "auto",
scaleMethod : "flex-width",
doubleBuffering : true,
transparent : true,
antiAlias : true
})) {
alert("Your browser does not support HTML5 canvas.");
return;
}

Title.js (Title screen):

me.game.world.addChild(new (me.Renderable.extend ({
// constructor
init : function() {

this._super(me.Renderable, 'init', [0, 0, me.game.viewport.width, me.game.viewport.height]);

Jay Oster

unread,
Oct 3, 2016, 8:27:03 PM10/3/16
to mel...@googlegroups.com
Your title screen renderable is positioning itself in the upper left corner of the screen (0,0), with the same size as the screen. You'll have to apply centering logic on the renderable position:

this._super(me.Renderable, 'init', [
  (me.game.viewport.width - 800) / 2,
  (me.game.viewport.height - 600) / 2,
  800,
  600
]);


--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

dth...@gmail.com

unread,
Oct 3, 2016, 9:14:37 PM10/3/16
to melonJS - A lightweight HTML5 game engine
The title screen is still rendered to the far left side of the screen.
> To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.

Jay Oster

unread,
Oct 4, 2016, 12:14:36 AM10/4/16
to mel...@googlegroups.com
Are you adjusting the position anywhere else?

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages