首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之新手引导事件上下分离（二十七）
2017
06-08

UGUI研究院之新手引导事件上下分离（二十七）

新手引导最好和业务逻辑拆开，也就是做新手引导的程序员不能去影响到下面做系统的人。

1.开发一个新手引导编辑器，让策划配出每个引导的点击区域。

2.在Shader中扣一个洞。（圆形或者矩形）用来做显示的点击区域。

3.新手引导的进度需要与服务器进行同步，为了不影响到下面的业务逻辑，在最顶层将UI事件拦截后，渗透点击事件并且与服务器同步进度。渗透事件可以参考我之前的文章，Unity3D研究院之将UI的点击事件渗透下去（九十）
http://www.xuanyusong.com/archives/4241

Drag摇杆的事件，需要把Begin Draging End都要渗透下去。按钮、列表中的Cell元素的点击事件需要特殊注意一下，因为要点击在Cell上，而不是最前面的UI上。

4.新手引导的出现条件，大部分都是打开某个UI并且拥有控制焦点，可能还有 等级/接任务/交任务/进场景 。可以将这些关键点作为事件抛出，在新手引导模块中处理即可。

5.强制引导需要注意，很有可能把玩家卡死。比如引导玩家进副本，请求进副本的消息，和请求新手引导进度的消息是两个不同的，那么就有一定概率出现一个发送成功，另一个发送不成功，如果此时又触发掉线，重进游戏估计就肯定就卡死了。 所以保险起见强制引导最好也可以让玩家跳过。（比如点击空白区域超过5次）

6.最后在分享一个UI的效果，周围是灰色蒙版，然后四周向点击区域聚合的动画。

UGUI研究院之新手引导事件上下分离（二十七） - 雨松MOMO程序研究院 - 1先上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
/// <summary>
/// 新手引导动画
/// </summary>
public class Guide : MonoBehaviour {
 
 
public Image target;
 
 
private Vector4 center;
private Material material;
private float diameter; // 直径
private float current =0f;
 
Vector3[] corners = new Vector3[4];
 
void Awake ()
{
 
Canvas canvas = GameObject.Find ("Canvas").GetComponent<Canvas> ();
target.rectTransform.GetWorldCorners (corners);
diameter = Vector2.Distance (WordToCanvasPos(canvas,corners [0]), WordToCanvasPos(canvas,corners [2])) / 2f;
 
float x =corners [0].x + ((corners [3].x - corners [0].x) / 2f);
float y =corners [0].y + ((corners [1].y - corners [0].y) / 2f);
 
Vector3 center = new Vector3 (x, y, 0f);
Vector2 position = Vector2.zero;
RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, center, canvas.GetComponent<Camera>(), out position);
 
 
 
 
center = new Vector4 (position.x,position.y,0f,0f);
material = GetComponent<Image>().material;
material.SetVector ("_Center", center);
 
 
(canvas.transform as RectTransform).GetWorldCorners (corners);
for (int i = 0; i < corners.Length; i++) {
current = Mathf.Max(Vector3.Distance (WordToCanvasPos(canvas,corners [i]), center),current);
}
 
material.SetFloat ("_Silder", current);
}
 
 
float yVelocity = 0f;
void Update () {
 
 
float value = Mathf.SmoothDamp(current, diameter, ref yVelocity, 0.3f);
if (!Mathf.Approximately (value, current)) {
current = value;
material.SetFloat ("_Silder", current);
}
}
 
void OnGUI(){
if(GUILayout.Button("Test")){
Awake ();
}
}
 
 
Vector2 WordToCanvasPos(Canvas canvas,Vector3 world){
Vector2 position = Vector2.zero;
RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, world, canvas.GetComponent<Camera>(), out position);
return position;
}
}
 

shader是在UI-Default的基础上改了，原理就是扣一个洞，修改每个点的颜色。 –add–是修改的代码。如果unity版本升级shader变化，把–add–中的代码加上即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
Shader "UI/Default_Mask"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
 
_ColorMask ("Color Mask", Float) = 15
 
 
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 
 
//-------------------add----------------------
      _Center("Center", vector) = (0, 0, 0, 0)
      _Silder ("_Silder", Range (0,1000)) = 1000 // sliders
    //-------------------add----------------------
}
 
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
 
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask [_ColorMask]
 
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
 
#include "UnityCG.cginc"
#include "UnityUI.cginc"
 
#pragma multi_compile __ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex   : POSITION;
float4 color    : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
 
struct v2f
{
float4 vertex   : SV_POSITION;
fixed4 color    : COLOR;
float2 texcoord  : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
 
};
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
//-------------------add----------------------
            float _Silder;
            float2 _Center;
            //-------------------add----------------------
v2f vert(appdata_t IN)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(IN);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = IN.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
 
OUT.texcoord = IN.texcoord;
OUT.color = IN.color * _Color;
return OUT;
}
 
sampler2D _MainTex;
 
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
//-------------------add----------------------
               color.a*=(distance(IN.worldPosition.xy,_Center.xy) > _Silder);
               color.rgb*= color.a;
               //-------------------add----------------------
return color;
}
ENDCG
}
}
}
 

如下图所示，脚本挂在bg上，target就是点击区域的Image。

UGUI研究院之新手引导事件上下分离（二十七） - 雨松MOMO程序研究院 - 2

Play游戏就能看到动画效果。如下图所示，我们项目是有UI摄像机的，所以canvas和camera需要注意一下，有UI摄像机和没UI摄像机算区域是不同的。

UGUI研究院之新手引导事件上下分离（二十七） - 雨松MOMO程序研究院 - 3

UGUI研究院之新手引导事件上下分离（二十七） - 雨松MOMO程序研究院 - 4

OK ，这个方法我已经在项目中使用， 如果有什么想法或者建议欢迎在下面给我留言。

测试版本unity5.5.2

 

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之新手引导事件上下分离（二十七）》有 22 条评论

  1. LSheen 说：
    2021 年 10 月 20 日下午 3:03

    MOMO你好，如果需要在黑色遮罩以下的区域做高斯模糊的效果，而被扣除的区域不做，这样的需求怎么实现呢？

    回复
  2. 填空题 说：
    2020 年 1 月 15 日下午 3:18

    你好雨松大佬，Time.timescale = 0的时候怎么让这个动画忽略timescale呢？

    回复
  3. Majiko 说：
    2019 年 10 月 31 日下午 2:50

    MOMO你好，请问如果要在圆圈的周围加上模糊过渡，需要怎么处理呢

    回复
  4. yoyohan 说：
    2019 年 4 月 13 日下午 4:29

    怎么弄成矩形

    回复
  5. 丁丁 说：
    2018 年 10 月 9 日下午 2:18

    怎么在ui空白的的地方，把点击事件传递下去，黑色的部分阻挡点击事件

    回复
  6. summy 说：
    2018 年 2 月 1 日下午 2:14

    在Unity5.4.6中，UNITY_VERTEX_INPUT_INSTANCE_ID报错

    回复
  7. 剑影梦残 说：
    2017 年 11 月 6 日下午 4:05

    可以分享下这个编辑器的代码吗？谢谢

    回复
  8. 黄 说：
    2017 年 11 月 6 日下午 3:33

    请问下编辑器的坐标位置 策划是怎么配的呢？ 是找出需要点击的物体的坐标，然后把坐标填写进去吗？

    回复
  9. wilsonzeng 说：
    2017 年 7 月 17 日下午 4:10

    你好MOMO, 请问如果把圆形改成矩形, Shader要怎么修改?

    回复
  10. 大奥 说：
    2017 年 7 月 14 日上午 9:53

    fgui 无脑做新手引导 我现在做新手引导基本就是2句话 完事
    Controler guideControler = com.getControler(“guide”)
    nowGuideControlIndex = guideControler.selectIndex

    回复
    • 你猜 说：
      2017 年 7 月 26 日上午 11:35

      看着好高端哈哈。我是新建了一个界面。界面上有按钮，有遮罩，有文本框。
      让策划配制。
      进入某个步骤，找到要点击的按钮，复制按钮的样式，复制按钮的事件，设置遮罩的大小。
      点击以后触发目标按钮的事件的同时，进入下一步引导。
      感觉思路是一样的。不过逼格没你高。

      回复
    • 你猜 说：
      2017 年 7 月 26 日上午 11:38

      刚才那个回复是回复momo。
      对于你这个回复真的是没有意义。
      是个程序员都不会满足于用插件和别人的代码。手动实现一遍是基本的欲望。
      玩腻了可能才会用插件。谁都懂。

      回复

留下一个回复

你的email不会被公开。