Text and Emoji blurred rendering

[MichaelD]

Hello All,

 

I'm using text and emoji and I'm rendering them on Phaser, but when I to .toDataUrl() the resulting image shows them quite blurry especially the emoji.

 

Is there a way to fix this issue?

 

I'm also using 

Phaser.Canvas.setImageRenderingCrisp(game.canvas); //for Canvas, modern approach        Phaser.Canvas.setSmoothingEnabled(game.context, false); //also for Canvas, legacy approach        // Pixel art.        game.stage.smoothed = false;        // No sub-pixels to remove camera jitter.        game.renderer.renderSession.roundPixels = true;

But the result  is the same, I'm running this on iPhone5s

 

Thanks!

[MichaelD]

Some more info on this, this is how all parts are rendered: 

[Skeptron]

Did you try Phaser.Canvas.setSmoothingEnabled(game.context, false); ?

 

(see doc example : http://phaser.io/examples/v2/input/pixelpick-spritesheet )

 

And maybe that article could help you : http://html5hub.com/state-of-nearest-neighbor-interpolation-in-canvas/#i.3bx5iz87ues5sm

[Skeptron]

Lol sorry for my stupid comment, just saw that's what you're doing.

 

A question though : are your assets scaled?

[MichaelD]

Scaled how? you mean if Phaser scales them? I have ScaleManager.NO_SCALE set. other than than no they aren't being scaled anywhere else (that I know of)

[chg]

Some more info on this, this is how all parts are rendered: 

Looks like the "Phaser" and "<img/>" images are both at a lower resolution than the "Input" for the Emoji and text (50% x & y, are you taking device pixels into account? ...it looks like you aren't, the downscaling&upscaling shown matches the devicePixelratio of 2.0 for the iPhone), assuming that the  and the 3 hexagons are sourced from a raster image (the former also seems to bear the scars of being overly sharpened)

Both the canvas backing store and img pixel data are presumably being then upscaled for display by the browser, but while the canvas gets upscaled with something like nearest neighbour while the image gets a different sampler like lanczos, which as far as I know you don't get a lot of choice in with the available CSS options for img elements.

 

It's unclear to me what the problem actually is (ie. you haven't explained why the screenshots(?) need to match... eg. if you were trying to make screenshots the data the img elements is displaying already seems a faithful capture of the canvas image), but depending on what you want you may be able to increase the resolution of the canvas by the DevicePixelRatio or copy the phaser canvas to a DevicePixelRatio larger canvas, calling toDataUrl() on the latter (don't forget to set width and height on the img tag so that it displays at the correct size)

[MichaelD]

First of thanks for explaining some things. The problem is I'm trying to capture text&emoji and images in a single input and then combine that into an image.

 

So the "possible" solution would be to create a canvas 640x60 (right now its 320x30) and then draw that into the image (that would have 320x30 dimensions)?

 

If yes is there a standard way to create a Phaser canvas using the devicePixelRatio?

 

Thanks.

[Shems]

Hello,
Please I'm kinda new on Phaser and I'm working on a project that might require changing some text on emoicones. I mean if there is ":)" in the text I change it on a "" the only link I found that is close to this is your topic here. May you help me.

Thank you,
Regards,