JohnD

How to make a Phaser game responsive

Recommended Posts

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');

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.