Forums » Help » Resize the canvas for each level?

Hi,

I'm designing a game where the levels are different sizes in terms of their height. Some are quite square where as others are long and thin (like a corridor).

I currently have a canvas that is tall enough to display any of the levels, but for the levels that aren't very tall I'd like to shrink the canvas height so that I don't see any unused areas of the canvas.

Is it possible to auto-resize the canvas height for each level?

If it's not possible, is it at least possible to center the narrow levels so they appear in the center of the canvas by perhaps setting some kind of offset?

Any help/suggestions appreciated!

Cheers,
Dud

The size of the canvas element can be changed through ig.system.resize. So you could overwrite the loadLevel() method in your Game class with something like this:

loadLevel: function( data ) {
	this.parent( data );
	
	// Calculate the height in pixels of the level we just loaded
	var newHeight = this.collisionMap.height * this.collisionMap.tilesize;
	
	// Resize the canvas height, keep the current width
	ig.system.resize( ig.system.width, newHeight );
}

You can also change the screen position ("offset") through the Game's screen.x and screen.y properties.

Fantastic - Thanks for the help dominic I will give that a try.

@dominic I cant seem to get this to work, it indeed resizes the canvas but doesnt scale the entities/backgrounds. Im trying to essentially go from a intro scene of 1280x704@1 to the main game of 640x352@2. If I remove the scale it looks correct, just 1/2 the size i need it.

// main.js

  ig.main('#canvas', IntroScene, 60, 1280, 704, 1);

// scenes/intro.js

      if (this.timer.delta() > 5) {
        ig.system.setGame(MyGame);
      }

// main.js
(i'm using the leveldata plugin to pass the data from WM)

    loadLevel: function(level) {
      this.parent(level);

      // Resize the canvas and scale if level needs it
      // 640x352@2
      ig.system.resize(level.data.width || ig.system.width, level.data.height || ig.system.height, level.data.scale || ig.system.scale);
    },