從零開始做一個SLG遊戲（六）：UI系統擴充套件

遊資網發表於2019-10-18

現在UI系統已經有了最為基本的開啟和關閉的功能了，接下來需要對UI系統進行一個小小的擴充套件。

繼續以確認框作為例子：確認框這種形式在不同的地方都會使用到。比如上一篇文章中提到的科技樹功能，每點一個科技，都會有一個對應的確認框。

我們不可能也沒有必要針對每一個科技都製作一個新的確認框，所以除了開啟一個新的UI之外，我們還需要一些擴充套件性的功能。而確認框，將是一個非常典型的例子。

確認框的功能，其實包含兩層含義：

1.上一個UI會傳遞一些資訊給下一個UI，然後在下一個UI中，這些資訊會顯示出來。(比如科技樹確認框中“你確定要提升XXX科技嗎？”，或者關閉遊戲時“你確定要退出遊戲嗎？”這一類的話)

2.上一個UI會將自身的某些方法傳遞給下一個UI，這樣下一個UI就會執行這些方法。(比如提升科技的確認框，點了確認會提升對應的科技，退出遊戲的確認框，點了確定會退出遊戲)

所以，說白了就是要傳遞一些資訊給下一個UI，所以我們需要定義一個新的類，用來儲存這些資訊：

public class UIEvent
{
public UIType Type { get; private set; }
public Action Action { get; private set; }
public Hashtable Msg { get; private set; }
public UIEvent(UIType type)
{
Type = type;
Action = null;
Msg = null;
}
public UIEvent(UIType type, Hashtable msg)
{
Type = type;
Action = null;
Msg = msg;
}
public UIEvent(UIType type, Action act)
{
Type = type;
Action = act;
Msg = null;
}
public UIEvent(UIType type, Action act, Hashtable msg)
{
Type = type;
Action = act;
Msg = msg;
}
}

複製程式碼

內容很簡單，UIType就不多說了，Action是一個委託，用於將上一個UI的函式傳遞過來，Msg是一個Hashtable，用於儲存一些資訊。

接下來去修改UIRoot類和BaseUI類：

public class BaseUI : MonoBehaviour
{
……
public void OpenUI(UIEvent uiEvent)//給OpenUI加入引數
{
gameObject.SetActive(true);
}
}
public class UIRoot : MonoBehaviour {
……
public void OpenNormalUI(UIEvent uiEvent)
{
UIType uiType = uiEvent.Type;
……
CurrentUI.OpenUI(uiEvent);
}
public void OpenKeepAboveUI(UIEvent uiEvent)
{
UIType uiType = uiEvent.Type;
……
theUI.OpenUI(uiEvent);
}
}

複製程式碼

之後更新所有用過這幾個函式的地方：

首先是開啟StartUI的地方

public class UIRoot : MonoBehaviour {
……
private void Start()
{
OpenNormalUI(new UIEvent(UIType.StartUI));
}
……
}
然後是StartUI
public class StartUI : BaseUI {
……
private void StartGame()
{
UIRoot.Instance.OpenNormalUI(new UIEvent(UIType.GameSettingUI));
}
}

複製程式碼

而後是GameSettingUI

public class GameSettingUI : BaseUI {
……
public void StartGame()
{
UIRoot.Instance.OpenNormalUI(new UIEvent(UIType.StartUI));
}
public void OpenTestUI()
{
UIRoot.Instance.OpenKeepAboveUI(new UIEvent(UIType.TestAboveUI));
}
}

複製程式碼

接下來是做一個確認框，確認框的UI主要包含3個部分：資訊描述，確認按鈕，取消按鈕

如圖，和以前流程一樣，做好了CheckBoxUI組建並放到了相應的位置。

資訊描述的組建是Content，確認按鈕是OKButton，取消是CancleButton。給CheckBoxUI掛上如下指令碼用以初始化。

public class CheckBoxUI : BaseUI
{
private Text Text;
private Button OKButton;
private Button CancelButton;
private void Awake()
{
Text = UITool.FindChildByName(gameObject, "Content").GetComponent<Text>();
OKButton = UITool.FindChildByName(gameObject, "OKButton").GetComponent<Button>();
OKButton.onClick.AddListener(OnClickOk);
CancelButton = UITool.FindChildByName(gameObject, "CancelButton").GetComponent<Button>();
CancelButton.onClick.AddListener(OnClickCancel);
}
private void OnClickOk()
{
}
private void OnClickCancel()
{
}
}

複製程式碼

在UIConfig中新增對應的配置：

public class UIConfig
{
public static Dictionary<UIType, string> UIPath = new Dictionary<UIType, string>
{
……
{ UIType.CheckBoxUI,"UIPrefabs/CheckBoxUI" },
};
}
public enum UIType
{
……
CheckBoxUI,
}

複製程式碼

然後再在TestAboveUI中加入對應的開啟入口：

public class TestAboveUI : BaseUI
{
……
private Button NewUIButton;
private void Awake()
{
……
NewUIButton = UITool.FindChildByName(gameObject, "NewUIButton").GetComponent<Button>();
NewUIButton.onClick.AddListener(OpenNewUI);
}
……
public void OpenNewUI()
{
}
}

複製程式碼

其中OpenNewUI就是用來開啟新的UI的：

如果在該函式內加一句

UIRoot.Instance.OpenKeepAboveUI(new UIEvent(UIType.CheckBoxUI));
就可以開啟確認框了，但是要做的並不僅僅是開啟確認框，而是要讓確認框顯示對應的文字，並且點了確認後，要實現改視窗中包含的某個程式碼。

所以UIEvent內需要加更多的東西，作為測試，希望確認框執行的效果是在控制檯列印“1111111111”，並且在確認框中顯示“是否需要列印”。