[Solved] Runtime string floating above entity

Help & Support
1

Hi,

I need to show runtime strings above an entity; achieved points, a timer, health percentage etc., like below:

When the entity rotates, the info should also rotate, so I can’t just use 2D texts. I could use a 3D quad with the right texture, but since I don’t have all the possible textures, I would have to draw the runtime string onto frame buffer texture and then use it to draw the quad in world space. How can this be done with playcanvas? And more important, is there a better/easier solution?

Thanks & best regards,
Dumi.

2

I would probably draw the data into a 2D canvas and then use the canvas as the texture source.

3

In tanx I’ve created <div> element with name and on update positioning it above tank, which is empty entity, something like:

camera.worldToScreen(emptyEntity.getPosition(), vecName);
div.style.left = Math.floor(vecName.x) + 'px';
div.style.top = Math.floor(vecName.y) + 'px';

That way text is sharp and nice. And no problems with textures, sizing entities, etc. It is easier this way too.

1 Like
4

Can you shed more light on this? I’m still a PlayCanvas newbie :wink:

Thanks,
Dumi.

5

tanx is really addictive, I spent too much time playing :wink:

The way you are doing it is nice and easy, but for me is important to have the text rotating with the entity.

Best regards,
Dumi.

6

If you want to make text rotating, then yes, you will have to use the way Dave suggested, which is a bit too complicated.

Basically you will have to create <canvas> element and then get 2d context from it, then set font and measure text you want to print, then scale that canvas to that resolution, and then draw text. Then you can use that canvas element as a buffer to set to texture that is used on name billboard on top of player.
To work with canvas2d and text, check out here: http://www.html5canvastutorials.com/tutorials/html5-canvas-text-font-size/

As said before - this is too complicated for newbies, so I recommend to stick to suggested simple scenario with floating div on top.

7

Will Eastcott shared the perfect example - https://playcanvas.com/project/362231/overview/tutorial-canvas-text

Thanks,
Dumi.