Multi Line Support

Questions
1

Is there multi-line support for GUI text in Babylon?

PS: I went through this forum, but couldn’t implement/find a solution.

Regards,
Bazinga

3

Hey @Sidharth_Suresh ! Welcome back to the Babylon forum.

We do have multi-line support for Babylon GUI TextBlock, but it’s not in the traditional /newline /n which you might have tried.

https://playground.babylonjs.com/#XCPP9Y#10464

There are a couple ways to achieve this but I will show the simplest. In the playground link above we can achieve multiple lines by setting text1.textWrapping = true; (line 36)
This will wrap the text based on the size of the textbox with you can manually set using text1.width or text1.widthInPixels.

A second solution you can do is putting 2 textblocks inside of a stack panel. Here is the solution in our GUI Editor, which I highly recommend checking out if you want to play around with different possibilities with text block. Babylon.js Gui Editor

4

Hi @msDestiny14 ,
Thank you for your prompt reply. I have explored text block and it does wrap the text. However, I want the user to be able to input text and the line would break whenever the character count crosses a certain limit. In case of a text block the content is fixed and is not mutable. Please correct me if am wrong.

5

@Sidharth_Suresh To my knowledge this is correct. Instead you will have to do a more fancier solution using the textBlock, or extend the functionality.

I created a version using the textBlock with our new GUI Editor tool as well as some additional coding on top of it. https://playground.babylonjs.com/#4RTUCB#58 Let’s take a look how we achieved this.

First I created this GUI using our new GUI editor. It’s a textBlock with a rectangle parent. Here I was able to set the textBlock to word wrap and set ResizeToFit to true. https://gui.babylonjs.com/#7YA954#7

Next comes to coding in the playground. First I load in our GUI texture from the editor in line 31 and grab our textBlock and rectangle controls in line 38-39.

Now the next step is important! In the next lines I set

rect.adaptWidthToChildren = true;
rect.adaptHeightToChildren  = true;

This is important because this will scale the box to match the text as we grow with the word wrap.

Next we set up some observables in (lines 47-67) These are responsible for clicking on the text block. When we click on it we want to set a state so we will be able to type on it. Then when we click off we can set this to false.

Now our final observable is the keyboard typing. If we have selected our textBlock then all keyboard input we want to add to out text string. Also take a look how we handle the back space key. Here we just substring everything but length-1. (lines 71-88)

scene.onKeyboardObservable.add((kbInfo) => {
        if(selected == true) {
        switch (kbInfo.type) {
        case BABYLON.KeyboardEventTypes.KEYDOWN:
        let key = kbInfo.event.key;
        console.log("KEY DOWN: ",key );
        if(key === "Backspace") {
            text.text = text.text.substring(0,text.text.length - 1);
        }
        else if(key === "Enter") {
        }
        else {
            text.text += key;
        }
        break;
    } }
});

And there we have it. The word wrap and the resize to fit will allow the textBlock to grow as we increase the size of our string and our rectangle will match. :joy: Let me know if you have any questions to this implementation!

P.S. If you’d like to put out a PR to the latter solution (editing the inputText control), I’d be more than happy to review it. If not, I might add it to the backlog of nice to have GUI additions post 5.0 :slight_smile:

6

Hi @Sidharth_Suresh do you have any more questions on the topic? :slightly_smiling_face:
@msDestiny14 want me to create an issue for the inputText control? :grinning_face_with_smiling_eyes:

7

Let’s add this as a post 5.0 issue and if anyone in the community wants to pick it up they sure can.:slight_smile:

8

There is a PR in progress for it but it might require a bit of rework to get in GUI TextInput with multiple lines - #21 by sebavan

1 Like