# Settings for crisp rendering

**URL:** <https://phaser.discourse.group/t/settings-for-crisp-rendering/10000>\
**Category:** Phaser 3\
**Created:** [July 23, 2021, 1:01pm UTC](https://phaser.discourse.group/t/settings-for-crisp-rendering/10000 "2021-07-23T13:01:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bill\_Deakin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bill_deakin/32/5156_2.png) [@Bill\_Deakin](https://phaser.discourse.group/u/Bill_Deakin)\
**Post date:** [July 23, 2021, 1:01pm UTC](https://phaser.discourse.group/t/settings-for-crisp-rendering/10000/1 "2021-07-23T13:01:10Z")

</div>

I hope someone might be able to advise…

We’ve been developing games with a different engine for the last 5+ years and earlier this year decided to start experimenting wiith Phaser. We love how flexible it is and lots of things about it, but we have struggled to get hdpi mobile devices to look nice.

We’ve experimented with the scale manager and config settings, tried both webGL and canvas types, and we’ve tried importing assets at 2X and 3X dpi and scaling down accordingly based on pixel ratio but nothing we do is giving us the nice crisp rendering we were able to get with the engine we used previuosly (I don’t know if it’s appropriate to name that engine here so I won’t)

So I have 2 questions before we ditch Phaser and look for an alternative:

1. Is it possible to get set Phaser up to render nice and cleanly across all devices.

2. If so, can anybody point us in the direction of a suitable setup and process? Or, is anyone available to be hired as a consultant to help us get set up and advise on getting the best results?

To be clear, we’ve a small team but we’ve shipping 40+ projects in the past, and have just shipped our 3rd Phaser project. We like just about everything else about Phaser, it’s just the visual quality we’re struggling with.

Thanks in advance.

Billy

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 23, 2021, 4:55pm UTC](https://phaser.discourse.group/t/settings-for-crisp-rendering/10000/2 "2021-07-23T16:55:58Z")

</div>

👋

AFAIK you must use different game dimensions to match the asset sizes, since Phaser 3 doesn’t have a resolution switch.

---

<div class="post-metadata">

**Author:** ![Antriel](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/antriel/32/15_2.png) [@Antriel](https://phaser.discourse.group/u/Antriel)\
**Post date:** [July 23, 2021, 8:36pm UTC](https://phaser.discourse.group/t/settings-for-crisp-rendering/10000/3 "2021-07-23T20:36:30Z")

</div>

Multiply the canvas size by `devicePixelRatio`, then scale it down to fit the window by css (which Phaser does for you depending on the chosen scale mode).

---

<div class="post-metadata">

**Author:** ![Bill\_Deakin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bill_deakin/32/5156_2.png) [@Bill\_Deakin](https://phaser.discourse.group/u/Bill_Deakin)\
**Post date:** [July 24, 2021, 7:49am UTC](https://phaser.discourse.group/t/settings-for-crisp-rendering/10000/4 "2021-07-24T07:49:15Z")

</div>

Thanks for the suggestionn.

I’m currently setting the game size like this:

super({  
type: Phaser.WEBGL,  
width: window.innerWidth \* Math.max(1, window.devicePixelRatio / 2),  
height: window.innerHeight \* Math.max(1, window.devicePixelRatio / 2),

So should I change that to:

super({  
type: Phaser.WEBGL,  
width: window.innerHeight \* window.devicePixelRatio,  
height: window.innerHeight \* window.devicePixelRatio,

Then adjust the CSS? Currently the parent of the canvas is set like this?

#content {  
height: 100%;  
width: 100%;  
}

So should that be 100% / window.devicePixelRatio ?