Jump to content

Text and Emoji blurred rendering


Recommended Posts

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




Link to comment
Share on other sites

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

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 :D 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)

Link to comment
Share on other sites

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?



Link to comment
Share on other sites

  • 4 months later...

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,

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...