使用工具：VS2017,unity3d

使用語言：c#

作者：Gemini_xujian

參考：siki老師-《叢林戰爭》視訊教程

上一篇文章中，我已經完成了遊戲客戶端與伺服器端的初步連線，接下來將開始進行遊戲場景與開始介面UI的搭建。

01-控制場景的視野漫遊動畫作為選單介面背景

首先，需要將資源包中的一個scene場景作為遊戲的主場景，這裡，提供一下資源的下載地址（https://download.csdn.net/download/gemini_xujian/10465872），如果有需要的同學可以下載一下去使用。

接下來開始製作漫遊動畫。選中主攝像機，點選Windows選單下面的animation選項，點選中間的create按鈕，將animation檔案儲存在新建的animations目錄下，命名為CameraWander,如圖所示：

然後在animation編輯器中新增需要變化的屬性，這裡我們只需要修改position和rotation即可，如圖：

新增完成之後是這樣子的：

然後按照自己的想法修改位置和旋轉，我在這裡讓攝像機圍繞場景旋轉一週回到起點，並調節幀率為4。如圖：

這樣就實現了開場動畫的製作，附畫面截圖：

02-開發登入按鈕

首先在Hierarchy檢視下右鍵UI->Image與Text，修改image名字為startpanel並將錨點設定為全屏四角，再建立好text，將text做為startpanel的子物體，調整字型大小以及位置，並將字型選擇為自己喜歡的一種字型，這裡我是用資源提供的方正胖娃字型，調整好後，為字型新增shadow元件，使字型看起來更有立體感，然後為字型新增一個button元件，並將元件下的Transition選擇為Animation，點選下面的Auto Generate Animation按鈕，會彈出animation檔案儲存位置，我放在了animations資料夾下，並改名為button，然後開啟animation編輯器，新增變化屬性rect transform裡面的scale，在中間位置將scale的x和y改為1.2,儲存並檢視效果，這樣就完成了登入按鈕的製作。如圖：

03-設計登入面板UI

右鍵canvas，選擇UI->image，作為登入面板的背景，然後將輸入框以及按鈕等元件做為其子物體，完成效果如圖所示：

目前的UI層級為：

04-開發註冊面板及提示資訊面板

直接複製loginpanel修改成registerpanel，然後再搭建一個提示面板，效果如圖：

UI面板層級結構如圖：

05-建立面板指令碼

將我們之前搭建好的UI框架中的base資料夾拖拽到scripts目錄下，改名為uipanel，然後我們給每一個面板都建立一個指令碼，命名方式與每個面板名稱相同，建立好後，將這些指令碼都繼承自basepanel這個類，實現效果如圖：

每個指令碼繼承自basepanel（以startpanel為例）：

06-建立面板的prefab並修改json和paneltype

將所有的UI面板做成prefab並放入resources目錄的uipanel資料夾下，在UIFramework/UIPanel資料夾下找到UIPanelType，然後刪除原來的列舉值，新增上我們剛才建立的幾個面板的列舉值，分別是Start,Message,Login,Register,然後修改json檔案，json檔案位於UIFramework/Resources目錄下，按照原來的命名方式進行修改，修改後的程式碼如下：

UIPanelType.json:

{
"infoList":
[
{"panelTypeString":"Message",
"path":"UIPanel/MessagePanel"},

{"panelTypeString":"Start",
"path":"UIPanel/StartPanel"},

{"panelTypeString":"Login",
"path":"UIPanel/LoginPanel"},

{"panelTypeString":"Register",
"path":"UIPanel/RegisterPanel"}

]
}

UIPanelType.cs:

using UnityEngine;
using System.Collections;
using System;


public enum UIPanelType  {
   Message,
   Start,
   Login,
   Register,
}

07-開發提示資訊模組

先上程式碼：

MessagePanel.cs:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class MessagePanel : BasePanel
{
    private Text text;
    private float showTime=1f;
    public override void OnEnter()
    {
        base.OnEnter();
        text = GetComponent<Text>();
        text.enabled = false;
        uiMng.InjectMsgPanel(this);
    }

    public override void OnExit()
    {
        base.OnExit();
    }

    public override void OnPause()
    {
        base.OnPause();
    }

    public override void OnResume()
    {
        base.OnResume();
    }

    public void ShowMessage(string msg)
    {
        text.CrossFadeAlpha(1,0.2f,true);
        text.text = msg;
        text.enabled = true;
        Invoke("Hide", showTime);
    }
    private void Hide()
    {
        text.CrossFadeAlpha(0, showTime, true);
    }
}

UIManager.cs:

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System;

public class UIManager:BaseManager {

    /// 
    /// 單例模式的核心
    /// 1，定義一個靜態的物件 在外界訪問 在內部構造
    /// 2，構造方法私有化

    //private static UIManager _instance;

    //public static UIManager Instance
    //{
    //    get
    //    {
    //        if (_instance == null)
    //        {
    //            _instance = new UIManager();
    //        }
    //        return _instance;
    //    }
    //}

    private Transform canvasTransform;
    private Transform CanvasTransform
    {
        get
        {
            if (canvasTransform == null)
            {
                canvasTransform = GameObject.Find("Canvas").transform;
            }
            return canvasTransform;
        }
    }
    private Dictionary<UIPanelType, string> panelPathDict;//儲存所有面板Prefab的路徑
    private Dictionary<UIPanelType, BasePanel> panelDict;//儲存所有例項化面板的遊戲物體身上的BasePanel元件
    private Stack<BasePanel> panelStack;
    private MessagePanel msgPanel;
    

    public UIManager(GameFacade facade) : base(facade)
    {
        ParseUIPanelTypeJson();
    }

    /// <summary>
    /// 把某個頁面入棧，  把某個頁面顯示在介面上
    /// </summary>
    public void PushPanel(UIPanelType panelType)
    {
        if (panelStack == null)
            panelStack = new Stack<BasePanel>();

        //判斷一下棧裡面是否有頁面
        if (panelStack.Count > 0)
        {
            BasePanel topPanel = panelStack.Peek();
            topPanel.OnPause();
        }

        BasePanel panel = GetPanel(panelType);
        panel.OnEnter();
        panelStack.Push(panel);
    }
    /// <summary>
    /// 出棧 ，把頁面從介面上移除
    /// </summary>
    public void PopPanel()
    {
        if (panelStack == null)
            panelStack = new Stack<BasePanel>();

        if (panelStack.Count <= 0) return;

        //關閉棧頂頁面的顯示
        BasePanel topPanel = panelStack.Pop();
        topPanel.OnExit();

        if (panelStack.Count <= 0) return;
        BasePanel topPanel2 = panelStack.Peek();
        topPanel2.OnResume();

    }

    /// <summary>
    /// 根據面板型別 得到例項化的面板
    /// </summary>
    /// <returns></returns>
    private BasePanel GetPanel(UIPanelType panelType)
    {
        if (panelDict == null)
        {
            panelDict = new Dictionary<UIPanelType, BasePanel>();
        }

        //BasePanel panel;
        //panelDict.TryGetValue(panelType, out panel);//TODO

        BasePanel panel = panelDict.TryGet(panelType);

        if (panel == null)
        {
            //如果找不到，那麼就找這個面板的prefab的路徑，然後去根據prefab去例項化面板
            //string path;
            //panelPathDict.TryGetValue(panelType, out path);
            string path = panelPathDict.TryGet(panelType);
            GameObject instPanel = GameObject.Instantiate(Resources.Load(path)) as GameObject;
            instPanel.transform.SetParent(CanvasTransform,false);
            instPanel.GetComponent<BasePanel>().UIMng = this;
            panelDict.Add(panelType, instPanel.GetComponent<BasePanel>());
            return instPanel.GetComponent<BasePanel>();
        }
        else
        {
            return panel;
        }

    }

    [Serializable]
    class UIPanelTypeJson
    {
        public List<UIPanelInfo> infoList;
    }
    private void ParseUIPanelTypeJson()
    {
        panelPathDict = new Dictionary<UIPanelType, string>();

        TextAsset ta = Resources.Load<TextAsset>("UIPanelType");

        UIPanelTypeJson jsonObject = JsonUtility.FromJson<UIPanelTypeJson>(ta.text);

        foreach (UIPanelInfo info in jsonObject.infoList) 
        {
            //Debug.Log(info.panelType);
            panelPathDict.Add(info.panelType, info.path);
        }
    }
    public void InjectMsgPanel(MessagePanel msgPanel)
    {
        this.msgPanel = msgPanel;
    }


    public void ShowMessage(string msg)
    {
        if (msg == null)
        {
            Debug.Log("無法顯示提示資訊，msgpanel為空");
            return;
        }
        msgPanel.ShowMessage(msg);
    }
    /// <summary>
    /// just for test
    /// </summary>
    //public void Test()
    //{
    //    string path ;
    //    panelPathDict.TryGetValue(UIPanelType.Knapsack,out path);
    //    Debug.Log(path);
    //}
}

BasePanel.cs:

using UnityEngine;
using System.Collections;

public class BasePanel : MonoBehaviour {
    protected UIManager uiMng;
    public UIManager UIMng
    {
        set
        {
            uiMng = value;
        }
    }
    /// <summary>
    /// 介面被顯示出來
    /// </summary>
    public virtual void OnEnter()
    {

    }

    /// <summary>
    /// 介面暫停
    /// </summary>
    public virtual void OnPause()
    {

    }

    /// <summary>
    /// 介面繼續
    /// </summary>
    public virtual void OnResume()
    {

    }

    /// <summary>
    /// 介面不顯示,退出這個介面，介面被關係
    /// </summary>
    public virtual void OnExit()
    {

    }
}

GameFacade.cs:

using Common;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameFacade : MonoBehaviour {

    private static GameFacade _instance;
    public static GameFacade Instance
    {
        get
        {
            return _instance;
        }
    }

    private UIManager uiMng;
    private AudioManager audioMng;
    private PlayerManager playerMng;
    private RequestManager requestMng;
    private CameraManager cameraMng;
    private ClientManager clientMng;

    private void Awake()
    {
        if (_instance != null)
        {
            Destroy(this.gameObject);
            return;
        }
        _instance = this;
    }
    // Use this for initialization
    void Start() {
        InitManager();
    }

    // Update is called once per frame
    void Update() {

    }

    private void InitManager()
    {
        uiMng = new UIManager(this);
        audioMng = new AudioManager(this);
        playerMng = new PlayerManager(this);
        requestMng = new RequestManager(this);
        cameraMng = new CameraManager(this);
        clientMng = new ClientManager(this);

        uiMng.OnInit();
        audioMng.OnInit();
        playerMng.OnInit();
        requestMng.OnInit();
        cameraMng.OnInit();
        clientMng.OnInit();
    }
    private void DestroyManager()
    {
        uiMng.OnDestory();
        audioMng.OnDestory();
        playerMng.OnDestory();
        requestMng.OnDestory();
        cameraMng.OnDestory();
        clientMng.OnDestory();

    }
    private void OnDestroy()
    {
        DestroyManager();
    }

    public void AddRequest(ActionCode actionCode, BaseRequest request)
    {
        requestMng.AddRequest(actionCode, request);
    }
    public void RemoveRequest(ActionCode actionCode)
    {
        requestMng.RemoveRequest(actionCode);
    }
    public void HandleResponse(ActionCode actionCode, string data)
    {
        requestMng.HandleResponse(actionCode, data);
    }
    public void ShowMessage(string msg)
    {
        uiMng.ShowMessage(msg);
    }
}

說明：首先，我們對messagepanel進行實現，通過showmessage方法來顯示提示資訊，在showmessage中呼叫invoke方法，來呼叫hide方法，invoke方法的兩個引數分別表示將要呼叫的方法名以及多長時間後呼叫，crossfadealpha的三個引數分別表示目標的透明度值，過渡完成的時間長短以及是否忽略時間的大小快慢。之後，我們想要讓其他面板可以呼叫showmsaage方法，那麼，我們可以在basepanel中得到uimanager，通過uimanager這個類來排程所有的UI面板對外的方法，我們在uimanager呼叫messagepanel中的方法之前，需要先得到messagepanel的例項，這裡通過messagepanel面板呼叫顯示資訊方法時將自身傳遞給uimanager，這樣我們就可以方便的得到messagepanel例項並使用他的方法，除了在UI面板中呼叫外，我們還想要在其他的模組中也可以呼叫顯示提示資訊的方法，那麼，我們就可以將gamefacade類作為中介，用它來完成對messagepanel中showmessage方法的呼叫。

08-開發開始介面和麵板進入的動畫

在使用dotween動畫之前，需要先進行初始化，初始化的方法可以通過使用dotween提供的視覺化介面進行初始化，在工具欄有會有一個tools選單欄選項，這個選項是在匯入dotween後出現的，我們點選Tools->demigiant->dotween utility panel選項，會彈出來一個面板，點選面板中的setup dotween按鈕。這樣就完成了dotween外掛初始化工作。

先上修改的程式碼：

StartPanel.cs:

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class StartPanel : BasePanel {
    private Button loginbtn;
    private Animator btnAnimator;

    private void Start()
    {
        loginbtn = transform.Find("loginbtn").GetComponent<Button>();
        loginbtn.onClick.AddListener(OnLoginClick);
        btnAnimator = transform.Find("loginbtn").GetComponent<Animator>();
    }
    public override void OnEnter()
    {
        base.OnEnter();
        if (loginbtn == null)
        {
            loginbtn = transform.Find("loginbtn").GetComponent<Button>();
            loginbtn.onClick.AddListener(OnLoginClick);
        }
        if(btnAnimator==null)
        btnAnimator = transform.Find("loginbtn").GetComponent<Animator>();
    }

    public override void OnExit()
    {
        base.OnExit();
    }

    public override void OnPause()
    {
        base.OnPause();
        btnAnimator.enabled = false;
        loginbtn.transform.DOScale(0, 0.4f).OnComplete(() => loginbtn.gameObject.SetActive(false));
    }

    public override void OnResume()
    {
        base.OnResume();
        loginbtn.gameObject.SetActive(true);
        loginbtn.transform.DOScale(1, 0.4f).OnComplete(()=> btnAnimator.enabled = true);
    }
    public void OnLoginClick()
    {
        uiMng.PushPanel(UIPanelType.Login);
    }
}

LoginPanel.cs:

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LoginPanel : BasePanel
{
    private Button closebtn;
    private void Start()
    {
        closebtn = transform.Find("closebtn").GetComponent<Button>();
        closebtn.onClick.AddListener(OnCloseClick);
    }
    public override void OnEnter()
    {
        base.OnEnter();
        gameObject.SetActive(true);
        if (closebtn == null)
        {
            closebtn = transform.Find("closebtn").GetComponent<Button>();
            closebtn.onClick.AddListener(OnCloseClick);
        }
        transform.localScale = Vector3.zero;
        transform.localPosition = new Vector3(800,0,0);
        transform.DOScale(1, 0.4f);
        transform.DOLocalMove(Vector3.zero, 0.4f);
    }

    public override void OnExit()
    {
        base.OnExit();
        gameObject.SetActive(false);
    }

    public override void OnPause()
    {
        base.OnPause();
    }

    public override void OnResume()
    {
        base.OnResume();
    }
    public void OnCloseClick()
    {
        transform.DOScale(0, 0.4f);
        transform.DOLocalMove(new Vector3(800,0,0), 0.4f).OnComplete(()=> { uiMng.PopPanel(); });
    }
}

說明：當我們點選開始面板的登入按鈕的時候，需要顯示出來下一個面板並將當前的面板隱藏，因為我們繼承了basepanel，所以我們可以通過定義的四種面板狀態進行一些動畫的接入，動畫效果的實現是由dotween實現的，我們在得到一些物體或者元件時，需要同時在start方法以及enter方法中得到，要注意的是，在enter中得到物體或者元件時需要判斷是否已經得到了，尤其是對UI元件（例如按鈕）註冊事件時為了防止重複，防止重複的原因是多次重複可能會導致事件執行多次，例如點選按鈕時重複註冊事件會導致事件中的方法多次執行，可能會發生不可預料的錯誤。