How many pixels? wondering about target resolution

Phaser 3
1

I almost put “resolution” in quotes in the title since I know there are a number of factors (don’t ask me to list them, ha). The last time I had to figure this out, 800x600 seemed the right answer since not everyone had a “hi res monitor”.

How big should my screen be, width and height? I’ve been getting my Phaser feet wet with sprites that look “fine” based on a target 800x600, even when scaled to twice that so it’s almost a mute point…

… but I know we’re all 16x9 now and am asking for advice. What are y’all doing?

Thanks!

2

Phaser size can set by window.innerWidth\window.innerHeight(you shouldn’t set viewport width=devicewidth etc)
resolution is another story
sprite size set can use scaleManage

3

EDIT:

Check this repo.
https://github.com/yandeu/phaser3-optimal-resolution

I do it like this for mobile devices:

In my current game I use 360x640 times DPR as base resolution.

I draw my assets 4 times the base resolution and generate multiple atlases based on it. So @1, @1.5, @2, @2.5,… , @4.

This is how I calculate the width and height of the canvas:

const roundHalf = num => Math.round(num * 2) / 2
export const DPR = roundHalf(window.devicePixelRatio)
const { width, height } = window.screen

// base resolution is 360x640 @4
const WIDTH = Math.max(width, height) * DPR
const HEIGHT = Math.min(width, height) * DPR

This way it looks very sharp on a Pixel 2 XL (DPR = 3.5).
But it also works well on an old iPhone 5s (DPR = 2).

Load the atlases

this.load.atlas('atlas', `assets/atlas/atlas-@${DPR}.png`, `assets/atlas/atlas-@${DPR}.json`)

Then multiply all positions of all assets by DPR.

2 Likes
4

I’m with @yannick. I too would like to know how to do this properly for all devices as well. Thank you!

5

I just added a repo with an example of the optimal game resolution for any device (including tables and pc). This will make your game look as sharp as possible on any device :slight_smile:

https://github.com/yandeu/phaser3-optimal-resolution

Hope it helps :slight_smile:

1 Like
6

Wow! This will help a lot once digested :slight_smile: … and it confirms my suspicion, the raw images should be large (way larger than I guessed)! The game I’m porting, lol the largest sprites are 90x9 and 100x40.

I really appreciate this @yannick and will be back again with questions… thanks!

7

You’re welcome :slight_smile:

Btw, I always target WebGL (or set it to AUTO). And I set the max size of the Atlases to 4096x4096.

8

I got into this today and started to panic when I saw the contents of src/atlas but was pleased to find TP’s Black Friday sale “discount expires in -8 days” :slight_smile:

I need more sleep, hopefully it’s not another silly question… why width/3 here?

const zombie = new Sprite(this, width / 3, height, 'atlas', 'zombie').setOrigin(0.5, 1)

To the point of my OP question, all my assets need to be redone and I have an artist willing to help. Looking at robot.png and also https://www.kenney.nl/assets/toon-characters-1 and https://craftpix.net/freebies/2d-fantasy-trolls-free-sprite-sheets/ … the dimensions here seem enormous!

I can’t get head around this… these 800x600 character sprites, how do they relate to the “house” or the “world” backdrop… those surely don’t need to be rendered 8000x6000 if my question makes sense? I might believe the house 8Kx6K but my mind explodes thinking the “world” at 80x60k pixels.

Thanks!

9

I agree. Not to sound rude but we shouldn’t have to redo ALL of our artwork in order to resize everything correctly. We should be able to resize the window and have all the assets resize with it while still providing optimal resolution.

10

Hmm I’m not sure what you’re agreeing to? I just finished porting enough over to evaluate my game in Phaser. If you look at http://www.bitblaster.com/pdw0 these are the same tiny sprites as I used 10 years ago on CRT’s at 800x600… looks good!

But, on today’s jumbotron 1920x1080 every pixel is stretched, folded and spindled significantly and I think it’s worth the effort to redo my assets to squeeze some crisp juice out of this game. Of course I might feel differently if they weren’t either abstract ideas or crudely drawn scribbles a programmer might have created in an hour or two :wink:

11

Simply to add the object at 1/3 of the screen width :wink:

No, the highest resolution I target is 640x360 times 4 (which is 2560x1440). On every device with a higher resolution than this, you can scale and stretch the canvas to fit into these 2560x1440 or scale the background image down.

You do not need to, unless you want your game to look sharp on every device. You could simple set a fix resolution of 1280x720 and use a simple built in scaling strategy from the Phaser ScaleManager to scale the game to fit any device screen.

It is up to you how much effort you put into your games. The strategy I published in the git repo above seems to work best for me, since I want to publish my next game to any platform including Smart TVs.
But if you are only targeting mobile, maybe it is easier to choose a fixed resolution.

One great thing about this strategy is that it is easy to let the user choose if he wants to scale down if the game does not render at 60fps on his device. Simply ask the user if he want to restart game with a lower resolution and manually scale the resolution down.

// is the user not happy with 'best',
// simply set the graphics to 'medium'
// (maybe store the settings in LocalStorage)
const graphicsSettings = { best: 1, medium: 0.75, low: 0.5 }
const DPR = window.devicePixelRatio * graphicsSettings.best

Hope this helps :slight_smile:

2 Likes
12

Man I’m so close! I’m going to have to try to simplify so to have something useful to share unless something breaks open soon.

TP says, “The maximum texture size for mobile devices should not exceed 2048. Bigger textures might not be displayed on some devices or might cause jittering sprites.”

I think you’re saying we don’t need to worry? thanks

13

I’m close but no cigar, so stuck I took the example as a base and added my stuff in, making minimal changes, at this point … idk :frowning:

… and am sending up a flare, so stuck, what can I do?

PS: So all that and now as I’m about to click the button and post, the example no longer behaves like my game source! There’s still a wide spot on the right though so I do need help Thanks!

wrong
wrong709×808 28.5 KB

14

I guess so. See this link.
currently offline :confused:

It does not work, because your game is not designed to be responsive and does not adapt to 16:9 monitors.

Simply change

// base resolution is 640x480 @4
const WIDTH = Math.round(Math.max(width, height) * DPR)
const HEIGHT = Math.round(Math.min(width, height) * DPR)

to

// base resolution is 640x480 @4
const WIDTH = 640 * DPR
const HEIGHT = 480 * DPR
15

Or even better. Will adjust the textures on mobile devices and send @4 textures to desktop PCs.
Or try something similar :smiley:

// base resolution is 640x480 @4
const isMobile = () => Math.min(screen.width, screen.height) <= 480
const WIDTH = 640 * (isMobile() ? DPR : 4)
const HEIGHT = 480 * (isMobile() ? DPR : 4)
16

I take your point, yes this project is (supposed to be about just) porting an old fixed-width game to the web. I’m looking forward to going deeper in V2.0 which needs to be responsive.

Changing those constants fixed the issue! Almost entirely, I will need to circle back around on this topic but can proceed with confidence my tests will run ok, will be far more than “darn, it looks right on my computer”. THANKS!!!

17

Glad that I could help :slight_smile:

Maybe you just need to add some code for devices with non multiple of 0.5 DPR. Example: DPR of 2.6.

18

Hello @yannick.

I have a question. What if my game has a lot of images, let’s say 1000 images? I want my game to be responsive for PC and mobile and to be as sharp as possible, so making 4 images with different resolutions would come out 4000 images, and it doesn’t seem like the best solution. What would you recommend in my case?

19

Would love to hear @yannick 's input on this last question from @dawser95. As well as any opinions/updates to this discussion or GitHub - yandeu/phaser3-optimal-resolution (2years is a long time).

I find myself struggling to make a decision on handling a super high res game on mobile. On my 4k monitor they are crisp and awesome looking, but the assets/tiles/sprites are overkill on mobile and causing a problem