Unity Shader實現序列幀動畫效果

2020-01-24 00:09:21

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了Unity Shader序列幀動畫效果的具體代碼，供大家參考，具體內容如下

實現原理

主要的思想是設置顯示UV紋理的大小，并逐幀修改圖片的UV坐標。（可分為以下四步）

1、我們首先把 _Time.y 和速度屬性_Speed 相乘來得到模擬的時間，并使用CG 的floor 函數對結果值取整來得到整數時間time

2、然后，我們使用time 除以_HorizontalAmount 的結果值的商來作為當前對應的行索引，除法結果的余數則是列索引。

3、接下來，我們需要使用行列索引值來構建真正的采樣坐標。由于序列幀圖像包含了許多關鍵幀圖像，這意味著采樣坐標需要映射到每個關鍵幀圖像的坐標范圍內。我們可以首先把原紋理坐標i.uv 按行數和列數進行等分，得到每個子圖像的紋理坐標范圍。

4、然后，我們需要使用當前的行列數對上面的結果進行偏移，得到當前子圖像的紋理坐標。需要注意的是，對豎直方向的坐標偏移需要使用減法，這是因為在Unity 中紋理坐標豎直方向的順序（從下到上逐漸增大）和序列幀紋理中的順序（播放順序是從上到下〉是相反的。這樣，我們就得到了真正的紋理采樣坐標。

Unity Shader實現序列幀動畫的代碼：

Shader "Unlit/Demo-SequenceAnimation"{ Properties { _MainTex ("Sequence Frame Image", 2D) = "white" {} // 序列幀動畫紋理 _Color("Color Tint", Color) = (1, 1, 1, 1)      // 顏色 _HorizontalAmount("Horizontal Amount", float) = 4  // 行數 _VerticalAmount("Vertical Amount", float) = 4    // 列數 _Speed("Speed", Range(1, 100)) = 30  // 播放速度 }  SubShader {  // 由于序列幀圖像通常包含了透明通道，因此可以被當成是一個半透明對象。  // 在這里我們使用半透明的“標配”來設置它的SubShader 標簽，即把Queue 和RenderType 設置成Transparent， //把IgnoreProjector 設置為True Tags { "RenderType"="Transparent" "Queue"="Transparent" "IgnoreProjector"="True"} LOD 100  Pass { Tags{"LightMode"="ForwardBase"}  // 由于序列幀圖像通常是透明紋理，我們需要設置Pass 的相關狀態，以渲染透明效果 // 在Pass 中，我們使用Blend 命令來開啟并設置混合模式，同時關閉了深度寫入 ZWrite Off Blend SrcAlpha OneMinusSrcAlpha  CGPROGRAM #pragma vertex vert #pragma fragment frag  #include "UnityCG.cginc"  struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; };  struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; };  sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color; float _HorizontalAmount; float _VerticalAmount; float _Speed;  v2f vert (appdata v) { v2f o; o.vertex = mul(UNITY_MATRIX_MVP, v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; }  fixed4 frag (v2f i) : SV_Target { float time = floor(_Time.y * _Speed);     //所經過的時間 float row = floor(time / _HorizontalAmount);  // 第幾行圖片 （和行數不能對應起來） float column = time - row * _HorizontalAmount; // 第幾列圖片  //每次更新的量// float offserX = 1.0 / _HorizontalAmount; // float offserY = 1.0 / _VerticalAmount;// half2 uv = float2(i.uv.x * offsetX, i.uv.y*offsetY);  //將所顯示的圖片縮放至應有的大小 （即一個關鍵幀圖像的大?。?half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount); // 等價于上面3句  //下面方法雖然不能和序列幀動畫一一對應，但仍符合序列幀動畫的執行順序 uv.x += column / _HorizontalAmount; // 更換序列幀 uv.y -= row / _VerticalAmount;   //等價于uv.y += 1.0 - row / _VerticalAmount;   // sample the texture fixed4 col = tex2D(_MainTex, uv); col.rgb *= _Color.rgb;     // 設置紋理顏色 return col; } ENDCG } }}