Drawing a long, curved animated line

Godot Version



In some games the path is represented as a line and sometimes that line has an animation such as arrows or dashes moving in the direction of the path (static example attached). The line can bend and the moving elements are unbroken/stay in sync. i’m trying to figure out how to do that in a 2D game.

You can just attach this shader to a Line2D with a shader material and put any texture you want in the fill section (while setting texture mode to tile).

shader_type canvas_item;

uniform float speed = 1.0;

void fragment() {
	vec2 new_UV = mod(UV - vec2(TIME * speed,0), 1);
	COLOR = texture(TEXTURE, new_UV);

I use this texture to test :

1 Like

Cool. i had to google Line2D and shader but i figured it out:

  1. Add Line2D node to scene, draw points.
  2. Go to Inspector → Line2D → Fill → Texture and set that.
  3. Same section, set Texture Mode to Tile.
  4. CanvasItem → Material=Shader, add your magic script.

And now it works! i didn’t realize lines had textures - i was modifying the shader with a sampler2D that didn’t work.

i now have a working, moving line. The line image seems really small. i doubled it from 30x30 to 60x60 and the size looks exactly the same. And if you resize the screen it doesn’t scale/move. Guess i need to learn more about Line2D. But this problem about animated lines is solved. Thank you!