Jump to content

Help with a responsive game


Recommended Posts

Greetings devs friends

I new in this forum and new in games development with Phaser. Really I new in games development with HTML5 because I work with Unity. I was assigned in a proyect consisting of a responsive game. The engine that I usually work has a WebGl builder but dont works well in smartphone, because is a something new in Unity5, accordingly dont help me :(

I try Phaser, I learned a little and I did an experiment: http://pruebaphaser.esy.es/experimentoP2-master/#  is very nice this framework, I like it so much  :wub: I did the gameplay that I need: just drag the camera on an image and make click in specifc areas to trigger a modal (or any events). 

   The problem is the game must be responsive. I mean must see very well and full screen in smartphone as PC, also with a responsive navbar (I use bootstrap for the navbar and modals). Also i need add a backend for a webservice, datebase...that is another topic... Really I need make it responsive. For this I did the following:

var width = window.innerWidth;
var height = window.innerHeight;
var game = new Phaser.Game(width,height, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render});

I use window.innerWidth and windows.innerHeight of javascript to create the world game size. I thought that if take those dates of the screen then I would have a responsive view regardless of the platform used. But not works :(

I will appreciate any help. Thank you for reading. I fall in love with Phaser, I will a pro HTML5 game developer for help you too. Greetings from Venezuela.


Link to comment
Share on other sites


Use the Phaser scale manager. Below is just an example of what I mean. 

 this.input.maxPointers = 1;

    if (this.game.device.desktop) {
      //  If you have any desktop specific settings, they can go in here
      this.scale.pageAlignHorizontally = true;
    } else {
      //  Same goes for mobile settings.
      //  In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"
      this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      this.scale.minWidth = 568;
      this.scale.minHeight = 600;
      this.scale.maxWidth = 2048;
      this.scale.maxHeight = 1536;
      this.scale.forceLandscape = true;
      this.scale.pageAlignHorizontally = true;


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...