Some games like scribbl.io have a cute sprite ‘wobble’ effect, with a two-frame animation. In this tutorial, we will implement that same effect in Shader Graph!

Bytesize Gamedev is a series of shorter game development tutorials.

Hang out with me and other shader enthusiasts over on Discord and share what you’re working on! And check out this tutorial over on YouTube:

Sprite Wobble

Start by creating a new Sprite Unlit graph via Create -> Shader -> 2D Renderer -> Sprite Unlit Graph (Experimental) - on newer Unity versions, this is Create -> Shader -> Universal Render Pipeline -> Sprite Unlit Graph.

Gotta start somewhere.

We’ll create four properties: Main Texture, a regular Texture2D; Flow Map, another Texture2D; Strength, a Vector1/Float with a default of 0.005; and Speed, another Vector1/Float with a default of 4.

A few basic properties is all we need!

Then we need a clock. I’m going to make mine use 4 frames of animation. Take a Time node’s Time output, Multiply it by Speed, and then Modulo the result by 4. Floor that, then Divide by 4.

This clock’s better than TikTok.

That’s going to become a UV offset. Funnel the clock result into a Tiling And Offset node’s Offset pin, with the UV0 channel in the UV input.

This only works if your flow map is set to repeat!

Connect the modified UVs to the UV input of a Normal From Texture node, with the Flow Map in its Texture slot. This will generate offset vectors for the ‘wobble’. Multiply by Strength.

You could alternatively use Strength in the Normal From Texture’s input.

Add these offset vectors to a UV node, then use the result in the UV field on a Sample Texture 2D node. That node will be sampling the Main Texture. Then we can output its result to the Color field on the Master node, and we’re done!

Ignore the weird preview on Sample Texture 2D - it ignores alpha for some reason.

Thanks for reading Bytesize Gamedev, where I bring you short game development tips in an easy to digest format!

Acknowledgements

Supporters

Support me on Patreon or buy me a coffee on Ko-fi for PDF versions of each article and to access certain articles early! Some tiers also get early access to my YouTube videos or even copies of my asset packs!

Special thanks to my Patreon backers for June 2021!

Gemma Louise Ilett
JP
Jack Dixon $\cdot$ Paul Froggatt $\cdot$ Sébastien Perouffe
Chris Sims $\cdot$ FonzoUA $\cdot$ Moishi Rand $\cdot$ Shaun Wall
Anna Voronova $\cdot$ Christopher Pereira $\cdot$ Harshad $\cdot$ James Poole $\cdot$ Lee Miller $\cdot$ Ming Lei $\cdot$ sadizeng $\cdot$ Zachary Alstadt

And a shout-out to my top Ko-fi supporters!

Hung Hoang $\cdot$ Arthur H $\cdot$ Megan Taylor $\cdot$ Takuya $\cdot$ “Somebody”