溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Unity Shader如何實現(xiàn)序列幀動畫效果

發(fā)布時間:2020-08-03 10:08:17 來源:億速云 閱讀:528 作者:小豬 欄目:編程語言

小編這次要給大家分享的是Unity Shader如何實現(xiàn)序列幀動畫效果,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

Unity Shader如何實現(xiàn)序列幀動畫效果  Unity Shader如何實現(xiàn)序列幀動畫效果

實現(xiàn)原理

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

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

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

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

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

Unity Shader實現(xiàn)序列幀動畫的代碼:

Shader "Unlit/Demo-SequenceAnimation"
{
 Properties
 {
 _MainTex ("Sequence Frame Image", 2D) = "white" {} // 序列幀動畫紋理
 _Color("Color Tint", Color) = (1, 1, 1, 1)   // 顏色
 _HorizontalAmount("Horizontal Amount", float) = 4 // 行數(shù)
 _VerticalAmount("Vertical Amount", float) = 4  // 列數(shù)
 _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 的相關狀態(tài),以渲染透明效果
 // 在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); // 第幾行圖片 (和行數(shù)不能對應起來)
 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句
 
 //下面方法雖然不能和序列幀動畫一一對應,但仍符合序列幀動畫的執(zhí)行順序
 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
 }
 }
}

Unity Shader如何實現(xiàn)序列幀動畫效果

Tip:

因為使用了透明度混合,如果在Game視圖中看不到效果,可去掉Lighting面板中的Skybox的材質;

ceil(x) 對輸入參數(shù)向上取整。例如:ceil(float(1.3)) ,其返回值為 2.0

floor(x) 對輸入參數(shù)向下取整。例如floor(float(1.3)) 返回的值為 1.0;但是 floor(float(-1.3))返回的值為-2.0。

看完這篇關于Unity Shader如何實現(xiàn)序列幀動畫效果的文章,如果覺得文章內容寫得不錯的話,可以把它分享出去給更多人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。

AI