How to make a Phaser game responsive

[JohnD]

Hello everyone,

 

I have developed a little game with Phaser with the help of the tutorials and examples on the official site.

 

My problem is that I've been trying to make it responsive, but with no success. I have already read a few tutorials about it (like this: http://www.emanueleferonato.com/2015/02/26/the-basics-of-responsive-html5-games/), but I'm quite new to programming and can't get it working any way.

 

I managed to make the canvas responsive by setting its width to 100% and height to auto, but this way, all the mapping went crazy, the buttons' hitboxes don't get scaled with the canvas. As I researched, the way to do it is with Scale Manager, but the official documentation is a bit complicated for me. Everything I tried to do just messed up the game.

 

I would be really grateful if someone could help me with it. You can see the game below. Thank you very much in advance.

var bootState = {  create: function() {    game.physics.startSystem(Phaser.Physics.ARCADE);    game.state.start('load');  }}var loadState = {  preload: function() {    loadingLabel = game.add.text(game.world.centerX, 250, 'Loading...', {font: '26px Arial', fill: '#fff'});    loadingLabel.anchor.setTo(0.5, 0.5);    game.load.image('sky', 'assets/sky.jpg');    game.load.image('star', 'assets/star.png');    game.load.spritesheet('dude', 'assets/dude.png', 50, 53);    game.load.image('ground', 'assets/ground.png');    game.load.spritesheet('button_start', 'assets/button_start.png', 200, 80);    game.load.spritesheet('button_restart', 'assets/button_restart.png', 80, 80);  },  create: function() {    game.state.start('menu');  }}var menuState = {  create: function() {    game.add.sprite(0, 0, 'sky');    game.add.tileSprite(0, game.world.height-284, game.world.width, 284, 'ground');    buttonStart = game.add.button(game.world.centerX, 220, 'button_start', this.start, this, 0, 1);    buttonStart.anchor.setTo(0.5, 0);  },  start: function() {    game.state.start('play');  }}var playState = {  create: function() {    sky = game.add.sprite(0, 0, 'sky');    sky.fixedToCamera = true;    ground = game.add.tileSprite(0, game.world.height-284, 2000, 284, 'ground');    game.world.setBounds(0, 0, 2000, 600);    player = game.add.sprite(100, game.world.height - 150, 'dude');    game.physics.arcade.enable(player);    player.anchor.setTo(1, 1);    player.body.collideWorldBounds = true;    game.camera.follow(player);    score = 0;    stars = game.add.group();    stars.enableBody = true;    for (i = 0; i < 10; i++) {      star = stars.create(200 + i * 150, 200 + Math.random() * 200, 'star');    }    scoreText = game.add.text(16, 16, 'Score: 0', {font: '32px Arial', fill: '#fff'});    scoreText.fixedToCamera = true;    cursors = game.input.keyboard.createCursorKeys();  },  update: function() {    game.physics.arcade.overlap(player, stars, this.collectStar, null, this);    player.body.velocity.x = 150;    if (player.position.x > game.world.width - 100) {      game.state.start('end');    }    if (cursors.up.isDown) {      player.position.y -= 5;    }    else if (cursors.down.isDown) {      player.position.y += 5;    }  },  collectStar: function(player, star) {    star.kill();    score += 10;    scoreText.text = 'Score: ' + score;  }}var endState = {  create: function() {    game.add.sprite(0, 0, 'sky');    game.add.tileSprite(0, game.world.height-284, game.world.width, 284, 'ground');    scoreLabel = game.add.text(465, 160, 'Score: ' + score, {font: '26px Arial', fill: '#fff'});    scoreLabel.anchor.setTo(0.5, 0);    buttonRestart = game.add.button(465, 270, 'button_restart', this.restart, this, 0, 1);    buttonRestart.anchor.setTo(0.5, 0.5);  },  restart: function() {    game.state.start('play');    score = 0;  }}game = new Phaser.Game(930, 600, Phaser.AUTO, 'game');game.state.add('boot', bootState);game.state.add('load', loadState);game.state.add('menu', menuState);game.state.add('play', playState);game.state.add('end', endState);game.state.start('boot');

[Get_Bentley]

Hello ! Give this a try

 

 

//scaling options

 

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

 

    //have the game centered horizontally

 

    this.scale.pageAlignHorizontally = true;

 

    this.scale.pageAlignVertically = true;

 

    //screen size will be set automatically

 

    this.scale.setScreenSize(true);

 

 

Also give this tutorial a look over for scaling. Hope this helps ! Let me know!

 

http://html5hub.com/how-to-make-a-sidescroller-game-with-html5/

[JohnD]

Thank you very much for your help! Could you please tell me where should I insert your code? I inserted it in the boot section inside the create function as it is in the tutorial you referenced to, but I get this error: Uncaught TypeError: this.scale.setScreenSize is not a function.

[vohogames]

Thank you very much for your help! Could you please tell me where should I insert your code? I inserted it in the boot section inside the create function as it is in the tutorial you referenced to, but I get this error: Uncaught TypeError: this.scale.setScreenSize is not a function.

 

Change your Phaser version to older ones. 

[JohnD]

Thank you for the support, it is working now as expected!

[Get_Bentley]

Thank you for the support, it is working now as expected!

Awesome man! Glad that it worked out for you.

[IAMGUS]

I had to make my game responsive post production. After looking through a bunch of stuff online, this is how I did it.

My program is made up of 9 JavaScript files. including a Boot.js, Preloader.js and Mainmenu.js the rest are game states all linking to the main menu.

In my Boot.js I added;

game.scale.scaleMode = Phaser.ScaleManager.aspectRatio;
game.scale.pageAlignVertically = true;
game.scale.pageAlignHorizontally = true;
game.scale.setShowAll();
game.scale.refresh();

In Preloader.js;

this.time.advacedTiming = true;    (not certain this is required)

AND then in every other gamestate, including main menu I added;

INSIDE the Update Function;

game.scale.setShowAll();
game.scale.refresh();

 

So my game is responsive, maintains its aspectRatio, and adds black side/top bars when changing window size.

Easy fix