Scaling continued: about tilemaps @2x @3x @4x

Phaser 3
1

Hi,

I’ve followed the guidelines of supernapie & ourcade to implement the proper Apple way of handling hi-def screens (aka blurry/aliased sprites despite pixel mode in webkit).

The result is crisper, as expected.

I’ve however been unable to figure out how tilemaps handle the different levels of detail. So far I’ve simply created an @2x scaled copy of my tileset and loaded it with twice the tilewidth / height & h/v spacing (no bleed) and applied a scale level when creating the tile. The result is pretty mangled.

Is there a “normal” way to handle the higher res versions of a same tilemap?

N.B. @samme we discussed the use of canvas in my previous post to solve blurry images in webkit / ios ; it solved the blurriness but I noticed a significantly higher power draw in that mode; about 2x to 3x the battery drain. That’s too much to allow CANVAS to go to production (120x160px, scaled, draining 55% battery in 1hr is too much IMHO). Hence my return to the WEBGL topic…

2

Ok, I had it wrong; in order for pixel art to render properly on Safari (webkit, Capacitor to iOs & co), what worked for me:

  • Math.ceil the window.devicePixelRatio
  • use that number to select the proper resource size (@2, @3, etc.)
  • as explained the links of Supernapie & Ourcade, use this when setting the zoom level (in the scaling options).
  • no scaling options, juste using NONE is the only way to keep pixels crisp.

Part of my issue was due to using custom code to use external tilesets (vs the embedded ones in vanilla Phaser).

When it comes to displaying the proper amount of tiles on screen, using camera zoom did the trick. It keeps the crispness as OpenGl handles the zooming. Webkit only controls aliasing when the rendering canvas itself is scaled.

I hope to make a quick vid about this in the weeks to come.