How to insert a newline in a babylon JS dynamic texture using drawtext?

[rapgame]

So I have something like this demo:

http://jeromeetienne.github.io/threex.dynamictexture/examples/basic.html

Source: https://github.com/jeromeetienne/threex.dynamictexture/blob/master/examples/basic.html

A box with the time printed on each surface. It was Build with THREEX using the dynamictexture drawtext sub from Babylon JS (if I'm correct).

I want to extent this text with additional lines, e.g.:

 

Time: (newline)

12 o'clock.

 

Does anyone know how to extent an input string with a newline? (Also because my string could be up to 30 characters or more in length).

I tried:

text = text.replace(/(?:\r\n|\r|\n)|\s/g, '<br>');

But html like <br> tag does not do the job, same counts for other newline metacharacters.

Below we can see the string is not completely on the surface, just broken down and discontinues to nothing.

i.stack.imgur.com/aXnGp.png

Any suggestions? Thanks.

[RaananW]

Since babylon dynamic texture is using an html canvas to draw the text, maybe you should try finding a way to create a new line on a regular html canvas.

A quick search came up with this - http://stackoverflow.com/questions/5026961/html5-canvas-ctx-filltext-wont-do-line-breaks 

it seems like the canvas doesn't support it. but there are people trying to find ways of doing that... Maybe there is a current project that actually succeeds.

hope this helps

[Wingnut]

Hi rapgame, welcome to the forum.

 

Take a quick look at http://www.html5gamedevs.com/topic/10823-need-help-with-design-of-a-graphical-user-interface/?p=63433  ... it introduces the canvasRenderingContext2D object and how to get a reference to the one being used on your dynamicTexture.

 

That object... that canvasRenderingContext2D... is one powerful pig.  It has measuring functions on-board that can help you build your own word-wrapper.  Currently, I'm quite sure that Babylon's .drawText has no facility for wrapping or inserting newLines.  You'll need to build a wordwrapper of your own.

 

But, if you made a really nice .drawParagraph() function... you could become a Babylon hero... cuz we all want a copy of THAT. 

 

Let's pretend that your text is going onto a plane.  You can attach the plane to the side of a box later, if you wish.  Your new Babylon.drawParagragh() function would first get a reference to canvasRenderingContext2D, and use its text measuring funcs to determine how many drawText lines it will take (per the chosen plane width) to display the entire paragraph.

 

And then you need to use some regexp/match crap to break the paragraph into pieces, breaking at hyphens and spaces that happen < allowed line length (determined via canvasRenderingContext2D's measuring functions).

 

Once you know how many lines are needed (and have broken-up the text correctly), you either create a plane correctly sized/scaled for all the needed drawText() lines, or make each line on a plane of its own, and then stack the planes to make it look like a single "paragraph plane". 

 

Then you would issue drawText() line after line onto the plane, moving the "startAt" numbers as you go down.

 

(Or, if using the one-line-per-plane method....  make single-line plane after plane each with dynamicTexture, drawText() its line onto it, and then stack all the line-planes... to fake a single paragraph plane)

 

Yeah, we could definitely use a drawParagraph() function as a companion to our drawText().  That would be very handy.  Once you learn to drive the powerful canvasRenderingContext2D object, you have all the tools you need to build drawParagraph().  Or maybe invent the BABYLON.TextManager!  You would be a hero!  We would throw a parade. 

 

Likely, smarter people than I... will have some better ideas than this. So, stay tuned for more comments. 

[Wingnut]

Hey rapgame, you still around?  I started a little experimenting (and code-stealing) on something similar to drawParagraph().

 

http://www.html5gamedevs.com/topic/2571-the-wingnut-chronicles/?p=65722  It's not exactly what you were looking-for, but maybe it will help you build what you need.  Be well.