[Unity3D]uGui製作新手引導

新手引導就是讓玩家一開始玩遊戲時，指示玩家按不同按鈕，希望籍此讓玩家初步了解遊戲介面和各種功能。玩家角度，新手引導就是要不斷「點點點點」然後就可以開始自己玩遊戲了。

那麽應該怎樣做呢？比較常見及簡單的方法就是高亮相關的按鈕，加上箭頭/手指/對話框指示玩家（只能）按下這個按鈕，然後不斷重複這個動作在不同按鈕上，直至新手引導完成。簡單效果大約是這樣：

應該怎樣去達成這個效果呢？

流程如下：

1. 建立一個蒙版放在所有按鈕之上（我命名為BlockPanel），用來防止玩家按下其他按鈕

2. 複製相關按鈕，把箭頭/手指放在按鈕旁邊

3. 把按鈕放在蒙版圖層之上

4. 箭頭/手指製作移動動畫，提示玩家（只能）按這裏

5. 複雜下一個按鈕，如此類推......

代碼如下：

public void BeginnerGuide()
{
    GameObject beginnerGuide = GameObject.Find("BeginnerGuide");
    GameObject guideArrow = GameObject.Find ("GuideArrow");
    Button InfoButton= GameObject.Find ("Btn_Info");
    Button _copyInfoButton = Instantiate(InfoButton) as Button;
  
　　_copyInfoButton.transform.parent = InfoButton.transform.parent; 
   
　　_copyInfoButton.transform.localPosition = InfoButton.transform.localPosition ; 
　　_copyInfoButton.transform.localRotation = InfoButton.transform.localRotation ;  
　　_copyInfoButton.transform.localScale    = InfoButton.transform.localScale; 
  
　　_copyInfoButton.transform.parent = beginnerGuide.transform;
 
　　BlockPanel.SetActive(true);
 
　　guideArrow.transform.localPosition = InfoButton.transform.localPosition + new Vector3(100, 0, 0);
　　guideArrow.transform.DOMoveX(100, 1).SetLoops(-1, LoopType.Yoyo);
}

順帶一提，複製按鈕後記得先把它的 Parent 設定為在被複製按鈕的 Parent, 不然的話就算把位置等等於被複製按鈕也會走位喔

箭頭/手指的移動動畫是用了DoTween插件，DoShakePosition是它的其中一個功能，有興趣可以看看它的官網：

http://dotween.demigiant.com/documentation.php

Hierarchy是這樣的：

uGui（即Canvas下）的排序有圖層的意義，較下的物件代表較上的圖層，所以把蓋起整個畫面BlockPanel放在下面可以遮擋較上按鈕的功能～

進階版就是不斷Call BeginnerGuide(String btnName)，每次把btnName換成你想要的按鈕，直至你的引導完成。最後跟BeginnerGuide這個Panel說再見～

(當然複製的按鈕你也可以先一步用完即棄 XD)

public void BeginnerGuide(String btnName)
{
    GameObject beginnerGuide = GameObject.Find("BeginnerGuide");
    GameObject guideArrow = GameObject.Find ("GuideArrow");
    Button targetButton= GameObject.Find ("btnName");
    
    Button _copyTargetButton = Instantiate(targetButton) as Button;
  
    _copyTargetButton.transform.parent = targetButton.transform.parent; 
  
    _copyTargetButton.transform.localPosition = targetButton.transform.localPosition ; 
    _copyTargetButton.transform.localRotation = targetButton.transform.localRotation ;  
    _copyTargetButton.transform.localScale    = targetButton.transform.localScale; 
 
    _copyTargetButton.transform.parent = beginnerGuide.transform;
 
    BlockPanel.SetActive(true);
 
   guideArrow.transform.localPosition = targetButton.transform.localPosition + new Vector3(100, 0, 0);
   guideArrow.transform.DOMoveX(100, 1).SetLoops(-1, LoopType.Yoyo);
}

當然方法不止一種，這只是小弟想到的方法而已！大家如果有其他甚至更好製作新手引導的方法歡迎交流喔~