Settings for crisp rendering

Phaser 3
1

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

2

:wave:

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

3

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).

4

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 ?