Unity Shader入门精要学习笔记 - 第11章让画面动起来

最新推荐文章于 2024-01-02 17:00:49 发布

原创

最新推荐文章于 2024-01-02 17:00:49 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#unity #读书笔记 #入门精要 #Shader #让画面动起来

Unity Shader入门精要学习笔记 - 第11章让画面动起来

本系列为UnityShader入门精要读书笔记总结，
原作者博客链接：http://blog.youkuaiyun.com/candycat1992/article/
书籍链接：http://product.dangdang.com/23972910.html

第11章让画面动起来

没有动画的画面往往让人觉得很无趣。在本章中，我们将会学习如何向 Unity Shader 中引入
时间变量，以实现各种动画效果。我们首先会介绍 Unity Shader 内置的时间变量，在随后的章节中我们会使用这些时间变量来实现动画。接下来会介绍两种常见的纹理动画，即序列帧动画和背景循环滚动动画。最后，我们会学习使用顶点动画来实现流动的河流、广告牌等动画效果。

11.1 Unity Shader 中的内置变量（时间篇）

动画效果往往都是把时间添加到一些变量的计算中，以便在时间变化时画面也可以随之变化。Unity Shader 提供了一系列关于时间的内置变量来允许我们方便地在Shader中访问允许时间，实现各种动画效果。下表给出了这些内置的时间变量。
这里写图片描述

11.2 纹理动画

纹理动画在游戏中的应用非常广泛。尤其在各种资源都比较局限的移动平台上，我们往往会使用纹理动画来代替复杂的例子系统等模拟各种动画效果。
最常用的纹理动画之一就是序列帧动画。序列帧动画的原理非常简单，它像放电影一样，依次播放一系列关键帧图像，当播放速度达到一定数值时，看起来就是一个连续的动画。它的有点在于灵活性很强，我们不需要进行任何物理计算就可以得到非常细腻的动画效果。而它的缺点也很明显，由于序列帧中每张关键帧图像都不一样，因此，要制作一张出色的序列帧纹理所需要的美术工程量比较大。
想要实现序列帧动画，我们先要提供一张包含了关键帧图像的图像。如下图所示。
这里写图片描述
上图包含了8×8张关键帧图像，它们的大小相同，而且播放顺序为从左到右、从上到下、下图给出了不同时刻播放的不同动画效果。

我们新建一个Quad和Shader进行演示。

Shader "Unlit/Chapter11-MyImageSequenceAnimation"
{
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        //帧动画图片纹理
        _MainTex ("Image Sequence", 2D) = "white" {}
        //图像在水平方向上的关键帧个数  
        _HorizontalAmount ("Horizontal Amount", Float) = 4
        //图像在垂直方向上的关键帧个数  
        _VerticalAmount ("Vertical Amount", Float) = 4
        //播放速度  
        _Speed ("Speed", Range(1, 100)) = 30
    }
    SubShader {
        Tags {
  
  "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
        //由于序列帧图像通常都是透明纹理，我们需要设置Pass的相关状态，以渲染透明效果
        Pass {
            Tags { "LightMode"="ForwardBase" }

            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM

            #pragma vertex vert  
            #pragma fragment frag

            #include "UnityCG.cginc"

            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _HorizontalAmount;
            float _VerticalAmount;
            float _Speed;

            struct a2v {  
                float4 vertex : POSITION; 
                float2 texcoord : TEXCOORD0;
            };  

            struct v2f {  
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };  

            v2f vert (a2v v) {  
                v2f o;  
                o.pos = UnityObjectToClipPos(v.vertex);  
                o.uv = TRANSFORM_TEX(v.texcoord, _