How to write wrapped text in a color other than white

[Borjan]

I can write texts on "billboard style" mashes in any combination of text and background colors. However, I cannot figure out how to do it when wrapping text.

For text wrapping I've used a code I've seen on this forum and on Stackoverflow and it works fine. However, it uses direct functions of WebGL and that apparently collides with the usage of BABYLON.JS objects (not surprising as it goes underneath the Babylon layer).

So, I can draw text In white, but not in black. I'm sure it can be done, but I'm fighting it the whole morning without succes,  Please have a look into this playground example (I've isolated it from the rest of my application). To see the meshes, double click on the canvas.

https://www.babylonjs-playground.com/index.html#MBENKS

Thanks very much in advance.

[Borjan]

I've improved the example a bit: https://www.babylonjs-playground.com/index.html#MBENKS#1

[Borjan]

I've solved it somehow by drawing a rectangle directly in WebGL, see lines 26 and 27

    textureContext.fillStyle = "#B5FFFF";
    textureContext.fillRect (0, 0, 1000, 1000); 

check: https://www.babylonjs-playground.com/index.html#MBENKS#3

As I'm not a neither WebGL nor BABYLON.JS developer, please comment on my solution. 

[adam]

I was unable to view your PG because it isn't working on my iPhone.

You should probably be using GUI:

http://doc.babylonjs.com/overviews/gui

[Borjan]

6 hours ago, adam said:

I was unable to view your PG because it isn't working on my iPhone.

You should probably be using GUI:

http://doc.babylonjs.com/overviews/gui

Hi Adam,

I'm using GUI in this particular application prototype already, but it seems not to be meant for this particular purpose. Maybe I'm wrong. 

BTW, I've  also tried to open playground on my windows phone from the link provided by html5devs and it also fails (goes to default PG scene). However, typing of the last part of the url opens the PG without problems. Probably a glitch in the forum software.

[GameMonetize]

GUI support textwrapping and text colors. Do you have any other specific needs?

[Borjan]

Billboards I'm showing need to be in a 3D scene, i.e. to resize depending on their spatial position - I'm showing a non-planar graph. That is basically all.

[GameMonetize]

you can leverage this then perhaps:

https://www.babylonjs-playground.com/#ZI9AK7#1

[Borjan]

On 8/30/2017 at 0:52 AM, Deltakosh said:

you can leverage this then perhaps:

https://www.babylonjs-playground.com/#ZI9AK7#1

Hi Deltakosh,

I've read the documentation more thoroughly again and have checked this PG (I've set the button in the billboard mode, see: https://www.babylonjs-playground.com/#ZI9AK7#115 - you need to zoom in ...). In essence, it would likely be the future direction, thanks!  

However, there could be more work to do. For example, I do not know how display the button text in a color other than white.

Yesterday, I've completed the functionality in a somewhat hard way and it is now complete - will post it on the Playground next week. Because it is a (full functioning) prototype, I will stop improving it for a time being and will first check with the users am I on the right track all together. If it all goes fine, I would look for a BABYLON developer to write the functionality in a more professional way. I have programmed neatly, but my knowledge of javascript, WebGL and BABYLON.JS is by far insufficient to make a good product.

 

 

[Wingnut]

Hi guys!

Oh, simpleButton.color is broken, it seems.

https://www.babylonjs-playground.com/#ZI9AK7#116

No yellow text.

Red text is working HERE, but this is a textBlock and not a simpleButton.

I'll get fresh coffee and start investigating it, even though it takes me hours to discover... what others discover in minutes.

Possible BJS BugZapper award coming for Borjan... and that means a WOOT PARTY!  Stay tuned.

[SvenFrankson]

10 minutes ago, Wingnut said:

Hi guys!

Oh, simpleButton.color is broken, it seems.

https://www.babylonjs-playground.com/#ZI9AK7#116

No yellow text.

A workaround for the yellow text : https://www.babylonjs-playground.com/#ZI9AK7#117

[Wingnut]

hahaha... very good... sneakin' in deeper and pokin' from the back-side (line 43).     (that sounds disgusting, somehow). 

Good mad-scientist work, there, SF.

[GameMonetize]

And it was a.........................................bug!!

Fixed now

[Wingnut]

WOOT PARTY for BugZapper Borjan!  Yay!  And thanks DK!  Alright!

And and and... now that we're familiar with that code... wouldn't it be cool if GUI.anytext.color could be an array of strings?  {"red", "green", "blue"}

(The .ts coders really LOVE type = ANY) 

And... if the textWrap is true, and we create lots of ._lines of text (let's pretend 20 _lines of text with a textBlock, or with a wordy textWrapping simpleButton.)...

...it would sequence thru that color "strip" array, each  _line displayed in a different color!  WOW!  (and loop-back to start-of array if/when index > .color.length)

And then... what if...  ahh nevermind... we won't think about character-by-character rainbow text, yet. 

But then... if we had char-by-char fontSize and fontFamily... then we could do ransom notes. 

Let's not go there.  heh.  But _line by _line fontSize and fontFamily sequences... could be fun.  Just make .fontSize and .fontFamily accept arrays, too.  And then write a half ton of angry code.... to deal-with these new features.    Easy.  (ahem)

I heard a rumor... that it is difficult to get an accurate context2d.measureText()... without first setting a fontSize and fontFamily.  Could be trouble for our dreamed-of features.