Graphics & Text : Smooth display ?

[FuriouZz]

Hello!

 

I'm new in the PIXI.js community and come back to you with some questions about smooth display with Graphics & Text.

In my picture, I draw three circle : two with border and one filled. For my text, I use a custom font and as you can see my font is blurry.

 

I use autoDetectRenderer and set to true antialiasing & transparence.

I look something about retina display or scale, but the result is the same in my Retina MBP and my No-Retina iMac.

Does exist a solution for this blurry result ?

 

[mattdesl]

Typically you would draw your content at twice the size, and then scale it down.

 

See here:

http://www.html5rocks.com/en/tutorials/canvas/hidpi/

 

In PIXI, this means loading larger than normal text and images, and rendering them a scale (0.5, 0.5) for a typical retina display. To avoid scaling each sprite, you can just add your scene to a parent DisplayObjectContainer that is scaled according to the retina ratio.

[FuriouZz]

The tutorial use BackingStorePixelRatio, but with a WebGL render, the context doesn't have this property. How can I do that ?

[bubamara]

Looks like your assets aren't big enough for retina display.

I would detect device's screen resolution and load properly sized images according to it.

[FuriouZz]

I don't use image except the lamp. I use Text & Graphics. My question concerns Text & Graphics smooth rendering.