Jump to content

Rendering text using dynamic texture.drawText


Recommended Posts

I'm not sure what the "x" and "y" are even doing here, or what they are relative to. In a bunch of the examples, there is a Y value of 512 or so. If I set that Y value, my text magically shows up. If I change it to like 200, it disappears. Also, I can't even see my text unless I set a font size of > 900px. It seems like render text has no concept of the position of the dynamic textured it's being rendered on?

I have a plane, which has a StandardMaterial with a dynamicTexture attached, and I am trying to render text onto that texture, relative to the planes position.

It seems like X and Y might be relative to the canvas? But if that is the case, what is the point of drawing the text on the dynamic texture? (I am building a card game, and the cards have attribute values, I am trying to render the text relative to the cards posiiton).

My questions are:

1. Is there a better way of rendering text onto my plane (which moves around the scene, and I would like to keep the text attached to the plane as it moves around)?

2. What are the X and Y  of dynamic texture .drawText relative to?




Link to comment
Share on other sites

Update: can't be relative to the canvas because multiple cards are all rendering the plane/text in the same relative position. Screenshot might help (cards are placeholder images, the red on top is the plane with the dynamic texture/text being rendered). I am rendering the text with dynamicTexture.babylon.drawText("9", 0, 512, "bold 500px veranda") below. Maybe the issue is somehow related to the ginormous font size value I am having to use?

Screenshot 2016-12-29 14.55.02.png


Link to comment
Share on other sites

Hi thrice,

here is a little playground to show and try things out: http://www.babylonjs-playground.com/#9U086#111

As you can see in this example the coordinates seem to be relative to the upper left corner. I added 10 on the X-axis to get a little margin, and 70 (font size) + 10 to get the same margin on top.

Maybe you can create a playground that illustrates your problem so we can try to solve it together. Maybe your texture is just rotated differently. That 512 offset could be related to the texture size, in my example it is set on line 12.

About the "is there a better way": Did you already check out the Canvas2D (https://doc.babylonjs.com/tutorials/Using_the_Canvas2D) feature? I haven't used it too much yet since it's kinda new, but maybe it has what you need. This looks promising: http://babylonjs-playground.com/#1BKDEO#22

Link to comment
Share on other sites

  • 3 weeks later...

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.

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.


  • Recently Browsing   0 members

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