$diff ~/test/phaser3-optimal-resolution/src/game.js src/game.js
5c5,7
< const DPR = window.devicePixelRatio
---
> const graphicsSettings = { best: 1, medium: 0.75, low: 0.5 };
> const DPR = window.devicePixelRatio * graphicsSettings.best;
>
8c10,11
< // base resolution is 360x640 @4
---
>
> // base resolution is 640x480 @4
13c16
< export const assetsDPR = roundHalf(Math.min(Math.max(HEIGHT / 360, 1), 4))
---
> export const assetsDPR = roundHalf(Math.min(Math.max(HEIGHT / 480, 1), 4))




$ diff ~/test/phaser3-optimal-resolution/src/mainScene.js src
10c10
<     this.load.atlas('atlas', `src/atlas/atlas-@${assetsDPR}.png`, `src/atlas/atlas-@${assetsDPR}.json`)
---
>     this.load.multiatlas("bigBackground", `src/atlas/pdw1A@${assetsDPR}.json`, "src/atlas");
19,21c19,22
<     const zombie = new Sprite(this, width / 3, height, 'atlas', 'zombie').setOrigin(0.5, 1)
<     const robot = new Sprite(this, width / 3, height, 'atlas', 'robot').setOrigin(0.5, 1)
<     robot.setX(width - 100)
---
>     //const zombie = new Sprite(this, width / 3, height, 'atlas', 'zombie').setOrigin(0.5, 1)
>     //const robot = new Sprite(this, width / 3, height, 'atlas', 'robot').setOrigin(0.5, 1)
>     //robot.setX(width - 100)
>         this.background  = new Sprite(this, 0,0, "bigBackground", "road2test").setOrigin(0,0);