Dynamic polygonal lines with animation

Questions
#1

Hi there. Kind of new to defold, but I’m a programmer so learning quite fast. This is what I need, and I’m not what’s the best way to approach it:
1/ My input is three coordinates (relative to where I am, or absolute, it does not really matter).
2/ I want to draw a polygonal line of arbitrary width going through all the points. I want to be able to texture the whole line but if I could use something like the splice provided by gui elements that would be nice too.
3/ I want to be able to animate this line going from its origin to its end point.

A few solutions come to mind:
1/ Create GUI line segments for each section, and properly assemble them. I’m guessing I could in some way use clipping to animate them.
2/ Create GO line segments for each section, assemble them. In this case I’m not really sure how to handle the texture. But I can use a factory to spawn my segments. Animate with clipping also I guess, not sure how that would work for diagonal lines.
3/ Spawn a lot of very small sprites that constitute the line, that way I just animate the spawning. I just need to animate this creation once. Each small sprite is textured, and I can spawn different start and end bits by implementing the logic in the factory Game Object.

what would be the best approach?
thanks

#2

Hi @kevin.sallee!

One more thing I can think of is using a shader to draw the line (curve?)
Shadertoy holds many examples, here is one

In Defold, you can currently set only a few shader constants (4, with 4 floats each), but that should be enough for your purpose of sending a few coordinates. All that’s needed is a sprite that is rotated, and sized to span the area which contains the lines.

Here is one post which mentions this a little, and here is an example that demonstrates a very similar approach.

3 Likes
#3

Hey @Mathias_Westerdahl ! Thanks for that! Shadertoy is completely esoteric to me but hey, it’s a good lead.
For the example, I started looking at it, not sure how that plays with textures, but I’ll have a go at it.

thanks

#4

Hey @Mathias_Westerdahl finally got some time to test your example, and it’s great! I managed to have an angle variable to set diagonal lines easily, managed to animate easily and quit the update when finished drawing, everything works perfect!

Only thing remaining is how could I just repeat the texture instead of stretching it? I’m not sure where to start looking.

PD: I still have some cleaning up to do and finish the logic, but I’ll post a full example somewhere of an animated polyline with cotrols for speed and where you can easily setup your points :slight_smile:

8 Likes
#5

Great to hear! :slight_smile:

As for the strecthing part, perhaps you could post a screen shot to perhaps make it clearer on what you have now? E.g. is it a line only, or is it in fact a curve?

#6

You’re right, all this deserves an explanation.

I used your script box.vp as is, but I experimented with box.script.
I won’t go into detail in the animation part.

For the polyline part I wrote a module based on this example that given a set of coordinates, will create line segments using box.script and what you defined (p1p2, p3p4, center).

For the moment I can animate a segment, I’ll probably use a factory and a script to create polylines and deal with the logic of animating the next segment when the first one is finished.

The problem is that giving coordinates so big to a very very small image (in other game software I always find a way of setting the UVs to repeat in some way, and use a 10*5 px image for example) makes it stretchy looking. I can probably work around that but there could be a solution. I put an extreme example of a texture badly designed for repeat but just to show that the texture stretches a lot.

lines_example.png1111×693 38 KB

Of course if I only play with the bottom and top border and I don’t mess with the end of the texture it works better, so I might go with that. These examples are extreme and I have just worked on p2 p3 I just spawned two lines quickly to show you. Mine are normally way thinner, this was just to make a point.

lines_example_2.jpg1114×631 56.9 KB

thanks a lot

1 Like
#7

Hi @Mathias_Westerdahl just to let you know that I’m making good progress and I will soon post an example on github for handling animated polylines. Still have the texture issue but maybe with the code available it will be easier to solve?
anyway, this is the latest screenshot (this time I modularized my polyline functions, created a proper polyline game object script that creates individual segments using a factory)

polyline.jpg859×516 23 KB

More on this soonish.

4 Likes
#8

Hi @Mathias_Westerdahl! Or anyone that is reading this actually! I Finally managed to get some code out there, it’s a bit rough around the edges, and I’d guess that some of my Lua would not win a contest of best practices, which is why I’m putting it out there. That way, if you find it useful, that’s already pretty cool, and if you want to improve it, I would be delighted!

8 Likes
#9

Cool, thank you for sharing!

One thing I noticed when I browsed the code was that you didn’t use local functions. Everything is global which means that you’re polluting the global namespace with the polyline functionality. It can result in unwanted side effects and it’s considered bad form to use global functions unless absolutely necessary. Try to prefix the functions with the local keyword and pay attention to the order in which they are declared and also what you return from the polyline Lua module.

3 Likes
#10

Thanks @britzl
On my main project I did not forget this but for this one I started with functions that were already there so I guess I forgot to make my functions local.
For the lua shared module though, if I only want to define functions and not really return anything, which is the proper way of doing this? should I declare those as local too, and when I require my module they will only be added to the local scope? I will fix the other scripts tonight after work.

thanks

1 Like
#11

If you do not wish to return anything from the Lua module then your only choice is to make the functions global. The standard way of working with Lua modules is to return a module table containing the public functions and variables of the module.

3 Likes
#12

Hi man, so, I saw this post long ago, but I got too involved on my project and I forgot to come here and thank, you! I also had to work with lines on my project and I had no idea of what to do. Searching through the forum I found this post and looking through your code I could finally adapt it for what I needed. So, thank you!

2 Likes
#13

Cool ! Our internal version has changed a bit since but I’m glad you were able to use the code as a building block :slight_smile:

3 Likes