Text on a ground

Hi everyone,

I’m trying to put some text on my ground like in the images. In the playground I visualised the grey path like in the picture, now I want to put the numbers on the path. But how I wanted to do it doesn’t work. Can somebody help me with putting the numbers on the ground(path)

path = middenpad;
BMiddenpad = width of the middenpad
LengteRechts = lengt of the middenpad

https://playground.babylonjs.com/#5JM6VQ

1 Like

This is because you were drawing white on white https://playground.babylonjs.com/#5JM6VQ#2

@msDestiny14 and the gui editor might help with your layout.

1 Like

But how can I get the number like the image. Turning 90 degrees and normal format?

https://playground.babylonjs.com/#5JM6VQ#3

1 Like

You either need to change your UV setup on the mesh you use, create it on the other angle and rotate 90 degree :slight_smile:

Or you use the babylon gui to position from the editor.

1 Like

I don’t understand. Sorry I’m a beginner of babylonjs and the documentation of babylonjs is not very extensive. Can you maybe give me a small example?

1 Like

@msDestiny14 will be able to provide gui editor samples soon :slight_smile:

1 Like

Good morning!

If you’re a beginner of Babylon I highly recommend checking out our new tool the GUI Editor (releasing in alpha today!) :smiley: The GUI Editor | Babylon.js Documentation

This will allow you to create the layout you are interested in an preview it with no coding experience required.

I will whip up an example for you in the editor but thought I’d show it to you as well as a pointer in the right direction. Once you are happy with a GUI you create you can save it to the snippet server and then load it onto your ground path.

It will look something like this:

let guiTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh("mesh to project onto", groundSizeX, groundSizeX);
await guiTexture.parseFromSnippetAsync("your_snippet_url_no_#");
1 Like

Sorry to hear that the documentation does not cover the features you were looking for. Please list the things you were looking for that you did not find in Dynamic Textures | Babylon.js Documentation

2 Likes

Hey there, here’s an updated example for your playground to make it more like the picture. Note, I swapped all the x and y values and all of the width and height values to make things a little easier.

https://playground.babylonjs.com/#5JM6VQ#4

1 Like

But how can I turn the numbers with for example 90 degrees?

I thought you wanted it like the picture? Otherwise I’m confused about what it should look like :thinking:

At first I wanted like the picture but I want a button to turn around the numbers by 90 degrees. Is there a property or anything else that can do that?

1 Like


like this

1 Like

Ooh, okay, I get you now, but I don’t think there’s any properties that would make that kind of transformation on the texture - because it’s not the texture that’s rotating, it’s the individual parts of the texture where each number is that would rotate.

I think it would be easier to make that texture with the rotated text with an image editor or with the new GUI editor that lets you position and rotate the text how you want :slightly_smiling_face:

1 Like

@JoepDerix have you had a chance to look into the GUI editor? :slight_smile: