How to create rendering lines

Hello,

I am trying to create a specific lines under a text like the following screenshot :
Capture d’écran 2021-08-25 162142

The best for me should be a Line Renderer like Unity but i did not see anything looking close to this. So it’s why i’m asking for your help.

If you know the perfect way to do this, that would be great.
Thanks in advance !

Hi @Akadream and welcome,

There is a simple API in the pc.Application class that you can use, though that is mostly meant for debugging. It allows you to set the line color and active layer, but you don’t have control over line width for example:

https://developer.playcanvas.com/en/api/pc.Application.html#renderLine

For a more elaborate effect you should use the Mesh API that allows you to create meshes on the fly. Though that way you need to know how to work with vertices and indices and that can be advanced:

https://playcanvas.github.io/#/graphics/mesh-generation

1 Like

When I had to do something similar, I used two sliced sprites and tweened their height and width separately to animate them being drawn. The final result was like this:

image

4 Likes

That’s looking so great !
I had the idea of using two sprites, but i feel that it’s not a clean solution

I’ll try the first solution for the moment to see if i can have the result i need. Thanks !

1 Like