Scalable Game

[Pave]

Hello guys, i'm back with a rather huge question.

My game is currently optimized for running in full hd(1920,1080). Now I want it to scale to the users display resolution.

In this article I've read that i should use "window.innerWidth * window.devicePixelRatio" to determine the users display size.

 

Now the problem is on how to scale all my sprites to keep the same "size ratio". Because if i increase or decrease the game width/height all object have to scale with it of course.

In the mentioned tutorial the guy only scaled it to match the PixelRatio and not to preserve the same sprite-gamewidth/height.

 

Are the velocity I set for my sprites in pixels (e.g. setVelocityY(100)). So do I need to scale the velocity too?

[Pave]

For better visualisation: 

[prob]

So with the 3.12 release, I believe all of the issues with setting the resolution in the game config have been resolved. You'll want to set that to window.devicePixelRatio; that will properly configure the canvas element.  From there, you can define your sprite sizes/positions based on a percentage of this.sys.game.config.height/width.

The ScaleManager is still work in progress I believe, but even when it's completed I don't think it will perform to the scope of the Phaser 2 scale manager.

[samme]

I would start with game config 

{
  width: 1920,
  height: 1080,
  resolution: window.devicePixelRatio || 1
}

and then don't use devicePixelRatio ever again. Phaser will handle the resolution and you can just use game-pixel units as usual.

The easiest way to fit a smaller display would be to just scale the whole game canvas down (1920 × 1080 → 800 × 450).

The hard way is to resize the game canvas, and then scale all the game objects and distances to match. Actually I would try zooming out the camera instead as it could save you a lot of trouble.

Try phaser-plugin-game-scale.

[iKest]

for dom elements can try use one more camera with div onResize event

[Pave]

@samme wow your plugin is great!?

1. Question: Unfortunately after setting a min width/height my player can move out of the visible game area. (I want to stop the game from scaling too far down)

2. Question: If I want my game to support 4k resolutions am I fine with scaling everything upwards or should i use:

 

{
  width: 4096,
  height: 2160,
}