Different text styles (colour, bold, ..) within one TextBlock

Questions
1

Hello everybody,

I have a chat in my game which is composed by a TextBlock in a ScrollViewer, this is working great, but I would like to use it not only to chat but also to announce some events, and I would like these announces to be highlighted / differentiated from the rest of the chat content, ideally in another coulour and maybe bold and / or italic…

Any chance to embed style in the content of the TextBlock ?

thanks!

2

Hi @Fenryll! Check this link: Use the Babylon GUI - Babylon.js Documentation
I hope this is what you want to achieve!

  var style = advancedTexture.createStyle();
    style.fontSize = 24;
    style.fontStyle = "italic";
    style.fontFamily = "Verdana";

   //Then affect the style to a control:
    textControl.style = style;

Here is the list of properties supported by styles so far:

  • fontSize
  • fontStyle
  • fontFamily
  • fontWeight

Please note that if a control has a style, then the style values are used instead of values directly defined on the control itself.

But I guess you try to do it all in one TextBlock right? Have to think about this one :thinking: The only thing I come up with, is to concat multiple TextBlocks with different colors in a StackPanel :roll_eyes:

1 Like
3

Thanks for your answer @wulf11 !

So yes, it is actually working within only one textBlock, and I wanted first to see if there was another solution than using multiple ones, but I could give a try, I created a kind of buffer manager to keep a ‘fifo stack’ of the last 30 lines of chat, I could extend the mechanism to last 30 textBlock…
Other quick solution would be to start (or embed) any annoucement with three ***, and remove any leading * of standard chat (to avoid fake ones, huhu)
I have to give some tries later (on my mobile now) but no chance to have bold by just using a tag ?

4

I’m afraid tags don’t work here. But maybe someone else can show us a hack?:thinking:
You may also take a look here Graphic User Interfaces - Babylon.js Documentation !
Maybe a combination with one of the alternative GUIs (CastorGUI or dat.GUI) will bring faster results…
(But I have no experience with them at all :sweat_smile:)
Your ideas seem pretty solid to me! Please share your solutions/experiments :upside_down_face:

5

I came up with some experiments and expanded the TextBlock class…

https://www.babylonjs-playground.com/#MWHMHP#2

Now it’s working with only one TextBlock instance!
The code is really messy, but I just wanted to proof the concept and it works :slightly_smiling_face:

1 Like
6

Thanks! The end result is exactly what I need :slight_smile:
I’ll have to check how you did it this evening, cause this kind of approach could open new possibilities :wink:

1 Like
7

@wulf11 little question :slight_smile:

text1.multiTextArgs

takes an array of object with properties text, fillStyle and font that I could easily create in my buffer, what I don’t understand is how to force newline, i.e. what I could produce with a \n within the .text of a textBlock ?

btw, because of your playground, I am coding in front 2001: A Space Odyssey :wink:

8

Damn! one solution and a new problem opens :stuck_out_tongue_closed_eyes:
hmm I am not sure yet but took a quick look into the TextBlock source:

https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/textBlock.ts

There you will find a _breakLines method…it seems that the height of the textblock has to be calculated for every textline ! so I think we need to modify/overwrite this function too! I just started learning TypeScript some weeks ago so I am lacking a bit of knowledge here :sweat_smile:

still don’t get the error in the editor:

Class “MixedTextBlock” incorrectly extends base class ‘TextBlock’.
Types have separate declarations of private property ‘_drawText’

any hints are welcome :slightly_smiling_face:

And yeah Space Odyssey rocks! :nerd_face:

9

Here is the “new” solution:

https://www.babylonjs-playground.com/#MWHMHP#3

!Note: it is very dirty and if you can, please do me a favour and tidy it up :sweat_smile:
It will still crash if there are more then one “\n” escapes or a whole “empty” line in it :woozy_face:
I guess a way better solution would have been to just modify the text property and don’t use a new one (multiTextArgs)…because of the depencies in the class!

But it was a nice challange and I was able to learn a lot about our Babylon.GUI :orange_heart:

3 Likes
10

I have made the javascript version of your code and added some changes so that the multiple line break or “\n” works perfectly. In addition I added the line break when the phrase width is bigger than the control width @Fenryll @wulf11 https://www.babylonjs-playground.com/#MWHMHP#20

2 Likes