[Unity] How to create a "UV sprite deformer" - Shader source code

Shader "Unlit/DeformerShader" { Properties { _MainTex ("Texture", 2D) = "white" {} _DeformerTex ("Deformer", 2D) = "Grey" {} _MaskTex ("Deformer Mask", 2D) = "White"{} _Intensity ("Deformer Intensity", Range(-1, 1)) = 0 _Speed ("Deformer Speed", Range(-5, 5)) = 1 } SubShader { Tags { "RenderType"="Transparent" "Queue" = "Transparent"} LOD 100 Blend One OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag // make fog work #pragma multi_compile_fog #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; float2 uvDeformer : TEXCOORD1; }; struct v2f { float2 uv : TEXCOORD0; float2 uvDeformer : TEXCOORD1; UNITY_FOG_COORDS(1) float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; sampler2D _DeformerTex; float4 _DeformerTex_ST; sampler2D _MaskTex; float _Intensity; float _Speed; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); o.uvDeformer = v.uvDeformer; UNITY_TRANSFER_FOG(o,o.vertex); return o; } fixed4 frag (v2f i) : SV_Target { float2 uvDeformer = i.uvDeformer * _DeformerTex_ST.xy; float2 deformer = tex2D(_DeformerTex, uvDeformer + _Time *_Speed); float2 uvOffset = deformer * _Intensity * 0.5; fixed4 mask = tex2D(_MaskTex, i.uv); fixed4 col = tex2D(_MainTex, i.uv + uvOffset * mask.r); UNITY_APPLY_FOG(i.fogCoord, col); return col * col.a; } ENDCG } } }
Hi, fellow Game Devs!

Here is the shader source code of our tutorial on how to create a UV deformer shader in Unity.
https://www.youtube.com/watch?v=qdlJC_6KCxo

More tutorials: -> https://www.youtube.com/watch?v=oCpU2fY7eoU&list=PLeiu_PPaq_Ugs97Dg51kjKYZbYxxuKCeg&index=2 <-

Feel free to give us your feedback to help us improve the upcoming tuts.

2 Responses

Hi! I've tried using this shader (which is very very cool btw!) but I'm getting mixed results. For example - the deformation doesn't appear to be a continuous loop as it is in the linked video, but rather stops and starts.

Are there any other details that may not have been included in the tutorial that might be causing issues? A couple of things that come to mind - what size should the deformer texture be, and is it white on black, or black with a transparent centre? Also, should the sprite which I'm deforming be set to clamp, repeat, something else?

Any advice would be appreciated!
@ChaosResolution Ah yes, we forgot to include a few things in the video. The deformer texture wrap mode has to be set to "Repeat" ! The size doesn't matter, and it's black & white (not mandatory, but you can set it to greyscale mode in Photoshop)

Cheers

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.