Unity 手机游戏新手引导Shader

这种效果看起来是在 image 里扣个洞，允许一部分区域能被点击到。这种其实有两种比较常见的方法。一是继承 Graphics 类，重写 OnPopulateMesh( ) 这个函数，自己组件 mesh 网格，但是我不太喜欢这种方法，麻烦不说，要是遇到圆形区域可点击怎么办？这里介绍第二种，直接用 shader 来实现。同时介绍下如何实现一个新人引导系统，这个很常用而且并不复杂。

首先来看矩形可点区域，这部分代码非常简单，就不给出具体的代码了，核心代码如下：

color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

其中 UnityGet2DClipping 函数位于 UnityUI.cginc 里，用之前记得 include 进来。在这个文件里对 UnityGet2DClipping 的定义如下：

inline float UnityGet2DClipping (in float2 position, in float4 clipRect)
{
    float2 inside = step(clipRect.xy, position.xy) * step(position.xy, clipRect.zw);
    return inside.x * inside.y;
}

非常浅显易懂，即当输入点 position 在一个矩形框 Rect 内，返回 1，否则为 0。由于使用了透明效果，记得加上

      ZWrite Off
      Blend SrcAlpha OneMinusSrcAlpha

我只需要在 C# 脚本里传入矩形坐标即可。

接下来来看圆形可点区域：

                color.a *= (distance(IN.worldPosition.xy,_Center.xy) > _Radius);

只需要设置好圆心 _Center 的坐标和半径 _Radius 即可。

这里说下如何做一个常见的新手引导功能。

先做好一个 UI 面板，背景为一个铺满全屏的 image，透明黑色，使用上面所述的矩形可点 shader 或圆形可点 shader，再加一个手指的图片，如果有对话框的还要加上对话框UI，然后写一个控制器来控制它的创建、销毁和行为，就叫 TeacherMgr 吧。

然后在 excel 表里进行配置。给每个触发新手引导的地方编号，在 C# 脚本里对应的用个枚举值代替。

新手引导配置表里设置好如下基础数据配置：

引导ID、手势位置（如果是滑动引导，则可能有两个位置）、可点击区域的大小、对话框位置、对话框里的内容等。

然后在每个触发点调用新手引导功能方法，当满足触发条件，程序运行到这里，调用引导方法。

在引导方法里首先在已完成引导步骤的数据库里查检索引导ID，若存在此ID则说明已引导过，函数直接返回。否则则弹出引导界面。当玩家点击指向的按钮，或者完成滑动操作后，可判定这一引导过程结束，此时会延迟一段时间（为了显示UI）后调用回调方法。若需要多段引导，则只需要在回调方法里继续调用引导方法即可。每触发完成一次引导则将引导ID记录到数据库里。

原文：unity 里常用的 shader 特效 - 知乎

Unity 手机游戏新手引导Shader

猜你喜欢