Blurry text in Pixi.js

[PainKKKiller]

First of all I would like to say that I've read all topics and issues on github, related to this problem and it didn't help me. I've checked PIXI.RESOLUTION, antialiasing, different fonts (google web fonts, system fonts), colors, etc and anyway I am still getting blurry text. And when I apply a little scaling to canvas It gets even worse.

Examples how it looks without scaling and with scaling I attached.

Would like to hear any advice on subject.

Thanks in advance!

 

 

[PainKKKiller]

And some addition, I work on Ubuntu, my monitor has 1920 x 1080 resolution, and I see font blurring in all browsers.

[themoonrat]

what resolution are you creating the pixi renderer at?

[babycarlitos]

Hello PainKKKiller,

Just like themoonrat mentioned, .resolution is how you make the font crisp. You can do it two ways:

var style = {

        font: 'bold italic 40px Arial',
        fill: '#ffffff',
        stroke: '#000000',
        strokeThickness: 2 };

var someText = new PIXI.Text('HELLO',style,2);

OR

var someText = new PIXI.Text('HELLO',style);
someText.resolution = 2;
  

They both do the same thing. Maybe you set RESOLUTION instead of resolution?

[themoonrat]

In the latest PIXI, before creating the renderer, set

PIXI.settings.RESOLUTION to 2. That should double the resolution of the screen AND increase the resolution of the text at the same time. 

What I was aiming at with my question was the normal resolution of the screen. If it was something like 600x400, then on x1 resolution, you're never going to get sharp text; you really need the pixels. Another thing you can try is turning on roundPixels when creating the renderer, to try and get all text drawn at whole pixel co-ordinates rather than sub-pixel co-ordinates, which can also cause blurriness

[PainKKKiller]

Thanks for your replies, my initial canvas size is 1126x634 and on x1 resolution I have blurry text. When I do PIXI.settings.RESOLUTION = 2 before creating render, I see very nice sharp fonts, but my render doubled in size and even not fitting my screen. So it works but now I have no idea how to control render size. When I do var someText = new PIXI.Text('HELLO',style,2); I see no difference at all, text still blurry.

[PainKKKiller]

So question how looks like How to make PIXI.settings.RESOLUTION = 2 and still have real size of the render 1126x634? Or should I have PIXI.settings.RESOLUTION = 2, and canvas size 563x317, then I'll get desired 1126x634?

EDIT:

Last way doesn't work now  I have problems with scale and positioning elements inside canvas, so question still open.

[babycarlitos]

Doing PIXI.settings.RESOLUTION  will change the res of the entire render. If you double the res then you would have to re-adjust your entire project. I think you just want the font to look better. I did a quick fiddle , https://jsfiddle.net/babycarlitos/awamw4Lt/  This was done on pixi 3.0.11. I can do another one for 4.X since it uses slightly different calls for text although they are just deprecated not removed.

[themoonrat]

9 hours ago, PainKKKiller said:

Thanks for your replies, my initial canvas size is 1126x634 and on x1 resolution I have blurry text. When I do PIXI.settings.RESOLUTION = 2 before creating render, I see very nice sharp fonts, but my render doubled in size and even not fitting my screen. So it works but now I have no idea how to control render size. When I do var someText = new PIXI.Text('HELLO',style,2); I see no difference at all, text still blurry.

You'll want 1126x634, with the resolution set above 1, and you get your nice sharp fonts. You claim that this makes the renderer double in size... you need to set css width and height on the canvas to stop it from doing that.

So, you create the renderer to 1126x634, which means you position your elements to that resolution.  You set the resolution to x2, which internally now makes rendering at 2354x1268. You then add css style properties of the canvas, of width and height, to 1126px x 1268px respectively. This keeps the visible size on the page as you want it.

[PainKKKiller]

21 minutes ago, themoonrat said:

You'll want 1126x634, with the resolution set above 1, and you get your nice sharp fonts. You claim that this makes the renderer double in size... you need to set css width and height on the canvas to stop it from doing that.

So, you create the renderer to 1126x634, which means you position your elements to that resolution.  You set the resolution to x2, which internally now makes rendering at 2354x1268. You then add css style properties of the canvas, of width and height, to 1126px x 1268px respectively. This keeps the visible size on the page as you want it.

Thanks for reply, but this isn't working. My css rules sets size of canvas to 1126x634 but when I set the resolution to x2 I still getting doubled canvas.

 

babycarlitos, thanks for fiddle you're created, I found that this solution in fact gives effect, but very very slight, may be because of size and color of my text, later I'll create fiddle to show.

 

[PainKKKiller]

 

So I've created fiddle which reproduce the problem https://jsfiddle.net/jm24z0da/2/ So far I see there is no way to get sharp text with small font sizes (10 or 8 px) neither in pixi or html.

[themoonrat]

Firstly, I modified it a touch to explain the 'resolution at x2, but keeping the canvas the origianl size' - https://jsfiddle.net/u30hhLkq/1/ - Note the css I've added. Having this increased core rendering increase is an important factor in sharper text at low font sizes.

But, ultimately, with font sizes that small, you're always going to struggle. I'd argue that with the fiddle above, the pixi text looks better @ 8px!

[PainKKKiller]

Yes I see, thanks for fiddle, but I think It doesn't help, text looks the same (((

[Alex Tappin]

On 12/9/2016 at 1:40 AM, PainKKKiller said:

Yes I see, thanks for fiddle, but I think It doesn't help, text looks the same (((

Did you ever figure this out? Running into similar issue!

[PainKKKiller]

No I didn't, but there is some work arounds. Firstly, you can try 

 

 PIXI.settings.PRECISION_FRAGMENT = 'highp'; //this makes text looks better

 this.renderer = PIXI.autoDetectRenderer(845, 451, { antialias: false, transparent: true });
      
 this.renderer.roundPixels = true; //and this too

Secondly, if you want a perfect scalable text you have to do it in html, and so did I. I've made game with pixi.js and react 

[tywang2006]

it might be something wrong with you viewport setup in the html page.  if there is something "<meta name="viewport".......", delete it then check if it looks better

[Shahmeer]

I was facing the same problem which is pixelated/blurry text using `PIXI.Text()`. Now, I'm getting perfectly clear and sharp text. What I did is that I increased the font size to a big value like "50". Then I scaled the text down to desired size.

const label = new PIXI.Text("SomeText", {
    fontFamily: "Arial",
    fontSize: 50,
    fill: 0x000000,
    stroke: 0x000000,
    strokeThickness: 1,
  });
  label.anchor.set(0.5, 0);
  label.scale.set(0.2);