MichaelD

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

 

Thanks!

post-5663-0-69267900-1447686282.png

Share this post


Link to post
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)

Share this post


Link to post
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?

 

Thanks.

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.