Unity特效设计教程：实现“梦幻旋屏”

作者：罗培羽 授权游资网发布 2019-01-15

关联文章：

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

游戏开发中，往往会用到一些屏幕特效。下图展现的是一种“旋屏”效果，它会旋转屏幕图像，且距离中心点越远的点旋转角度越大。这种效果特别适合营造“梦幻”感，比如，在RPG游戏中，经过一段“旋屏”特效，主角穿越到了10年前。


1、编写Shader

下面的着色器代码使用了顶点/片元着色器处理旋屏特效的功能。这里定义3个属性，其中_MainTex代表屏幕贴图，_Rot 代表基准的旋转角度。核心代码在片元着色器frag中实现。

如下图所示，屏幕图像被归一到[0,1]的空间中，中心点为(0.5,0.5)。假设某个点的uv坐标为(x,y)，经过一系列处理，它的坐标变为(x1,y1)，而(x1,y1)便是实现旋转效果后的uv坐标。


由“float distance = sqrt((i.uv.x - 0.5)*(i.uv.x - 0.5) +(i.uv.y - 0.5)*(i.uv.y - 0.5));”可以计算点到屏幕中心的距离distance。由于距离越远旋转角度越大，使用“_Rot *=distance”将角度增量基准与距离联系起来，即可获取需要旋转的角度：angle = _Rot*distance + A。

由反正切公式可得∠A = atan((y - 0.5)/(x - 0.5))，由于atan的取值为[-π/2,π/2]，还需根据y值确定∠A所在的象限，故而∠A = step(x,0.5)*PI+ atan((y - 0.5)/(x - 0.5)) 。计算∠A 后，便可由angle = _Rot*distance + A计算总的旋转角度。

前面已经计算了点到屏幕中心的距离distance，故而：



2、使用材质

新建c#文件，编写ScreenRot类，它由一个共有变量mtl，在它的OnRenderImage方法中调用Graphics.Blit将屏幕图像（对应shader中的_MainTex）与材质混合起来。

using UnityEngine;
using System.Collections;

public class ScreenRot : MonoBehaviour
{
    public Material mtl;

    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        Graphics.Blit (src, dest,mtl);
    }
}

然后给新建一个名为ScreenRot的材质，使用上述编写的Shader。然后给摄像机添加ScreenRot组件，设置刚刚创建的材质，如下图所示。


运行游戏，调整材质的“Rotation”属性，即可看到旋转特效。


3、代码中引用

Shader中并没有涉及时间的控制，旋转速度需要由c#代码控制，将ScreenRot修改成下面的代码，即可让屏幕自动旋转。


这个效果能够运用在很多场合，比如使用“正向旋转→切换场景→反向旋转”实现切屏特效。

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



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

参与评论