Pave

Scalable Game

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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,
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.