Simple way to do styling in a single text box?

Questions
1

Looking for a simple way to achieve this sort of styling without having to create a new text box:
image

2

Hi again, i73. Can I assume you mean ‘textBlock’, as in a GUI 2d textBlock?

Not HTML, right?

For GUI 2d… pretty difficult… nearly impossible. But, I pulled it off, all in one CUSTOM control.

https://www.babylonjs-playground.com/#89X5KW#1

(Don’t resize the render canvas in any way, or it all goes wonky) :open_mouth:

Unfortunately, each instantiation (each use) of this custom button/label control “class”… needs custom tweaking. It takes more lines of code to create/tweak this custom button/label… than it takes to create another stand-alone textBlock (the blue “forward” text) and “force” it into proper position. Essentially, that’s what I did with this custom button. I added another textBlock and forced it into position with alignments, and top/left adjusting. Kludgy. I did exactly what you wanted to avoid. :open_mouth:

Notice the GUI 2d “style” declaration in lines 21-24. Well it DOESN’T allow color. Go fig. What I was thinking… is a new way of styling textBlocks… where… you could provide an ARRAY of styles… and each next-word of the text sentence… would use “the next style” in this new array-of-styles.

From a GUI-system programmer perspective… adding this feature could be a real nightmare… though the result/feature would be quite powerful. TextBlock words… would need to be “flowed”… which means each word of a sentence-of-text… would need to be measured and possibly horizontally “gridded”. Erf.

Just think about calculating the lineHeight of a group of words… where each word can be a different fontSize, fontFamily, and fontStyle. Nasty.

Tough one, i73. Stop asking such difficult questions and wanting such powerful features, eh? hehe (just kidding, of course). Feel free to give your thoughts, and let’s watch-for more/better comments and ideas.

1 Like
3

Thank you so much Wingnut, a little back story I’m using the Unity toolkit to export my game with TS, that in turn spits out the JS files.
So since this is such an issue using the GUI I should style my exported source once I’ve built it out? (This suckes because any changes made on the build on re export will write over my stylized code).

“adding this feature could be a real nightmare… though the result/feature would be quite powerful.”

I could see it being so, but supporting simple markup or markdown would be great (especially for my use case). I’ll check out the source to see if I can implement something like this.

1 Like
4

You bet, i73… get in there and hack it out. (Wingy checks his drawer to make sure he has a brain tumor triage kit… to use on i73, as needed.) :slight_smile:

You MIGHT wish to “dangle” the idea over in the Feature Requests sub-forum. I wouldn’t mind seeing how Deltakosh responds-to the brain tumor that you seek. heh.

Really, the “down and dirty” way to do this… is make the text in a 2D paint program, save as an image, and then use a GUI imageControl to display it. What… about 4-5 little images, and you’re done, right? SO easy. Low overhead. 12 minutes in the paint program. Text looks perfect every time, no matter the screen rez. Fancy borders and drop-shadows available, there, too.

You should consider it… unless you’re “into” pain. :slight_smile:

There’s also MeshWriter and similar real-mesh fonts. MeshWriter uses SPS particles as its mesh-fonts. https://www.babylonjs-playground.com/#XWVXN9#60 (that whole series is MeshWriter stuff… up to #102 or so, where I was putting video onto the meshWriter text - demented.) Not simple markdown or markup, by any means… but it sure is classy-looking.

1 Like
5

https://www.babylonjs-playground.com/#XWVXN9#104 :slight_smile:

Kind of fat-coded, but kind of nice. Spotlights can shine across it, and as you know, reflections/sim-chrome and many other texturing options, too. Mesh-text has its time and place… and because it is made-from SPS particles, it can dance, letter by letter… animated/colored/scaled individually, and do funny things like bump into each other. :slight_smile: Great for pre-school-age kids’ games… smiles smiles smiles.

MeshWriter text lays on its back, on the floor, by default. If I rem right… text.getSPS().mesh.rotation = whatever… to adjust it.

I’m getting some load-inconsistencies on that 104 playground… being grumpy sometimes… refusing to display. hmm. If I go to #60, and then back to #104… it loads right up. hmm.

6

I’m going to ping @MackeyK24 and see if he has any words. I think he has a LOT of experience with… something involved here. :slight_smile: Maybe he’ll have some ideas about that workflow. (thx mackey)

7

Not sure what your asking me … ???