0

I'm creating a responsive game with Phaser 2. The width is fixed to 360 and the height gets calculated to a fitting ratio.

var height = (360 * screen.height) / screen.width;
var game = new Phaser.Game(360, ratio, Phaser.AUTO, "", {preload: preload, create: create, update: update});

In the create() function I then resize it to 100%, so the screen is filled:

function create () {
   document.querySelector("canvas").style.width = "100%";
   document.querySelector("canvas").style.height = "100%";
   // more stuff...
}

However, if I now click or do anything, the canvas gets resized back to 360xheight. How can I disable that?

Thanks

James Skemp
  • 8,018
  • 9
  • 64
  • 107
krmax44
  • 314
  • 1
  • 2
  • 13
  • this answer might help http://stackoverflow.com/questions/28227090/phaser-make-background-screen-width-instead-of-content-width/28278332#28278332 – Sky Walker Apr 25 '16 at 15:23

1 Answers1

-1

Phaser actually has the ability to scale the game/canvas to the width or height of the window built-in.

Try using the ScaleManager instead. In your case probably SHOW_ALL, and it can be set in your boot state (meaning early on in your code):

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

You can see an example of this in practice in this tutorial on State, and the official example.

James Skemp
  • 8,018
  • 9
  • 64
  • 107