關於 unity 專案的新手引導製作

比較老的新手引導的做法是上下左右四個遮罩組合，把需要 點選 的地方鏤空出來。

這裡的做法是頂層用一個遮罩全部遮擋住，遮罩上用個 Button 接收點選事件，然後後把事件傳遞給 目標控制元件

• 效果圖

  

• 預製件

  

  

• 邏輯程式碼（都是lua），完整版

  --======================================================================
  -- descrip: 新手引導
  --======================================================================
   
  
  
  local CTool = require "logic.common.tool"
  local EventEnum = require "logic.base.event_enum"
  local CObjectBase = require "logic.object.base_object"
  
  local CGuideMgr = class(CObjectBase)
  CGuideMgr.__name = "CGuideMgr"
  
  function CGuideMgr.Init(self)
    CObjectBase.Init(self)
    self._path = "Assets/res/Prefabs/ui/PnlMask.prefab"
   
  
    self._rootTran = nil
    self._BtnMask = nil
    self._BtnTarget = nil
    self._Finger = nil -- 手指特效
    self._clickTarget = nil 
    self._isForceGuide = false -- 是否強制引導
    self._guideRect = nil
  
    self:InitEvent()
  end
  
  function CGuideMgr.InitMask(self)
    local guideCanvas = gGame:GetUIMgr():GetUIGuideCanvasObj()
    self._guideRect = guideCanvas.transform:GetComponent("RectTransform"
   
  )
  
    self._rootTran = CTool.Instantiate(self._path, guideCanvas.transform).transform
    GameObject.DontDestroyOnLoad(self._rootTran.gameObject)
  
    self._BtnMask = self._rootTran:GetComponent("Button")
    self._BtnTarget = self._rootTran:Find("BtnTarget"):GetComponent("Button")
    self._Finger = self._rootTran:Find("e_ui_xingshou_01")
  
    UIEventListener.Get(self._BtnMask.gameObject).onClick = LuaHelper.VoidDelegate(function() self:HandlerBtnMask() end)
    UIEventListener.Get(self._BtnTarget.gameObject).onClick = LuaHelper.VoidDelegate(function() self:HandlerBtnTarget() end)
  end
  
  function CGuideMgr.InitEvent(self) 
    self:RegistEventListener(EventEnum.GuideShow, function(...) self:ShowMask(...) end)
  end
  
  function CGuideMgr.ShowMask(self, target, isForce)
    if not self._rootTran then
        self:InitMask()
    end
  
    self._isForceGuide = isForce or false
    self._clickTarget = target
    self._rootTran.gameObject:SetActive(true)
  
  -- 這裡是將遮罩上 Button 根據傳進來的物件的位置 擺放 好，這個Button 其實可以降 alpha 調為0，就可以直接看到 目標物件
    local uiCam = gGame:GetUIMgr():GetUICamera()
    local targetPos = target.transform.position
    local screenPos = Utils.WorldToScreenPoint(uiCam, targetPos)
    local v2 = Vector2.New(screenPos.x, screenPos.y)
    local localPos = Utils.ScreenPointToLocalPointInRectangle(self._guideRect, v2, uiCam)
  
    local dstPos = Vector3.New(localPos.x, localPos.y, 0)
    self._BtnTarget.transform.localPosition = dstPos
    self._Finger.transform.localPosition = dstPos
    -- print("--- localPos, x:{0}, y:{1}", localPos.x, localPos.y)
  
  -- 設定 Button 大小
    local targetRect = target.transform:GetComponent("RectTransform")
    print("--- targetRect, width:{0}, height:{1}", targetRect.rect.width, targetRect.rect.height)
  
    local mv = self._BtnMask:GetComponent("MaskValue") -- 這個其實修改遮罩中的 圓形鏤空 縮放的效果，其實就是修改 shader 的值
    mv:SetValue(50, 100, Vector4.New(localPos.x, localPos.y, 0, 0))
  end
  
  function CGuideMgr.HideMask(self)
    self._clickTarget = nil
    if not self._rootTran then return end
  
    self._rootTran.gameObject:SetActive(false)
    self._BtnMask:GetComponent("MaskValue"):Pause()
  end
  
  
  function CGuideMgr.DestroyMask(self)
    self._clickTarget = nil
    if not self._rootTran then return end
  
    GameObject.Destroy(self._rootTran.gameObject)
    self._rootTran = nil
    self._BtnMask = nil
    self._BtnTarget = nil
    self._guideRect = nil
  end
  
  function CGuideMgr.HandlerBtnMask(self)
    if self._isForceGuide then return end
  
    self:HideMask()
  end
  
  function CGuideMgr.HandlerBtnTarget(self)
    Utils.ExecutePointerClick(self._clickTarget) 
    self._clickTarget = nil
    self:HideMask()
  end
  
  return CGuideMgr

  • Utils.ExecutePointerClick(self._clickTarget) 這個方法觸發 go 物件上實現了 IPointerClickHandler 介面的方法

   public static void ExecutePointerClick(GameObject go) {
          ExecuteEvents.Execute<IPointerClickHandler>(go, new PointerEventData(EventSystem.current), ExecuteEvents.pointerClickHandler);
      }

• 觸發事件顯示引導

  EventTrigger(EventEnum.GuideShow, self._view._Btn2.gameObject) -- _Btn2 這個就是需要被引導的 ui 按鈕

  ​