Babylon React Native - Babylon GUI - Changing font size?

Questions
,
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