Tracing Path for particle using an image

alia_but

Hi ,


I am looking for some starting tips and ideas how i can accomplish this .


First of all i have this slized UI image sprite who's height and width might change according to text

 

its a transparent image with white rectangle

the above image is more like a path for my particle/shader effect to follow .

is it possible to extract a path using above image and make an image or Vfx particle to follow this path ?

i am trying to accomplish this effect in the end

https://gfycat.com/nimbletalkativegermanspaniel


i want to achive this using shader forge. some starting tips and hints will help a lot

this will be the end result

Obscura

You don't need particles for this. Just make an extra texture that shows a linear gradient going along the line. Starting at some point of the line as black color, and transitions towards white as it goes along the line. Then a simple shader trick can be used to achieve the desired effect. Once you have the gradient texture, I can show you the shader setup.

alia_but

Gradient attahed above . i really want to do it by my self . i understand very basics of shader forge and i want to take this opertunity to  learn more and advance my skills in it . step by step process in text how it can be achived would be nice instead of actual shader code/graphs  .thank you for taking time to look into it .

Obscura

The gradient should go like this and should be grayscale. Coloring it to your chosen color will be the next step.

alia_but

Hi @Obscura 

i understand that gradient ned to follow this path . i tried using panner node to move UV but it did'nt made sense . i tried to create flow map using this image but it also didnt made sense what was happening . 

what node can be used to make gradient follow this path ?

or are you asking me to make a rectangular gradient ? if this is true will it be continues loop ?

Obscura

alia_but said:

or are you asking me to make a rectangular gradient ? if this is true will it be continues loop ?

Yes, it should be a rectangular gradient. and if the values in the gradient goes exactly from zero to one, it will be looping.

Obscura

I can make you an example later today if you want. Currently I'm at work.

alia_but

@Obscura is this how you're saying ?

Obscura

Yes. Just remove the rounding from the end, and make it grayscale. Then this can be the input of the shader. A little bit of math will be needed to make it filling only the half of the path (as on your example), and to make it moving along the line. I can write down the steps of the shading once I get home.

alia_but

@Obscura  thanks i will wait for those steps

Obscura

Here you go:


I had several problems though, first off all I'm unable to download any of your images so I just used the snipping tool from windows to capture them. Second, a big portion of the grayscale gradient is pure black so there it a little jump in the beginning of the panning. It also isn't linear at all so panning speed varies. The grayscale gradient was supposed to be used as coordinates and when we subtract time from it, it acts pretty much like a panner node but in 1d in this case. Then this is hooked up to the colored gradient.  So in short, we are doing gradient mapping here.

Edit - dont mind the cut of the gif.

alia_but

@Obscura thank you for this .i will convert that into unity and will let you know how did it go . thanks

alia_but

@Obscura i manged to create this in unity . becasue i had original image with alha i didnt do your hack extract alpha  .

Now issue is there is too much cutting of the line not sure due to bad gradiant file ?

Also line move very fast on the corners . what do you think can be do to have uniform speed for the line to move around the edges ?

RN

alia_but said:

this slized UI image sprite who's height and width might change according to text

If this animated border can change in size (it might be animated, or it might appear on different occasions framing different pieces of text), then I would consider using procedural geometry -- a mesh that's created in programming.

If you think of each round corner as a quarter-circle, all corners have the same geometry (they just rotate at 90º steps).

- Through code, you can create a full circle mesh, and then create another one with a bigger or smaller radius so you have the two circular rims of a thick border, then connect the appropriate vertices to each other.
- Then duplicate the two vertices at the edge of each quadrant: 0º, 90º, 180º and 270º. This will make the "straight lines" of the box, that join the round corners.
- All the geometry is made with quads, so you can give them UV coordinates that map them horizontally, so you can use a U-panning texture that will slide along the whole border.

Something like this, but not quite:
https://gist.github.com/olegknyazev/50dbe786ba14ec1a71af801856acaf7e

alia_but

Hi @RN 

reason i am trying to achivethat by shader is becasue i will have to apply same kind of thing on weired shaped also like below

RN

14 posts into your thread and only now you decide to say, "well I need it to work with arbitrary shapes too, not just a rounded rectangle"?

Next time lead with that.

Try using the LineRenderer class in Unity, you can make quad-strip meshes out of sequences of points. The points can form any shape you want, like a rounded rectangle, that speech-bubble or even a spiral.

https://docs.unity3d.com/Manual/class-LineRenderer.html

It can be textured with that scrolling gradient (or you can setup the gradient directly in the editor, natively), and you can control the position of the points so the shape can fit different pieces of text.