Hi, I am new to Phaser and have had issues with blurriness on mobile. My svgs and text look crisp on web app regularly, but when converting it into Phaser scene it became blurry. I was able to fix the blurriness on desktop, but still noticable on mobile.
For simple comparison, I tried just rendering regular dom image and comparing the same image rendered via phaser and the one via phaser is always more blurry on mobile devices.
I was wondering if anyone knew the solve to this?
This can be due to a myriad of issues. You’ll have to provide some code.
I personally solved the blurry text creating a Text object with a greater size in pixels, and scale down before display.
For example instead of creating a 32px text size, I create a 64px Text object instead, and scale down to 0.5. This solved the problem both in desktop and mobile apps.
Think that one of the problem can be the original size of the Text object. When it is scaled, it does not get re-calculated as to normal fonts in web pages, it looses it’s vectorial nature and become a bitmap.
I never tried for Svg’s sorry.
In Phaser images can’t render any sharper than the canvas or texture resolution. This is unlike ordinary DOM rendering, where SVGs are rasterized at the device’s physical resolution. So I would first check those sizes:
const { width, height } = this.scale;
const { realWidth, realHeight } = this.textures.getFrame('textureKey'); /* your SVG image */
console.log(width, height, realWidth, realHeight);
Often a game canvas sized to a mobile viewport (e.g., 480×720) is too small for good detail.