Babylon React Native - Babylon GUI - Changing font size?

Questions
,
1

In Babylon React Native is it possible to set font size to TextBlock element? I am having trouble figuring if this isn’t a feature yet or if i am doing something wrong. On my device font is so small it’s unreadable.

2

cc @srzerbetto @bghgary

3

Hey @muta, how are you doing?

Unfortunately, GUI is under partial support on Babylon Native right now. Text rendering working for some scenarios like buttons and sliders as well as text rendering to a dynamic texture. However, the TextBlock component is currently not supported.

4

Hey @srzerbetto, doing very well, how about you?

My scenario is measuring distances in AR session, any suggestions how to make this work?
Can i display dynamic texture in a GUI element?
Or should i try with buttons?

5

Hey @muta , how are you doing? Sorry for the late reply.

I’ve check other members of the team and it turns out that you can actually use TextBlock with Babylon Native. The only caveat is that Babylon Native does not load any fonts by default, so in order to do any text related rendering you first need to call _native.Canvas.loadTTFAsync and provide the font name and content of a ttf file as a byte array. I did a small sample on how to do it:

BABYLON.Tools.LoadFileAsync("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", true).then(
        (data) =>
        {
            _native.Canvas.loadTTFAsync("droidsans", data);

            // GUI
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", scene);
            var textblock = new BABYLON.GUI.TextBlock();
            textblock.text = "Sample Text!";
            textblock.fontSize = 24;
            textblock.top = -100;
            textblock.color = "white";
            advancedTexture.addControl(textblock);
        });

You will need to do this for any of the approaches (Dynamic texture or GUI). The GUI elements are not 100% feature complete on Babylon Native yet, the render but you might have some incorrect behavior in some cases. I believe that if you go for the dynamic texture, you should have a more stable experience. I would only use GUI elements if you really needed some of their features.

3 Likes
6

Hey @srzerbetto, i gave it a try and can’t make it work.
Font loads and i can use dynamic textures, but on TextBlock component only line textblock.fontSize = 24; doesn’t do anything. I also tried using your code in BabylonReactNativeSample, and still font size stays the same :confused: Could you forward me a minimum example where you made it work?

7

@muta , sorry I think I miss understood your issue from the beginning. Unfortunately there seems to be an issue with fontSize property on Babylon Native right now. Using a dynamic texture you can control the size of the rendered text using the font parameter. However, in order for you to have something render as a GUI (in screen space and not in the 3D scene), I was able to make a workaround where you handle the rendering using the AdvancedDynamicTexture directly:

function buildUI(scene: Scene): void {
  
  //Get access to the native runtime.
  AcquireNativeObjectAsync().then((native: INative) => {
    
    //Load .tiff font file
    Tools.LoadFileAsync("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", true).then(
      (data: ArrayBuffer | string) => 
      {
        //Requires data to be ArrayBuffer
        if (data instanceof ArrayBuffer) 
        {
          native.Canvas.loadTTFAsync("droidsans", data);        

          // GUI
          var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
          
          // Manually draw text in the AdvancedDynamicTexture using its context.
          advancedTexture.onEndRenderObservable.add( () => 
          {
            var font = "110px droidsans";
            var context = advancedTexture.getContext();
            context.font = font;
            context.fillText("Sample Text", 75, 135);
          });  
        }
      });
  });
}

By changing the number in the font variable you should be able to control the rendered text size (it worked on my local BRN projects). Its more manual than using the Text component but it should give you a workaround while we don’t fully support GUI Text.

3 Likes
8

@srzerbetto I’m having trouble getting this going in the BRN sample app. The font seems to load and there’s no other errors, but also no text is rendered.

BRN 1.6.3 RN 0.71.7 and tried Babylon.js 5.42.2 and 6.14.0

9

Strangely, if I create a Button first then a TextBlock, both work, but if I only create a TextBlock, it renders nothing :thinking:

10

Scrap that. Got it going :slight_smile:

1 Like