Help with a responsive game

[bousing]

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   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.

 

[Björn Nilsson]

Hi,

When I created my game Orbium I did a lot of work regarding getting it to scale from the smallest mobile screens to computer desktops

https://github.com/bni/orbium

Maybe reading this code can be of help to you? Code dealing with this is in https://github.com/bni/orbium/blob/gh-pages/js/init.js

[bousing]

Thank you so much for your answer my friend, I gonna check it

[marlene]

Hello, 

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;
      this.scale.setScreenSize(true);
    }