solved [solved] GUI : TextBlock and text pixelated

[Celga]

Hello,

I'm discovering GUI part, in Babylon JS.
And for now, I'm trying to create a textblock, with simple text.

But, my problem is that my text is pixelated, even I change fontFamily, fontSize.

I've also tried to use "renderAtIdealSize" and "idealWidth". But, nothing changes.

I've noticed that the pixelation is reduced when I change the zoom of the browser.
I specify that I use, in this case, Mozilla and also Chrome, for my tests.

Does it exist a solution ?

Here is a link towards a playground, in which I put a part of my code and specially
the part about the GUI.

The fact is, in the playground, the text is not pixelated.
https://www.babylonjs-playground.com/#66ZD6S#1

I put also a screenshot of the result, in the browser Mozilla (Zoom is at 100%).

If anybody could give some advice, I thank you in advance.

 

 

[GameMonetize]

Hello, based on what you said I can see two options:

- make sure to call engine.resize() when your canvas is resized

- make sure your canvas is not created with fancy options (no option at all is fine)

[Celga]

Hello,

Thanks for your answer.
I confirm you that I already call engine.resize() :

          // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });

And I use the basis for creating my canvas :
          #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;
          } 

But, I have still the same result.

[GameMonetize]

Do you mind sharing your page on a server so we can see it live? (and could you please use babylon.max.js for debugging purpose?)

[Celga]

Hello,

As you advise me, I embedded babylon.max.js instead of babylon.js, for debugging purpose.

And, I put the files of my page on a server.

Here is the link to show the page :
http://celinegarry.fr/TestGUI01/index.html

Thanks.

[GameMonetize]

ok:) you should just set advancedTexture.renderAtIdealSize = false to render using optimal resolution

[Celga]

Thanks for your answer.

But, unfortunately, I've just tried with changing renderAtIdealSize to false and I have the same result
Here is the new link :
http://celinegarry.fr/TestGUI02/index.html

May be I have something else wrong.
Sorry

[GameMonetize]

Ok try with your fxaa configure with a ratio of 1 instead of 1.5

[Celga]

Hello,

First of all, I apologize for the late answer.

I thank you for your advice, @Delatkosh.
I tried with changing the fxaa configure, and... It works :)..
The preview is now better.

Thanks again!