游戏开发论坛

 找回密码
 立即注册
搜索
查看: 2132|回复: 0

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

[复制链接]

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
36572
发表于 2019-2-13 11:26:21 | 显示全部楼层 |阅读模式
文/罗培羽

关联文章:

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

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

1.png

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的范围,进而显示出来。

  1. Shader "Lpy/ImageRoll"
  2. {
  3.         Properties
  4.         {
  5.                 _MainTex ("Main Tex", 2D) = "white" {}


  6.             _Width ("Width", float) = 0.5
  7.             _Distance ("Distance", float) = 0

  8.         }


  9.         SubShader
  10.         {

  11.                 Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}


  12.                 Pass

  13.                 {
  14.                         Tags { "LightMode"="ForwardBase" }
  15.                         ZTest off
  16.                         ZWrite Off

  17.                         Blend SrcAlpha OneMinusSrcAlpha


  18.                         CGPROGRAM

  19.                         #pragma vertex vert  

  20.                         #pragma fragment frag

  21.                         #include "UnityCG.cginc"


  22.                         sampler2D _MainTex;

  23.                         float _Width;

  24.                         float _Distance;


  25.                         struct a2v

  26.                         {  

  27.                             float4 vertex : POSITION;

  28.                             float2 texcoord : TEXCOORD0;

  29.                         };  


  30.                         struct v2f
  31.                         {  

  32.                             float4 pos : SV_POSITION;

  33.                             float2 uv : TEXCOORD0;

  34.                         };  


  35.                         v2f vert (a2v v)

  36.                         {  

  37.                                 v2f o;  

  38.                                 o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  


  39.                                 o.uv.x = v.texcoord.x;

  40.                                 o.uv.y = v.texcoord.y;

  41.                                 return o;

  42.                         }  


  43.                         fixed4 frag (v2f i) : SV_Target

  44.                         {

  45.                                 i.uv.x = frac(i.uv.x*_Width + _Distance);

  46.                                 fixed4 c = tex2D(_MainTex, i.uv);

  47.                                 return c;

  48.                         }

  49.                         ENDCG

  50.                 }  

  51.         }

  52.         FallBack "Transparent/VertexLit"

  53. }
复制代码

2、使用材质

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

2.png

3.png

3、代码中引用

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

  1. <p>using UnityEngine;</p><p>using System.Collections;</p><p>using UnityEngine.UI;</p><p>
  2. </p><p>public class ImageRoll : MonoBehaviour {</p><p>
  3. </p><p><span style="white-space:pre">        </span>public Image image;</p><p><span style="white-space:pre">        </span>private Material mtl;</p><p><span style="white-space:pre">        </span>float distance;</p><p><span style="white-space:pre">        </span>// Use this for initialization</p><p><span style="white-space:pre">        </span>void Start () {</p><p><span style="white-space:pre">                </span>mtl = image.material;</p><p><span style="white-space:pre">        </span>}</p><p><span style="white-space:pre">        </span></p><p><span style="white-space:pre">        </span>// Update is called once per frame</p><p><span style="white-space:pre">        </span>void Update () {</p><p><span style="white-space:pre">                </span>distance += 0.005f;</p><p><span style="white-space:pre">                </span>mtl.SetFloat("_Distance", distance);</p><p><span style="white-space:pre">        </span>}</p><p>}</p>
复制代码

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

4.png

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


5.png

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

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-3-28 21:35

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表