Unity特效设计教程：滚动的背景

小篱 · 发表于 2019-2-13 11:26:21

文/罗培羽

关联文章：

Unity特效设计教程：实现“梦幻旋屏”
Unity特效设计教程：图片的切割与翻转
Unity特效设计教程（四) ：标题光效
Unity特效设计教程：滚动的背景

制作动画时，往往会使用到“滚动的背景”。如下图所示，一开始图片只显示素材的一部分，然后素材不断滚动。该效果可以模拟横版或飞行游戏的背景图，或实现一些动画效果。尽管有很多方法实现该功能，这里提供一种基于shader的方法。

1、编写Shader

下面的着色器代码实现了“滚动的背景”功能。这里定义了3个变量，其中_MainTex代表背景贴图，_Width代表显示背景的百分比，_Distance代表当前滚动的距离。核心代码为“i.uv.x = frac(i.uv.x*_Width + _Distance);”，其中frac是取小数的函数，如1.23 取出来是 0.23，其功能是将i.uv.x 控制在0到1的范围，进而显示出来。

Shader "Lpy/ImageRoll"
{
Properties
{
_MainTex ("Main Tex", 2D) = "white" {}
_Width ("Width", float) = 0.5
_Distance ("Distance", float) = 0
}
SubShader
{
Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
Pass
{
Tags { "LightMode"="ForwardBase" }
ZTest off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
float _Width;
float _Distance;
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 = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv.x = v.texcoord.x;
o.uv.y = v.texcoord.y;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
i.uv.x = frac(i.uv.x*_Width + _Distance);
fixed4 c = tex2D(_MainTex, i.uv);
return c;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}

复制代码

2、使用材质

新建一个名为ImageRoll的材质，选择上述编写的shader。设置WIdth和Distance两个参数，如下图所示。只要调整Distance的值，即可看到滚动到不同位置的背景。

3、代码中引用

可以在代码中逐步增加distance 的值，造成背景不断向前滚动的效果。也可以在shader中使用Time相关的方法，实现同样的功能。

using UnityEngine;using System.Collections;using UnityEngine.UI;
public class ImageRoll : MonoBehaviour {
public Image image; private Material mtl; float distance; // Use this for initialization void Start () { mtl = image.material; } // Update is called once per frame void Update () { distance += 0.005f; mtl.SetFloat("_Distance", distance); }}

复制代码

将刚创建的材质应用于图片上，即可看到效果。如下图所示。

最后依然到了广告时间：笔者出版的一本Unity3D实战类书籍《Unity3D网络游戏实战》。该书通过一个完整的多人坦克对战实例，详细介绍网络游戏开发过程中涉及到的知识和技巧。书中还介绍了服务端框架、客户端网络模块、UI系统的架构等内容。相信透过本书，读者能够掌握Unity3D网络游戏开发的大部分知识，也能够从框架设计中了解商业游戏的设计思路，感谢大家支持。

专栏地址：https://zhuanlan.zhihu.com/pyluo

账号		自动登录	找回密码
密码			立即注册

Unity特效设计教程：滚动的背景

相关帖子