What is right way to resize AdvancedDynamicTexture with custom fonts

Questions
1

Hi there!

Question can look weird, but I don’t know how to describe it better :slight_smile:

I think there is a bug with AdvancedDynamicTexture. Or maybe I use it wrong, because I cannot reproduce it in PlayGround.

Problem: I use gui with custom font. It works. But sometime it glitches, font became standard and then back to custom. On the video I can reproduce it by resizing window (there is no cursor, but hope you can see it). It only happen once after creation of ADT. One resize - it brake - second - fix.

And I cannot force it to reproduce with code, only by resizing manually. But sometime it happen when I add controls dynamically to ADT (on the video content is loaded from json).

Also there is another problem (maybe another bug). If I manage to “brake” font before something updates ADT, then it updates, font fixes, but rects use wrong size and text cut off. Of course it happens only if useInvalidateRectOptimization is true. Video:

So maybe it’s a bug. Or I can do something to workaround?

2

One interesting addition - if I import “@babylonjs/inspector”, only import, don’t show it, bug disappears, maybe inspector redraw adt or canvas some way

3

How do you add your font? I eventually also have problems loading fonts from the header i.e.

    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <style>

@import url(‘https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap’);

However, loading a font in canvas (i.e. from a typekit) always works fine. And this no matter if I use the Inspector or not.

4

Well, I have this in index.html

<head>
    ...
    <link rel="stylesheet" href="style.css"/>
    <link rel="preload" as="font" href="Comfortaa-Bold.ttf" type="font/ttf" />
    ...
</head>
<body>
    ...
    <div style="font-family:Comfortaa; position:absolute; left:-1000px; visibility:hidden;"></div>
    ...
</body>

and this in style.css

@font-face {
    font-family: Comfortaa;
    src: url('Comfortaa-Bold.ttf');
}

the font is loading good and working fine, but I have that weird glitch

5

And as I understand Typekit is some web service. I would like to not use any services (because of CORS). So I want to have font file locally, bundled with the game.

6

Are we talking iOS here or is it a common issue?
Did you search the forum? I remember some discussions around a similar topic but would need to find’em again. Let me/us know if you don’t manage to find the answer to your issue.

Edit: Quickly made a search through my msg. You might find your answer with this thread (or not?)

7

So, no it’s not iOS (hope to not have any problems there). Just testing on PC, but bug appears on Android too.

I didn’t think that relates to font loading, as font loads and shows normally, and that topic doesn’t help, as I understand ways I can use it.

But, after your mention about loading font to canvas I found and tried this:
изображение

And it worked! But of course I must wait for it before creating ADT. Then it works fine. So I can use it as workaround.

But anyway, glitch looks like a bug. Because font is loaded, but why it brakes for one frame/update of ADT? markAsDirty() for ADT doesn’t help. I tried to call it periodically, but it doesn’t work.

1 Like
8

Yes, I also had that other piece of code. I’m glad it worked for you (sort of).
My apologies. I thought it would also be in the thread I shared… but apparently, it was elsewhere :face_with_hand_over_mouth: So, thx for sharing it again :pray:

As for the gui update, I also remember we kind of discussed it before. Sadly, my small brain :brain: doesn’t remember the outcome :hear_no_evil: So, let’s ask again our gui-angel cc @carolhmj

Edit: Thinking of it a bit further with a delay :sleeping: :face_with_hand_over_mouth: may be I sort of remember it could be something around cross-origin and CORS policies. I kind of remember that when this happend to me, if I reload the scene, on the second time the font (eventually) makes it through and displays correctly (even on resize).

9

Using the FontFace is the right move here because it guarantees the font is there before the GUI/Canvas tries to use it, otherwise, it will depend on the browser behavior. I wonder if the case with resize is for some reason trying to load the font again, and that’s why it switches back to default for a frame. Could you share a reproduction of your project? It doesn’t need to be the full project, just this part with the font.

1 Like
10

Sure, that’s it

repro.zip (75.3 KB)

1 Like
12

I will let @carolhmj have a look at your project since I know **** about Vite :face_with_hand_over_mouth:
Just wanted to ask (while waiting because it’s the weekend and also holidays :beach_umbrella: period)
…Did you actually check with some other font and did you try to specify the fontWeight?

13

Just do
npm install
npm run start
:slight_smile:

About other font - didn’t try yet, but I will and write later.

14

Yes,sure. But if there’s anything specific for running the project with Vite, I will likely not be able to detect it. That would be a waste of time (for both of us). I don’t think you need me to make further ‘assumptions’ so I’d rather have you wait on the feedback from someone who knows.

15

Yes sure. But hope it’s not related to Vite, as I had this bug on another hosting, not only locally.

Now I tried to check another font, and cannot reproduce issue again (with previous font too). But then tried another browser - and it’s here, but this time font looks like not loaded for first render and appears only after resize.

So now I think, that it’s related to some browser cache? Maybe font caches somehow and loaded (for the first time), but it’s not loaded for real, that’s why on next resize it brakes, and then fixes again. Weird.

Same for another font. So I think it’s related to loading\cache, and not to font itself.

But maybe there is still some bug. Who knows. Thank you anyway, as we found solution/workaround at least.

16

Thanks for the feedback,
The reason I was asking this is because I created some fonts myself. Ages ago. But the font format is still unchanged. I sort of remember I eventually had issues (including in css) with the naming of fonts. Font name, family name, ps name, font type and font style. I guess you didn’t download and integrate the entire family of this font. Only the bold version style. That’s why I suspected that eventually a fallback towards the regular version is eventually called at some point. Reason why I asked you to check with another font. I would try to either

  1. Get and serve the regular version of the font and put it as a fallback, first in the list.
  2. Add fontWeight and make sure you use the correct style name, gathered from the font info. It could be ‘bold’ or ‘700’ or ‘700 bold’, honestly I didn’t check.
  3. Put the url in full in the source to avoid any potential blocking when reading the font url.
  4. If you can find or convert it, use the .otf version of font.
    May be any of these will help. Meanwhile, have a great day :sunglasses:
1 Like
17

I was going to report I’m seeing exactly that on the testing! I also saw these browser message:

image
image1896×150 31.3 KB

From this explanation on MDN: MDN (mozilla.org), it seems like preloading a font requires us to add this “crossorigin” attribute to it. After doing that, the font is loading as expected every time. And there’s not even need of that hidden div, it seems the @font-face declaration on the CSS is enough for making the font available to the canvas.

18

Sounds good, as it would be great to not have code, that must wait for font loading.
So I tried it now. And it’s working in Chrome (I think you used it), but not working in Firefox (I use it as main browser).
In Firefox font is loaded, but after creation of adt (I think so), because at first the font is standard, and after resize it changes to custom.

I have turned on “disable cache” in both browser, if it matters.

19

Btw, I have some other bugs with adt/gui, it’s more about layouting/resizing. Should I make another topic or can ask here? ) (I have workarounds, so it’s not urgent)

20

If it isn’t related to resizing and custom fonts, it’s better to make one topic per specific issue.
It’s easier to track and solve’em and depending on what it is, it might involve different people.
If I can ask you to kindly do that? You can still link it to another post if it’s part of a more global thingy.
That would be my suggestion.