《Unity Shader》11.2.2 滚动的背景

(1)新建一个场景,在本书资源中,该场景名为Scene_11_2_2。在Unity 5.2中,默认情况下场景将包含一个摄像机和一个平行光,并且使用了内置的天空盒子。在Window → Lighting →Skybox中去掉场景中的天空盒子。由于本例模拟的是2D游戏中的滚动背景,因此我们需要把摄像机的投影模式设置为正交投影。

(2)新建一个材质。在本书资源中,该材质名为ScrollingBackgroundMat。

(3)新建一个Unity Shader。在本书资源中,该Shader名为Chapter11-ScrollingBackground。把新的Shader赋给第2步中创建的材质。

(4)在场景中创建一个四边形(Quad),调整它的位置和大小,使它充满摄像机的视野范围,然后把第2步中的材质拖曳给它。该四边形将用于显示游戏背景。

打开新建的Chapter11-ScrollingBackground,删除原有的代码,并添加如下关键代码。

(1)我们首先声明了新的属性:

(2)我们的顶点着色器代码非常简单:

(3)片元着色器的工作就相对比较简单:

(4)最后,我们把Fallback设置为内置的VertexLit(也可以选择关闭Fallback):

保存后返回场景,把本书资源中的Assets/Textures/Chapter11/Far_Background.png和Assets/Textures/Chapter11/Near_Background.png分别赋给材质的Base Layer和2nd Layer属性,并调整它们的滚动速度(由于我们想要在视觉上模拟Base Layer比2nd Layer更远的效果,因此Base Layer的滚动速度要比2nd Layer的速度慢一些)。单击运行后,就可以得到类似图11.3中的效果。

https://github.com/candycat1992/Unity_Shaders_Book/blob/master/Assets/Shaders/Chapter11/Chapter11-ScrollingBackground.shader

cs 复制代码
Shader "Custom/Chapter11-ScrollingBackground"
{
    Properties {
        _MainTex ("Base Layer (RGB)", 2D) = "white" {} //第一层(较远)背景纹理
        _DetailTex ("2nd Layer (RGB)", 2D) = "white" {} //第二层(较近)的背景纹理
        _ScrollX ("Base layer Scroll Speed", Float) = 1.0 //第一层的滚动速度
        _Scroll2X ("2nd layer Scroll Speed", Float) = 1.0 //第二层的滚动速度
        _Multiplier ("Layer Multiplier", Float) = 1  //控制纹理的整体亮度
    }

    Subshader {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        Pass {
            Tags { "LightMode"="ForwardBase" }

            CGPROGRAM
            #pragma vertex vert
			#pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            sampler2D _DetailTex;
            float4 _MainTex_ST;
            float4 _DetailTex_ST;
            float _ScrollX;
            float _Scroll2X;
            float _Multiplier;

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

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

            v2f vert (a2v v) {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y); //利用TRANSFORM_TEX来得到初始的纹理坐标,_Time.y变量在水平方向上对纹理坐标进行偏移,以此达到滚动的效果
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
                fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
                fixed4 c = lerp(firstLayer, secondLayer, secondLayer.a); //使用第二层纹理的透明通道来混合两张纹理,这使用了CG的lerp函数
                c.rgb *= _Multiplier; //使用_Multiplier参数和输出颜色进行相乘,以调整背景亮度。
                return c;
            }
            ENDCG
        }
    }
    FallBack "VertexLit"
}

https://github.com/candycat1992/Unity_Shaders_Book/blob/master/Assets/Textures/Chapter11/far_background.png

https://github.com/candycat1992/Unity_Shaders_Book/blob/master/Assets/Textures/Chapter11/near_background.png

《Unity Shader》11.2.2 滚动的背景

相关推荐
世洋Blog1 小时前
Unity性能优化-2d游戏的DrawCall
游戏·unity·面试·性能优化·游戏引擎
Tatalaluola1 小时前
Unity使用EPPlus读取写入表格
unity·c#·游戏引擎·excel
呆呆敲代码的小Y1 小时前
【Unity 实用工具篇】 | Unity中的软遮罩组件 SoftMaskForUGUI 快速上手使用
游戏·unity·游戏引擎·免费游戏·遮罩·软遮罩·softmask
B0URNE10 小时前
【Unity基础详解】(11)Unity核心:输入系统
unity·游戏引擎
世洋Blog12 小时前
Unity开发微信小游戏-减少WASM包体大小
unity·游戏引擎·wasm·微信小游戏
TO_ZRG14 小时前
Unity 通过 NativePlugin 接入Android SDK 指南
android·unity·游戏引擎
jtymyxmz16 小时前
《Unity Shader》10.2.1 镜子效果
unity·游戏引擎
ellis197016 小时前
Unity打开新项目Package相关报错处理记录
unity
微:xsooop17 小时前
iOS 上架4.3a 审核4.3a 被拒4.3a 【灾难来袭】
flutter·unity·ios·uniapp