How many pixels? wondering about target resolution

Phaser 3
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