《Genesis-3D開源遊戲引擎--橫版格鬥遊戲製做教程07：UI》

概述：

UI即User Interface（用戶界面）的簡稱。UI設計是指對軟件的燃機交互、操做邏輯、界面美觀的總體設計。好的UI設計不只可讓遊戲變得更有品位，更吸引玩家，還能充分體現開發者對遊戲總體的定位和遊戲特色。

製做原理：

編譯UI基本框架->皮膚製做->引擎事件UI交互

實現方法：

步驟1：

編譯UI基本框架。能夠參考Genesis-3D入門引擎關於UI教程中的基本UI及運行，參考人們文檔基本UI及運行。

這裏使用Layout editor來完成UI的框架搭建。Widgets->Window建立UI佈局的窗口。不一樣於教程文檔中的是，這裏創建開發者在設計UI界面初期，建議使用PanelEmpty做爲背景，如圖7-1-1所示，由於其只起到界面範圍約束的做用。

圖7-1-1

從新命名，而且將該層設置爲底層，如圖7-1-2所示。

 

圖7-1-2

根據事先設定的頁面排版，添加Button。以製做遊戲開始中的開始UI按鈕爲例。在Layout editor中，設計版式，最終開始界面框中的UI格局圖如圖7-1-3所示。

圖7-1-3

步驟2：

皮膚製做。能夠參考Genesis-3D入門引擎關於UI教程中的UI美化，參考入門教程UI中的UI美化。這裏使用Skin editor來編輯皮膚。將Skin editor的工程文件直接關聯到引擎UI Media文件夾下。File->setting->Folders->Add，來添加文件路徑，如圖7-1-4所示。

圖7-1-4

添加資源文件夾，setting->Resources->Add，路徑爲UI Media文件夾，如圖7-1-5所示。

圖7-1-5

從新啓動Skin editor後，文件導入作好的UI美術資源圖。這時候建立一個皮膚並從新命名：Create->Rename，紋理（Texture）選擇導入的圖片。在紋理中截取須要使用的皮膚，如圖7-1-6所示，一樣的方法選擇好全部的皮膚後，並將其存儲，注意保存文件加".xml"後綴。

步驟3：

打來LayoutEditor，導入Start.layout文件，爲其添加皮膚。用記事本打開start.xml，按照左側SkinEditor中的Coords欄中的數值依次修改皮膚的offset值：

01    < ?xml version="1.0" encoding="UTF-8"?>    
02    < MyGUI type="Resource" version="1.1">    
03        < Resource type="ResourceSkin" name="UIstart" size="200 200" texture="UI.png">    
04            < BasisSkin type="SubSkin" offset="0 0 200 200" align="Stretch">    
05                < State name="normal" offset="755 133 200 200"/>    
06            < /BasisSkin>    
07        < /Resource>    
08        < Resource type="ResourceSkin" name="background" size="362 572" texture="UI.png">    
09            < BasisSkin type="SubSkin" offset="0 0 362 572" align="Stretch">    
10                < State name="normal" offset="304 0 362 572"/>    
11            < /BasisSkin>    
12        < /Resource>    
13    < /MyGUI>

建立Init.xml。具體步驟爲：新建一個記事本文件，寫入代碼，保存並關閉後，修改其後綴名爲xml。代碼以下：

1< ?xml version="1.0" encoding="UTF-8"?>2< MYGUI type="List" >3
　< list file="start.xml"/>4< /MYGUI>

 

修改gui_core.xml。往裏添加一條語句：

01< ?xml version="1.0" encoding="UTF-8"?>02< MyGUI type="List">03
　< List file="gui_fonts.xml"/>04
　< List file="MyGUI_Images.xml"/>05
　< List file="MyGUI_CommonSkins.xml"/>06
　< List file="MyGUI_BlackOrangeTheme.xml"/>07
　< List file="MyGUI_Pointers.xml"/>08
　< List file="MyGUI_Layers.xml"/>09
　< List file="MyGUI_Settings.xml"/>10
　< List file="Init.xml"/>11< /MyGUI>

 

在Layout editor中，將文件與引擎UIMedia相關聯，方法同Skin editor關聯方法相同。最終按鈕添加皮膚後的效果如圖7-3-1所示。

圖7-3-1

步驟4：

在引擎中，爲"開始"按鈕，編譯點擊事件，相關代碼以下所示。

01
class RestartPanel
02
{
03
　　public void Init()
04
　{
05
　　//註冊開始界面
06
　　GUI.RegisterLayout(_windowName, @"Layout\Restart.layout", false, true);
07
　　//註冊按鈕點擊事件
08
　　GUI.UIWidget.SetEventMouseButtonClick(_windowName, "RestartButton", OnRestartBtnClick, EventControl.Add);
09
 
10
　　//自適應屏幕分辨率
11
　　IntSize screenSize = GUI.GetScreenSize();
12
　　IntPoint UIpos = new IntPoint((int)(screenSize.width * 0.5f - GUI.UIWidget.GetSize(_windowName, "_Main").width * 0.5f),(int)(screenSize.height * 0.5f - GUI.UIWidget.GetSize(_windowName, "_Main").height * 0.5f));
13
          GUI.UIWidget.SetPosition(_windowName, "_Main", UIpos);
14
 
15
　　GUI.SetLayoutVisible(_windowName, true);
16
　}
17
 
18
　public void SetVisible(bool vis)
19
　{
20
　　GUI.SetLayoutVisible(_windowName, vis);
21
　}
22
　private void OnRestartBtnClick(FString sender)
23
　{
24
　　//控制遊戲暫停與開始邏輯
25
　　bool pause = Logic.LogicMgr.Instance.IsPause;
26
　　Logic.LogicMgr.Instance.SetPause(!pause);
27
　　GUI.SetLayoutVisible(_windowName, false);
28
　}
29
 
30
　FString _windowName = "RestartPanel";
31
　bool _isPlaying = true;
32
}

 

引擎官方網站：http://www.genesis-3d.com.cn/

官方論壇：http://bbs.9tech.cn/genesis-3d/

官方千人大羣：59113309   135439306

YY頻道-遊戲開發大講堂（徹底免費，按期開課）：51735288 

Genesis-3D開源遊戲引擎：遊戲起源，皆因有我！！！