- Home /
Creating jittery sprites motion with shaders?
Hey, I'm trying to achieve a similar effect to the one in this video: https://youtu.be/1MKpqUeek70
Getting my sprites to "wiggle", and look like a handmade animation using a noise map. I'm assuming it can be achieved with shaders.
The only guides i'm finding are for using "height maps" to distort 3d models- and that's not what I need. I'm looking for 2d sprite (pixel) displacement.
Answer by swanijam · Nov 07, 2018 at 03:19 PM
I think the best way to do this for sprites would be to jitter the uv position of each pixel instead of jittering the vertices. If you're using a vert/frag shader:
fixed4 frag (v2f i) : SV_Target
{
// sample noise texture red and green as x and y offsets,
// scrolling the noise texture over time.
fixed2 xyOffset = tex2D(_NoiseTexture, i.uv + float2(_Time.x, _Time.x)).rg;
// sample the sprite texture at the new offset that changes over time.
fixed4 color = tex2D(_MainTex, i.uv + xyOffset);
return col;
}
EDIT: the video uses a particular kind of noise in that's in grayscale, and you might as well use that. You can mix different motion into the red channel and the green channel if you made your own texture, but if you're using a grayscale texture, tex2D(...).rg is the same as tex2D(...).rr or .gg. So, if you can grab the noise from the video, don't worry about making separate red and green channels.
The effect will depend a lot on the noise texture you use. You'll have to a experiment a bit to get the same type of jitter as the example video.
Your answer
Follow this Question
Related Questions
Grabpass 2D water reflection, UV issue 0 Answers
"Fade" objects far from camera 1 Answer
Alpha masks on sprites? 0 Answers