第八章GUI界面設計關鍵技術戰略性新興領域教材建設團隊-重型高端裝備制造目錄CONTENTS8.1概述8.2

GUI介紹及使用8.3

UGUI介紹及使用8.4

NGUI介紹及使用8.5如何選擇你的UI戰略性新興領域教材建設團隊-重型高端裝備制造3第八章GUI界面設計關鍵技術8.1概述GUI（圖形用戶界面）是用戶與程序交互的視覺媒介，而在Unity引擎中，NGUI和UGUI是兩代核心UI解決方案：NGUI作為早期第三方插件以靈活高效風靡，為Unity界面開發奠定基礎；隨著引擎迭代，Unity官方推出內置的UGUI系統，深度融合編輯器功能，優化了渲染效率與組件擴展性，二者雖技術架構不同，但共同支撐著Unity從移動端到跨平臺的多樣化界面設計需求。目錄CONTENTS8.1概述8.2

GUI介紹及使用8.2.1基本介紹及特點8.2.2GUI基本控件8.3

UGUI介紹及使用8.4

NGUI介紹及使用8.5如何選擇你的UI戰略性新興領域教材建設團隊-重型高端裝備制造5第八章GUI界面設計關鍵技術8.2.1基本介紹及特點GUI全稱是GraphicalUserInterface，即圖形用戶界面。GUI的作用是使用圖形化顯示的方式實現人與機器之間的信息交互。Unity3d自帶的GUI系統提供了豐富的GUI工具類如：標簽、按鈕、文本框、滑塊和工具條等控件，開發者通過調用GUI類下的靜態方法在界面中繪制控件，搭配不同的控件進而實現所需的GUI界面。GUI控件主要功能Label標簽TextField文本框TextArea多行文本框PasswordField密碼框Button按鈕RepeatButton重復按鈕ToolBarTab頁Toggle選擇框HorizontalSlider水平滾動條VerticalSlider垂直滾動條8.2.2GUI基本控件戰略性新興領域教材建設團隊-重型高端裝備制造6第八章GUI界面設計關鍵技術voidOnGUI(){GUI.Label(newRect(Screen.width/10,Screen.height/10,Screen.width/5,Screen.height/10),”HelloWorld!”);}（1）Label控件：Label控件用于在界面中繪制一個文本或紋理標簽。示例代碼戰略性新興領域教材建設團隊-重型高端裝備制造7第八章GUI界面設計關鍵技術（2）Button控件：Button控件用于在界面中繪制一個可按下的按鈕，一般當用戶按下按鈕后會觸發相應的事件。示例代碼voidOnGUI(){If(GUI.Button(newRect(Screen.width/10,Screen.height/3,Screen.width/5,Screen.height/10),”Click”))Debug.Log(“Clickedthebuttonwithtext”);}8.2.2GUI基本控件戰略性新興領域教材建設團隊-重型高端裝備制造8第八章GUI界面設計關鍵技術（3）TextField控件：TextField控件用于在界面中繪制一個單行文本框，用戶可以在這個文本框中編輯文本。示例代碼voidOnGUI(){stringToEdit=GUI.TextField(newRect(Screen.width/10,Screen.height/10,Screen.width/3,Screen.height/10),stringToEdit,25);}8.2.2GUI基本控件戰略性新興領域教材建設團隊-重型高端裝備制造9第八章GUI界面設計關鍵技術（4）VerticalSlider控件：VerticalSlider控件用于在界面中繪制一個垂直的滑塊，用戶可以設置相應的閾值。示例代碼voidOnGUI(){vSliderValue=GUI.VerticalSlider(newRect(Screen.width/10,Screen.height/10,Screen.width/10,Screen.height/3),vSliderValue,10.0F,0.0F);}8.2.2GUI基本控件戰略性新興領域教材建設團隊-重型高端裝備制造10第八章GUI界面設計關鍵技術（5）Toolbar控件：Toolbar控件用于在界面中繪制一個工具條，可以在其中置入工具按鈕。示例代碼publicinttoolbarInt=0;pubilcstring[]toolbarStrings=newstring[]{“Toolbar1”,“Toolbar2”,“Toolbar3”};voidOnGUI(){toolbarInt=GUI.Toolbar(newRect(Screen.width/10,Screen.height/10,Screen.width/2,Screen.height/10),toolbarInt,toolbarStrings);}8.2.2GUI基本控件目錄CONTENTS8.1概述8.3

UGUI介紹及使用8.3.1基本介紹及特點8.3.2UGUI基本組件8.3.3UGUI基礎控件8.2

GUI介紹及使用8.4

NGUI介紹及使用8.5如何選擇你的UI戰略性新興領域教材建設團隊-重型高端裝備制造12第八章GUI界面設計關鍵技術8.3.1基本介紹及特點UGUI即為Unity3dGUI，是Unity3d4.6版本官方發布的內置于Unity3d引擎的新UI系統。UGUI相比于在8.2節介紹的舊版GUI系統，可快速、高效地搭建各種應用需求的交互界面，能夠實現所見即所得，界面更加美觀，UI開發更加簡單易用。因UGUI搭建系統界面所應用的UI組件均內置于Unity3d引擎，相較于其他開發工具更為穩定，也不會存在版本不兼容等問題。UGUI控件主要功能Image圖片控件（紋理僅限于Sprite類型）Text文本控件RawImage圖片控件（紋理類型不限）Panel面板控件Toggle開關控件Slider滑動條控件Scrollbar滾動條控件ScrollView屏幕滾動控件Button按鈕控件Canvas畫布控件EventSystem事件系統Hierarchy面板Inspector面板8.3.2UGUI基本組件戰略性新興領域教材建設團隊-重型高端裝備制造13第八章GUI界面設計關鍵技術（1）EventSystem組件：首次創建一個UI控件時，系統會自動創建EventSystem組件，主要用來檢測并響應交互動作，進一步激活一定的交互事件。組成部分功能EventSystem處理不同UI控件之間交互事件和射線的發射，以及輸入設備的輸入。TouchInputModule當系統用于移動設備時，自動轉換鼠標點擊為屏幕點擊同時響應交互事件。StandaloneInputModule作為一個獨立輸入模塊，用于完成鼠標、鍵盤等輸入設備與UI控件之間交互的響應。戰略性新興領域教材建設團隊-重型高端裝備制造14第八章GUI界面設計關鍵技術（2）RectTransform組件：用于確定各控件在UI界面中的位置，以及控件對象在不同分辨率的屏幕上的縮放。8.3.2UGUI基本組件Inspector面板組成部分功能PosX軸點Pivot到錨點Anchor水平方向的距離PosY軸點Pivot到錨點Anchor垂直方向的距離WidthUI控件的寬度HeightUI控件的高度Anchor錨點，用于確定對象在Canvas中的位置Pivot軸點，為UI控件縮放和旋轉時的參考點，也可以用來對齊兩個不同UI控件的位置戰略性新興領域教材建設團隊-重型高端裝備制造15第八章GUI界面設計關鍵技術8.3.3UGUI基礎控件Image控件Text控件RawImage控件展示不用于交互的圖像顯示用戶自定義的文本內容直接顯示包括Sprite類型在內的任何類型的紋理圖片Text：要編輯、顯示的文本內容Front：文本的字體FrontStyle：文本字體的樣式FrontSize：文本字體大小LineSpacing：行距RichText：顯示富文本Alignment：文本內容對齊方式HorizontalOverflow：水平溢出Color：文本顏色Material：文本材質Texture：要顯示的紋理圖片Color：顏色

Material：材質

UVRect：圖片紋理的UV坐標戰略性新興領域教材建設團隊-重型高端裝備制造16第八章GUI界面設計關鍵技術8.3.3UGUI基礎控件Button控件Slider控件Canvas控件主要用于響應用戶的點擊事件并觸發相應的操作用于用戶通過拖動滑塊來選擇數值為所有UI元素提供容器，使得開發者可以方便地組織和渲染這些元素Direction：滑動條滑動方向MinValue：最小值MaxValue：最大值WholeNumbers：勾選滑塊滑動值的變化為整數，取消勾選滑塊滑動值的變化為浮點數Value：滑塊位于起始位置，Value值為最小值；滑塊位于終點位置，Value的值為最大值ScreenSpace-Overlay模式：適用于不需要與3D對象交互的UI元素ScreenSpace-Camera模式：允許UI元素根據指定的攝像機進行渲染WorldSpace模式：將UI元素視為3D對象進行渲染Interactable：控制按鈕交互激活Transition：按鈕狀態過渡效果目錄CONTENTS8.1概述8.3

UGUI介紹及使用8.2

GUI介紹及使用8.4

NGUI介紹及使用8.4.1基本介紹及特點8.4.2UGUI基礎控件8.5如何選擇你的UI戰略性新興領域教材建設團隊-重型高端裝備制造18第八章GUI界面設計關鍵技術8.4.1基本介紹及特點NGUI是Unity引擎中一個強大的用戶界面系統，專為2D和3D游戲開發設計。NGUI是付費插件，開發者可以在Unity3d官方的AssetStore中購買后下載NGUI插件。NGUI的核心組件包括UIRoot、UIPanel、UIWidget、UIAnchor等，這些組件通過模塊化和組件化的方式，使得界面設計更加靈活和高效。NGUI還支持性能優化，通過減少DrawCall次數來提升渲染性能。NGUI控件主要功能Label顯示只讀文本或紋理Texture顯示圖像內容Button用戶交互Tween動畫通過插值技術實現屬性平滑過渡的動畫方式Animation動畫實現動畫播放和控制戰略性新興領域教材建設團隊-重型高端裝備制造19第八章GUI界面設計關鍵技術8.4.2UGUI基礎控件Label控件Texture控件Button控件在屏幕上顯示只讀文本或紋理的非交互式控件主要用于顯示圖像內容，通常與UI系統結合使用用于處理用戶的點擊事件Text：指定要顯示的文本內容Image：指定要顯示的紋理Style：調整字體、顏色、對齊方式等屬性Texture屬性：設置顯示的紋理圖像。DrawTexture函數：用于繪制紋理圖像，參數包括位置、紋理、縮放模式等。Interactable：控制按鈕交互激活Transition：按鈕狀態過渡效果Navigation：定義按鈕的導航模式目錄CONTENTS8.1概述8.2

GUI介紹及使用8.3

UGUI介紹及使用8.4

NGUI介紹及使用8.5如何選擇你的UI戰略性新興領域教材建設團隊-重型高端裝備制造21第八章GUI界面設計關鍵技術8.5如何選擇你的UIGUIUGUINGUI優點簡單易用，適合快速原型開發；不需要額外安裝插件，集成度高。靈活性和擴展性：支持屏幕自適應、錨點系統、事件系統等高級功能；性能優化