Jump to content

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


Satiana
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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",                   
                })
            ]
        });

 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...