UGUI強制新手引導製作方案
阿新 • • 發佈:2019-01-25
強制新手引導一般來說就是限制點選區域,只能點選遊戲引導固定的區域.我們的思路就是試用一張遮罩圖片來遮罩全屏,然後把想要點選的物體的渲染層級放在最頂層,然後點選遮罩圖片的時候使用事件穿透讓我們想要點選的物體來接受事件.大概效果如下圖
可以看到我們想要點選的按鈕圖片的渲染層級已經被放在最上層了.只需要自己寫shader來改變渲染佇列就可以了.和官方內建的shader都一樣只是改變了渲染佇列
圖片shader
Shader "UI/Image Top"
{
Properties
{
_MainTex("Base (RGB), Alpha (A)" , 2D) = "white" {}
}
SubShader
{
LOD 200
Tags
{
//在這裡改變渲染佇列
"Queue" = "Overlay"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog{ Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
float4 _MainTex_ST;
struct appdata_t
{
float4 vertex : POSITION;
half4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f
{
float4 vertex : POSITION;
half4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
v2f vert(appdata_t v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.color = v.color;
o.texcoord = v.texcoord;
return o;
}
half4 frag(v2f IN) : COLOR
{
// Sample the texture
half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
return col;
}
ENDCG
}
}
}
字型shader
Shader "UI/Font Top"
{
Properties
{
_MainTex("Base (RGB), Alpha (A)", 2D) = "white" {}
}
SubShader
{
LOD 200
Tags
{
"Queue" = "Overlay"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog{ Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
float4 _MainTex_ST;
struct appdata_t
{
float4 vertex : POSITION;
half4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f
{
float4 vertex : POSITION;
half4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
v2f vert(appdata_t v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.color = v.color;
o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
half4 frag(v2f IN) : COLOR
{
fixed4 col = IN.color;
col.a *= tex2D(_MainTex, IN.texcoord).a;
return col;
}
ENDCG
}
}
}
還有最後一步,就是需要讓事件透過我們的遮罩層,讓我們的按鈕來響應點選,下面上程式碼
public class GuidePostEvent : MonoBehaviour , IPointerClickHandler
{
//監聽點選
public void OnPointerClick(PointerEventData eventData)
{
//事件穿透
PassEvent(eventData, ExecuteEvents.pointerClickHandler);
}
public void PassEvent<T>(PointerEventData data, ExecuteEvents.EventFunction<T> function)
where T : IEventSystemHandler
{
List<RaycastResult> results = new List<RaycastResult>();
EventSystem.current.RaycastAll(data, results);
GameObject current = data.pointerCurrentRaycast.gameObject;
for (int i = 0; i < results.Count; i++)
{
if (current != results[i].gameObject)
{
//在這裡判斷事件穿透檢測到的物件是不是我們新手引導需要點選的物件
GuideStep step = results[i].gameObject.GetComponent<GuideStep>();
if (step != null)
{
//再判斷引導id是否是屬於當前的引導id,畢竟我們一個面板上也許會出現很多
//引導物件
int currentStepId = GuideManager.Singleton.GetStepID();
bool exists = Array.Exists<int>(step.StepID, element => element == currentStepId);
if (exists)
ExecuteEvents.Execute(results[i].gameObject, data, function);
}
}
}
}
}
把上面的指令碼掛在我們的引導遮罩層就可以了,只需要自己寫個指令碼掛在點選物件上來接受事件就可以了.
非常的簡單.