Responsive game

[Tufan]

I need to change x,y coordinates of texts, sprites etc. when screen size changes.

I made something like this, but i don't think this is the right solution. How can i do this directly with Phaser?

document.getElementsByTagName("body")[0].onresize = function(){
   var w = window.innerWidth * window.devicePixelRatio;
   var h = window.innerHeight * window.devicePixelRatio;
   // Game size
   if(w != game.width || h != game.height) {
      game.scale.setGameSize(w, h);
   }
   // UI
   HPText.cameraOffset.y = h-245;
   Text1.cameraOffset.y = h-325;
   Text2.cameraOffset.y = h-305;
   Text3.cameraOffset.y = h-285;
   Text4.cameraOffset.y = h-265;
}

Is it possible to scale sprites/texts for all devices? If so, how? I couldn't find an easy solution for that.

Also, what does game.scale.setShowAll() do? Can't find this function in the docs.

[samme]

Use scaleMode RESIZE and reposition game objects via onSizeChange. See phaser-ce/Phaser.ScaleManager.

I think setShowAll() is obsolete, I'm not sure what it was for.

[Tufan]

On 03.06.2017 at 9:09 PM, samme said:

Use scaleMode RESIZE and reposition game objects via onSizeChange. See phaser-ce/Phaser.ScaleManager.

I think setShowAll() is obsolete, I'm not sure what it was for.

What's the difference between

this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

and

this.scale.setResizeCallback(function(obj,rect){
    this.scale.setGameSize(rect.width, rect.height);
}, this);

I need to use Box2D's world bounds but scaleMode RESIZE sets it's own bounds to the world and i can't replace it.

With setResizeCallback everything works fine (i think, at least.)

Can I use Box2D's world bounds with scaleMode RESIZE if there's a big difference?

[samme]

ScaleManager is supposed to avoid shrinking the world bounds if you've ever called game.world.setBounds(). Or you can just hack it and set

game.world._definedSize = true;

You can also just call setBounds() yourself via the onSizeChange signal.

But if setResizeCallback is working, you can keep using that.

[Tufan]

23 hours ago, samme said:

ScaleManager is supposed to avoid shrinking the world bounds if you've ever called game.world.setBounds(). Or you can just hack it and set

game.world._definedSize = true;

You can also just call setBounds() yourself via the onSizeChange signal.

But if setResizeCallback is working, you can keep using that.

For desktop devices, there's no bounds even without _definedSize. (for scaleMode SHOW_ALL)

For mobile devices, there's world bounds set to screen size.

this.world._definedSize = true;
this.stage.disableVisibilityChange = true;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

You can also just call setBounds()

It doesn't let me replace world bounds with Box2D's setBounds method, only world.setBounds. I need to have world bounds with Box2D bodies.

this.physics.box2d.setBoundsToWorld();
// or
this.physics.box2d.setBounds(0, 0, 19200, 19200); // same as box2d.setBoundsToWorld() since it doesn't use x,y,width,height.
// No effect