How to display very simple updatable text that is always in the corner of you screen

[Satiana]

HEY!

Guyz, this is so very confusing to me. All i want is to display a single string in one of the corners of the screen. With it i would display my score. So basicly what i would like to display is something like:

var textToDisplay = "Score: " + gameScore;

All the answers that i found (been working on this for few hours) were very confusing and basicly useless. I did find dynamicTexture.drawText and got it to work, but it had a few problems:

-the text moved with camera (didnt stay in the corner), im guessing it has something to do with the renderingPlane.

-the text didnt rewrite all the time so "Score: " is writen OK but the numbers just get writen atop of eachother, and after picking up the 1st coin its just a mess.

Could you give me some pointers on how to solve this problem?

Thank you very much!

Satiana

[jpdev]

If you stay with the dynamic texture, you have to clear it before writing new text on it.

Here is an example:

http://www.babylonjs-playground.com/#1FL8ZL#2

note: this clear is only needed, if your text does not have a color as a background.

But now you have the score on a texture - and you still can't easily place it to be at a fixed position on the screen.

I am using babylonJS2dCanvas for this, have a quick look here how it can look ingame: http://yavsadventskalender.de/fly/

This is done this way:

https://doc.babylonjs.com/tutorials/Using_the_Canvas2D

Example with score:

http://babylonjs-playground.com/#2AVSFH#126

Edit: Here is another example, with no background and placed top right on the screen: http://babylonjs-playground.com/#2AVSFH#127

be aware, that you need to include the canvas2d js file from the babylon dist directory.

Note: the undefined check in my score example is only because I call the function before the scene is really ready. (because of the simple setTimeout stuff, if you do it in the render loop when everything is setup, the undefined check is not needed.)

[Adem]

@jpdevexactly what i needed for my game

[Satiana]

@jpdev ur  a f*** GOD!

Thank you sooooo much, suck a simple and functional solution!

I cant thank you enough, I LOVE YOU

[Satiana]

Btw does anyone know how to change the color of the text? i tried fill and color and nothing works. my code looks like this:

var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
            id: "ScreenCanvas",
            children: [
                new BABYLON.Text2D("x", {
                    id: "text",
                    marginAlignment: "h: right, v:top",
                    marginRight: 40, marginTop: 40,
                    fontName: "20pt Arial",
                    color: "black",
                })
            ]
        });

Thank you so much guyz! You are amazing

[Dad72]

Did you try this for color?

color: BABYLON.Color3.Black(),

or 

color: new BABYLON.Color3(0, 0, 0),

In Babylon it works like this, can also be in canvas2D

[Satiana]

Yeah i did, but it doesnt work. Im guessing that BABYLON.Text2d("x", {**THIS HERE**}) is not a part of actual babylon...it looks more like a css class or something...

Not sure what to do

[Dad72]

Try:

fill: "black"

Fill instead of color

I believe that children[] do not have color or fill property, but, this can be like this:

var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
            id: "ScreenCanvas",
            fill: "black",
            children: [
                new BABYLON.Text2D("x", {
                    id: "text",
                    marginAlignment: "h: right, v:top",
                    marginRight: 40, marginTop: 40,
                    fontName: "20pt Arial",                   
                })
            ]
        });

 

[lihis]

@Satiana Hey.

http://doc.babylonjs.com/classes/2.4/Text2D from here you can see on that list that Text2D has something called defaultColor. In the parameters box you can also see the expected input for defaultColor is Color4.

So i believe this should work:

defaultFontColor: new BABYLON.Color4(1, 0, 0, 1); //red

 

Edit: Oh wait it actually says defaultColor in the first list and on the parameters it says defaultFontColor. Don't know what that's about. But i think defaultFontColor is the one you want to use.

[jpdev]

yep, defaultFontColor is the way to go: 

Color changing text playground:

http://babylonjs-playground.com/#2AVSFH#129