1. 程式人生 > >Unity新手引導相關遮罩處理

Unity新手引導相關遮罩處理

專案中需要新增新手引導的強制引導遮罩。
之前通過實現UnityEngine.ICanvasRaycastFilter這個介面
並且實現方法

public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
    {
        //返回當前鼠標出發的區域是否在這個對應目標裡面
        return !RectTransformUtility.RectangleContainsScreenPoint(mTarget, sp, eventCamera);
    }

這個指令碼是掛在強制引導的整個頁面上,這樣只有target的RectTransfrom可以響應

//這個是在update中實現,能每次更換target物件的時候就會把指引位置轉換了。
public void DoUpdate()
    {
        if (mTarget == null) { SetAllDirty(); return; }
        if (mTarget != null && center != mTarget.anchoredPosition || size != mTarget.sizeDelta)
        {
            this.center = mTarget.anchoredPosition;
            this.size
= mTarget.sizeDelta; //Arrow就是指引的手啊,或者光圈的位置 mArrow.position = mTarget.position; SetAllDirty(); } } //這個也是 protected override void OnFillVBO(List<UIVertex> vbo) { Vector4 outer = new Vector4(-rectTransform.pivot.x * rectTransform.rect
.width, -rectTransform.pivot.y * rectTransform.rect.height, (1 - rectTransform.pivot.x) * rectTransform.rect.width, (1 - rectTransform.pivot.y) * rectTransform.rect.height); Vector4 inner = new Vector4(center.x - size.x / 2, center.y - size.y / 2, center.x + size.x * 0.5f, center.y + size.y * 0.5f); vbo.Clear(); var vert = UIVertex.simpleVert; // left vert.position = new Vector2(outer.x, outer.y); vert.color = color; vbo.Add(vert); vert.position = new Vector2(outer.x, outer.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.x, outer.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.x, outer.y); vert.color = color; vbo.Add(vert); // top vert.position = new Vector2(inner.x, inner.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.x, outer.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.z, outer.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.z, inner.w); vert.color = color; vbo.Add(vert); // right vert.position = new Vector2(inner.z, outer.y); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.z, outer.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(outer.z, outer.w); vert.color = color; vbo.Add(vert); vert.position = new Vector2(outer.z, outer.y); vert.color = color; vbo.Add(vert); // bottom vert.position = new Vector2(inner.x, outer.y); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.x, inner.y); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.z, inner.y); vert.color = color; vbo.Add(vert); vert.position = new Vector2(inner.z, outer.y); vert.color = color; vbo.Add(vert); }

同時說明一下這個方法中自己發現在自己實際專案中的問題吧。
首先這個指引如果你需要有一個手指或者對應光圈去指引,他指引的位置都是預設指引到對應目標的錨點的位置
也就有了我在自己專案中這樣的程式碼,如果能寫儘量根據錨點的位置去寫

if (IsSpecialToggle)
            {
                // TODO 這裡可以根據四象限 直接判斷不用這麼噁心加了
                mArrow.localPosition += new Vector3(mTarget.sizeDelta.x / 2, -mTarget.sizeDelta.y / 2, 0);
            }

我的專案中是指在0.5 0.5的位置就是正中間,這個看你們對應專案的相關希望指引位置了
當然我這個專案中Image就是指引對應的Arrow的箭頭的位置,我指引的就是最中心

另外頁面的點選,由於遊戲內部的不知是讓你點選,點選之後還需要讓遊戲會自動指引下一步,如果不做一套新手引導系統支援還是不好實現的。就需要在每個頁面單獨處理。
這裡我們之前想到的派發給新手引導的訊息時機本身是在滑鼠擡起的時候去做的。
如下`void CheckPosition()
{
if (this == null || !gameObject.activeInHierarchy)
return;

    if (Input.GetMouseButtonDown(0) || (Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Began))
    {

“#if UNITY_EDITOR

        if (EventSystem.current.IsPointerOverGameObject())

“#else
//這段程式碼在手機上是不好用的 所以用了重寫pointeroveruiobject方法
//if (EventSystem.current.IsPointerOverGameObject(Input.GetTouch(0).fingerId))
if (IsPointerOverUIObject(Input.GetTouch(0).position))
“#endif
{
if (EventSystem.current.currentSelectedGameObject != null && EventSystem.current.currentSelectedGameObject == mTarget.gameObject)
{
_bClickTarget = true;
“#if UNITY_EDITOR
mousePos = Input.mousePosition;
“#else
mousePos = Input.GetTouch(0).position;
“#endif
}
}
else
{
_bClickTarget = false;
}
}

    if (Input.GetMouseButtonUp(0) || (Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Ended))
    {
        if (mCurrentIsTarget && _bClickTarget)
        {
            _bClickTarget = false;
            //清除當前頁面的遮罩
            if (this != null)
                Close();
        }
    }
}`

所有巨集之前加了個雙引號。。。不然字型太大,太口怕。。。

之前用這樣很坑爹的方式計算的點選方式,以確定當前點選的一定是點選區域 然後再buttonup裡面去觸發下一條新手引導。

加了這麼多引數是因為遇到如下問題:
1.當前滑鼠點選按下,劃出目標位置,鬆手, 會認定點選。
2.滑鼠外部按下,劃入目標位置,然後相應點選。
3.滑鼠從目標位置劃出劃回是可以相應click事件的,但是如果頁面支援drag相應滑動介面,就不會再實現click事件。

本已經很多引數限制,但是在三星s6的曲面屏上不好點選,會出現很多計算錯誤的問題。

於是轉變思路
直接通過傳入的target目標的相應事件的OnClick事件,多繫結個事件

 if(mTarget != null)
        {
            var btn = mTarget.GetComponent<Button>();
            if (btn != null)
            {
                btn.onClick.AddListener(XXXX);
            }
            else
            {
                var toogle = go.GetComponent<Toggle>();
                if (toogle)
                {
                    toogle.onValueChanged.AddListener(XXXXXX);
                }
            }
        }

具體的邏輯就寫在xxxx裡面進行處理就好了。。

相關推薦

Unity新手引導相關處理

專案中需要新增新手引導的強制引導遮罩。 之前通過實現UnityEngine.ICanvasRaycastFilter這個介面 並且實現方法 public bool IsRaycastLocationValid(Vector2 sp, Camer

cocos新手引導元件

首先先明確下需求,新手引導一般會遮蔽了除期望操作元件之外的所有ui的操作。也就是說,除了指定的元件,你不可以點選其他的元件。然後直接上程式碼吧: cc.Class({ extends: cc.Component, properties: { targetNode

Unity spine動畫的

我的前面部落格的角色鑑賞介面,人物的切換,也就是spine動畫的解決 spine動畫大家不會的話可以去官網看,怎麼弄 關於spine動畫遮罩我目前能解決的辦法就是用UGUI解決,或者你用UGUI和NGUI混合使用 主要遮罩功能是UGUI實現的 遮罩

unity-新手引導

關於 unity 專案的新手引導製作 比較老的新手引導的做法是上下左右四個遮罩組合,把需要 點選 的地方鏤空出來。 這裡的做法是頂層用一個遮罩全部遮擋住,遮罩上用個 Button 接收點選事件,然後後把事件傳遞給 目標控制元件

unity 新手引導

case (int)GSToGC.MsgID.eMsgToGCFromGS_GuideResp: print ("eMsgToGCFromGS_GuideResp"); OnNetM

Unity新手引導

解釋一下思路: public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera) { // 點選在箭頭框內部則無效,否則生效 return !RectTrans

[Shader]新手引導中的裁剪

texture mas 計算 efault truct fragment tor nbsp inpu 最近要寫新手引導,記錄一下 1<效果圖> 上面四張圖已經展示得很清楚了 shader裏面的計算也很簡單 對比了一下uv與中心點的位置關系 <

iOS在UIView層上擷取一塊透明區域(新手引導頁)

用於設定新手引導頁 設定方法 - (CAShapeLayer *)addTransparencyViewWith:(UIBezierPath *)tempPath{ UIBezi

安卓中圖片的處理

reference south res rac req hat 代碼 cep flag 安卓開發中必不可少的就是各種圖片的圓角,遮罩等等。 曾經我都是用shape處理的。發現背景圖的圓角要設置成和界面父元素背景一樣才幹看不出現紕漏。 當遇到背景多變的情況,比方listv

Unity Shader】(四) ------ 紋理之法線紋理、單張紋理及紋理的實現

相對 ctx mali 通過 dir con 真的 dpi spa 筆者使用的是 Unity 2018.2.0f2 + VS2017,建議讀者使用與 Unity 2018 相近的版本,避免一些因為版本不一致而出現的問題。 【Unity Shader】(三) ---

Unity】用Shader實現圖片的區域,支援半透明,實現地圖動態上色功能

一個專案,做世界地圖時,希望未開啟的地塊是線稿,新地塊開啟時,做一個上色處理。 想到的方案就是:上了色的彩圖蓋線上稿上,然後用mask 控制彩圖的區域性顯隱。 網上找了一個,可以半透明遮罩的shader:https://www.jianshu.com/p/1d9d439c28fa 要控制不同區塊

android引導

第一步:類的複製HighLightLayoutFang public class HighLightLayoutFang extends RelativeLayout { public HighLightLayoutFang(Context contex

新手引導的介面部分操作區域的處理(一)

挖坑和高亮 這裡總結了一些常用的方式,不全面歸納如下:1.將目標操作物件(Button/或過載自寫的互動事件)區域提取到引導灰色層之上     處理方式:  A. 在物件上加Canvs控制層級                         B. 直接把物件的父節點設定到引

Unity功能記錄(十一) ------ 實現3D模型效果

事情是這樣的,之前呢,用Sprite Mask做了遮罩效果,但是,老闆想要月球來回轉動,就不能用圖片轉動,只能用UI了,那相應的,遮罩怎麼辦呢,老闆也是神人,給我指了一條新的思路,就是將3D遮罩轉化成2D遮罩,不過放在手機上卡成狗,幸好群裡大佬ific指點了一下遮罩的shader,效果

CSS實現鏤空引導

1、用一個外部元素控制遮罩層顯示區域,避免出現滾動條 2、用一個內部元素實現遮罩層和鏤空效果,其中,遮罩層通過設定大尺寸黑色半透明border實現,鏤空區域通過設定元素小width和小height實現 3、通過位移控制鏤空的位置 HTML: <

unity_3(NGUI UIPanel功能)

對 UIPanel 的Clipping 引數設定為 SoftClip  具體功能使用可以檢視文件 (測試發現部分低版本的NGUI在電腦上可以實現此功能 真機上無效果,請在高版本NGUI上測試) 圖

Unity Mecanim動畫的實現(九):動畫層、與Ik動畫

1.動畫層         (1)新建動畫層 可以通過         (2)動畫層的屬性。          Weight代表某個動畫層的權重,權重為0,該層動畫不對模型產生影響,權重為1時,將產生最大影響。 Mask:動畫遮罩 Blend

微信彈出引導使用者瀏覽器開啟升級版

相信做前端的朋友一定都遇到這種情況的、當你的網頁中有直接連結apk下載的時候會沒有反映的、是因為在微信內是無法下載軟體、手機APP等、那麼這個時候一般的解決方案就是、必須要點選右上角三個點、選擇“在瀏覽器中開啟”才可以、檢視效果,之前一直用的都是遮罩提示的 但是我們最近有了突

關於Unity

最早接觸遮罩,是在做畢設時,小地圖的實現,當時用的是NGUI,攝像機跟隨人物,進行渲染,將RenderTexture賦給圖片來實現,而攝像機拍攝到的是正方形的,但需求則不一定,在這裡用到了Shader

unity新動畫系統之動畫層和動畫

這一節來說說unity動畫層layer和遮罩avatarMask; weight 權重,對應著這一層動畫在所有層動畫中所佔的比例。以上圖來說明,new layer中的weight為0,模型的動畫效果就是base layer中的動畫;0-1之間,模型的動畫效