How to color gradient a sprite?

[largePek]

Hey guys,

Is there any way to set a gradient color on a sprite instead of a single solid color? Let's say I have a circle-ish white sprite that I want to color from blue to green. How would I go about this?

Thank you in advance.

[unikronsoftware]

You can't at the moment. You could take the sprite class and modify it so you get a gradient, but its going to be trickier than the text meshes - sprites might not be rectangular...

[largePek]

Yes, I understand this will be trickier. We are trying to cut down our atlases so it will be worth it... I think. Could you maybe give me some pointers on what I should do? Anything that gets me closer to this would be great.

Thank you.

[unikronsoftware]

In tk2dSprite.UpdateColorsImpl,
instead of simply setting the one color, work out the gradient color. Lets say you have 4 gradient colors for each of the 4 points in the sprite...

Pseudocode, but I'm sure you can figure it out.

Code: [Select]

bounds = GetUntrimmedBounds();

foreach i:
    point = meshVertices[i];
    float x = (point.x - bounds.min.x) / bounds.size.x;
    float y = (point.y - bounds.min.y) / bounds.size.y;
    Color cx0 = Color.Lerp(colorBottomLeft, colorBottomRight, x);
    Color cx1 = Color.Lerp(colorTopLeft, colorTopRight, x);
    meshColors[i] = Color.Lerp( cx0, cx1, y );
   

[largePek]

Oh, I see. I thought this would require me writing a new shader. That seems easier! Thanks, I'll come back with my results later today.

[largePek]

OK, so I found a way to have 4 color gradients. Basically, I set the sprite's Render Mesh to diced and then divide it according to how many colors I want. I also tried with a custom mesh, but the edges that are created are not what a want. Anyway, kinda hacky and hard-coded, but it works.

The next problem is doing this in a clipped sprite. When I create a clipped sprite from a diced image, I get no mesh in the scene... Do you know how can I solve this?

The whole mesh thing is because I want to make a gradient with 4 colors from top to bottom. Basically, I want to make the sprite on the left, look like the sprite on the right:


And the reason why I want this clipped, is because I animate the sprite as follows:


Am I on the right track by creating meshes that have multiple vertices so I can color them as a want? What about the clipping?

Thanks in advance.

[largePek]

OK, I know why the dicing doesn't work with clipped sprite. It's because each piece of the diced sprite can be placed anywhere in the atlas so clipping makes it extremely difficult. I get that. So, is there a way to do 4 color gradient in a clipped sprite given that I only have 4 vertices?

[unikronsoftware]

Yes, but you will have to tesselate it.
Alternatively, you can use a second texture
i.e. generate UVs for a second texture read, and this texture simply has the "gradient".
This is how the gradient feature in the text meshes work.

For a clipped sprite, you just have to work out where the gradient point ends up with the UVs. It is pretty much the same as how the other uvs are cliped, just this one goes from 0..1