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 ?
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:
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 The only thing I come up with, is to concat multiple TextBlocks with different colors in a StackPanel
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 ?
I came up with some experiments and expanded the TextBlock class…
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
Thanks! The end result is exactly what I need
I’ll have to check how you did it this evening, cause this kind of approach could open new possibilities
@wulf11 little question
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
Damn! one solution and a new problem opens
hmm I am not sure yet but took a quick look into the TextBlock source:
Babylon.js/textBlock.ts at master · BabylonJS/Babylon.js · GitHub
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
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
And yeah Space Odyssey rocks!
Here is the “new” solution:
!Note: it is very dirty and if you can, please do me a favour and tidy it up
It will still crash if there are more then one “\n” escapes or a whole “empty” line in it
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