Forums » Help » Centering the game on wide screens

I'm scaling the canvas element so sometimes the canvas extends beyond the width of the room. I want the center of the room to be the center on the browser's screen.

For instance, I have a character intro where enemies march out to the left of the screen followed by their nicknames that display on the center. Spent a good time trying to figure out why the text wasn't centered on the screen. Then I realized it was! It's just that the intro room is more to the left of the screen than I intended. Had a good chuckle.

Any advice?

Why not just fit the canvas to the window, whatever size that might be? You wouldn't need to "center" anything that way...

Edit: Also, isn't the canvas automatically centered in main example project that ImpactJS comes with?

The canvas is the window size but the room begins at coordinates ( 0, 0 ) of the canvas. So therefore the room is more to the top and left of the screen (canvas) than I'd like it to be.

So you want to center the camera on the level?

ig.game.screen.x = ig.game.backgroundMaps[0].pxWidth/2 - ig.system.width/2;
ig.game.screen.y = ig.game.backgroundMaps[0].pxHeight/2 - ig.system.height/2;

This assumes all your background maps are the same size, and we just used the first one in the array.