CODEWITHSUNDEEP
javascriptjqueryphaser-frameworkadaptive-design
weratius
weratius

Reputation: 123

How to create adaptive games via Phaser

I'm creating a simple game via Phaser.io How do I make it display properly on different screens?

When I use this:

var w = window.innerWidth * window.devicePixelRatio,
h = window.innerHeight * window.devicePixelRatio;

var avaProfile = game.add.image(w/1.66, h/6.3, 'avaProfile');
avaProfile.fixedToCamera = true;

something like this happens:

enter image description here

And I can't even imagine how can I make all elements be adaptive

Upvotes: 0

Views: 670

Answers (1)

weratius
weratius

Reputation: 123

First, if you want to position your button according to the game size, you should probably use game.width/game.height which are more reliable.

Now if you want to adapt your button's position according to the screen size, there's no magic solution. Here's a generic article about the topic for instance. You should decide from which origin you'll position each UI element, be it a screen corner, the center of the screen, a gameplay object, etc. and anticipate how things will turn out if the resolution changes.

For example, if you want to have a square pop-up in the center of your screen, you'll do something like:

var popup = game.add.sprite(game.width/2, game.height/2, 'popup');
popup.width = 400;
popup.height = 400;
popup.anchor.set(0.5, 0.5);

Now to give it a title, you'll probably want to position it according to the popup itself:

 var text = game.add.sprite(popup.x, popup.y + 10, 'Hello world');
 text.anchor.set(0.5, 0);

etc. There's no one-solution-fits-all but make it clear what uses what as the origin and hopefully you won't have surprises when resizing the screen.

Upvotes: 2

Related Questions