最近要寫新手引導，記錄一下
蒙黑（層級最上，蒙住整個ui，有鏤空裁剪）鏤空區域btn(是乙個button 動態改變位置) 引導ui（做新手引導的ui） 活動ui（主動彈出的活動ui 層級位於引導ui上）
當然還有引導的小姐姐頭像對話方塊以及鏤空區域有特效提示
之前做法：蒙黑背景計算鏤空區域，蒙黑鏤空區域有乙個btn，btn的點選可以滲透下去
但是會出現一種問題，點選鏤空區域btn，可能發生異常，下面的按鈕沒有被滲透點選，但是這一步驟怎麼辦？我們也不方便記錄
還有乙個問題，如果在引導的時候出現乙個活動ui（一種全屏ui，在活動時間主動彈出），這個時候引導ui的層級可能小於活動ui層級，當然可以在引導時候禁止ui其他ui開啟，這個方法的
點選事件還是可以滲透活動ui到引導ui
之後做法：蒙黑依舊，蒙黑背景計算鏤空區域，蒙黑鏤空區域有乙個btn
這個btn的點選事件不用滲透下去，不再掛載滲透點選指令碼，而是監聽點選事件
這個btn的點選事件的邏輯：呼叫引導步驟中按鈕的點選事件 如果是button evt = button.onclick evt.invoke() 如果是toggle tog.ison = true
這個方法我配置的是指引按鈕的路徑，可能我們在find的時候ui還沒有開啟，find不到的時候我們遞迴呼叫（當然做乙個cd時間）
還有乙個問題是獲取指引按鈕的位置問題，ui剛開啟的時候我們find到了按鈕，但是這個時候可能按鈕還在做動畫，那我們也需要持續更新位置資訊（當然可以做乙個cd tween做緩動）
還有乙個問題是按鈕的世界座標獲取，按鈕的父節點有很多，父節點的錨點各種各樣，我們需要把按鈕的位置轉到maskbg(蒙黑ui)之下
local pos = self.maskbg.gameobject.transform:inversetransformpoint(go.transform.position)
做法可能多種多樣，需求也是多種多樣，有時候需要考慮需求的時候，需要改變策略，隨機應變了
1《效果圖》
<2>摳了個圓形
<3>屬性說明（這裡定義了2個變數 圓心 type）
圓心：vector(x y z w) 矩形： 如果是矩形按鈕 x y為座標 z w為寬高 圓形：x y為座標，z為直徑
type：0為圓形裁剪 1為矩形裁剪
上面四張圖已經展示得很清楚了 shader裡面的計算也很簡單 對比了一下uv與中心點的位置關係
<4>配置表（配置的lua）
--之前配置格式 這種格式配置了每個步驟的位置資訊 每一步開始直接做動畫位移 方便；但是策劃得配置這些區域 還是比較麻煩
guideconfig ={}
--opencondition type 1=任務完成開啟 v任務code 2=等級達到開啟 v等級 3=系統開啟時開啟 v系統code
--pos x y z w x,y 座標 z,w 寬高(圓只有z直徑)
--masktype 0 圓形裁剪 1 方形裁剪
guideconfig[10086] = {}
guideconfig[10086].opencondition =
guideconfig[10086].step={}
guideconfig[10086].step[1] =
guideconfig[10086].step[2] =
guideconfig[10086].step[3] =
guideconfig[10086].step[4] =
---現在的配置格式
guideconfig ={}
--opencondition type 1=任務完成開啟 v任務code 2=等級達到開啟 v等級 3=系統開啟時開啟 v系統code
--pos x y z w x,y 座標 z,w 寬高(圓只有z直徑)
--masktype 0 圓形裁剪 1 方形裁剪
guideconfig[10086] = {}
guideconfig[10086].opencondition =
guideconfig[10086].step={}
guideconfig[10086].step[1] =
guideconfig[10086].step[2] =
guideconfig[10086].step[3] =
guideconfig[10086].step[4] =
<5>原始碼
shader "tang/guidemask"
_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
//中心
_origin("圓心",vector) = (0,0,0,0)
//裁剪方式 0圓形 1圓形
_masktype("type",float) = 0
[toggle(unity_ui_alphaclip)] _useuialphaclip("use alpha clip", float) = 0
}subshader
stencil
cull off
lighting off
zwrite off
ztest[unity_guiztestmode]
blend srcalpha oneminussrcalpha
colormask[_colormask]
pass
;fixed4 _color;
fixed4 _texturesampleadd;
float4 _cliprect;
float4 _origin;
float _masktype;
out.texcoord = in.texcoord;
out.color = in.color * _color;
return out;
}sampler2d _maintex;
fixed4 frag(v2f in) : sv_target
else
half4 color = (tex2d(_maintex,uv) + _texturesampleadd) * col;
color.a *= unityget2dclipping(in.worldposition.xy, _cliprect);
clip(col.a);
#ifdef unity_ui_alphaclip
clip(color.a - 0.001);
#endif
return color;
}endcg}}
}
Unity Shader實現新手引導遮罩鏤空效果
這兩天實現了下新手引導需要的遮罩鏤空shader效果，記錄一下。1 圓形鏤空shader 計算片元世界座標和目標中心位置的距離 float dis distance in.worldposition.xy,center.xy 過濾掉距離小於 半徑 過渡範圍 的片元 clip dis radius t...
iOS 新手引導頁面，透明遮罩指引頁 鏤空處理
這種遮罩通常作為新手引導頁面。通常有鏤空的一部分，附有描述，指引使用者第一次進入介面該如何操作，只顯示一次。下面給出兩種實現思路 優點 程式實現簡單，便捷。2.自己實現乙個uiview，通過設定其layer的mask屬性來實現鏤空區域 缺點 較第一種略多，後期迭代介面改動要更新控制項frame。核心...
利用threshold實現的遮罩引導
點選 開始引導 則進入引導操作。除指定的按鈕可以操作外，其它區域均不可點選。這種應用當新功能或是新產品上線後，用來引導使用者來使用產品 功能，是十分有用的。facebook也有類似的引導，方法也很簡單 用4個絕對定位的div 指定乙個背景 一定透明度 遮住其它部分，這樣可以被操作的區域就 留空 出來...