機(jī)械裝備虛擬現(xiàn)實(shí)設(shè)計(jì)及實(shí)例分析 課件 第8章 GUI界面設(shè)計(jì)關(guān)鍵技術(shù)

第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造目錄CONTENTS8.1概述8.2

GUI介紹及使用8.3

UGUI介紹及使用8.4

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

GUI介紹及使用8.2.1基本介紹及特點(diǎn)8.2.2GUI基本控件8.3

UGUI介紹及使用8.4

NGUI介紹及使用8.5如何選擇你的UI戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造5第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)8.2.1基本介紹及特點(diǎn)GUI全稱是GraphicalUserInterface，即圖形用戶界面。GUI的作用是使用圖形化顯示的方式實(shí)現(xiàn)人與機(jī)器之間的信息交互。Unity3d自帶的GUI系統(tǒng)提供了豐富的GUI工具類如：標(biāo)簽、按鈕、文本框、滑塊和工具條等控件，開發(fā)者通過調(diào)用GUI類下的靜態(tài)方法在界面中繪制控件，搭配不同的控件進(jìn)而實(shí)現(xiàn)所需的GUI界面。GUI控件主要功能Label標(biāo)簽TextField文本框TextArea多行文本框PasswordField密碼框Button按鈕RepeatButton重復(fù)按鈕ToolBarTab頁(yè)Toggle選擇框HorizontalSlider水平滾動(dòng)條VerticalSlider垂直滾動(dòng)條8.2.2GUI基本控件戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造6第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)voidOnGUI(){GUI.Label(newRect(Screen.width/10,Screen.height/10,Screen.width/5,Screen.height/10),”HelloWorld!”);}（1）Label控件：Label控件用于在界面中繪制一個(gè)文本或紋理標(biāo)簽。示例代碼戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造7第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)（2）Button控件：Button控件用于在界面中繪制一個(gè)可按下的按鈕，一般當(dāng)用戶按下按鈕后會(huì)觸發(fā)相應(yīng)的事件。示例代碼voidOnGUI(){If(GUI.Button(newRect(Screen.width/10,Screen.height/3,Screen.width/5,Screen.height/10),”Click”))Debug.Log(“Clickedthebuttonwithtext”);}8.2.2GUI基本控件戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造8第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)（3）TextField控件：TextField控件用于在界面中繪制一個(gè)單行文本框，用戶可以在這個(gè)文本框中編輯文本。示例代碼voidOnGUI(){stringToEdit=GUI.TextField(newRect(Screen.width/10,Screen.height/10,Screen.width/3,Screen.height/10),stringToEdit,25);}8.2.2GUI基本控件戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造9第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)（4）VerticalSlider控件：VerticalSlider控件用于在界面中繪制一個(gè)垂直的滑塊，用戶可以設(shè)置相應(yīng)的閾值。示例代碼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基本控件戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造10第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)（5）Toolbar控件：Toolbar控件用于在界面中繪制一個(gè)工具條，可以在其中置入工具按鈕。示例代碼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基本介紹及特點(diǎn)8.3.2UGUI基本組件8.3.3UGUI基礎(chǔ)控件8.2

GUI介紹及使用8.4

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

Material：材質(zhì)

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

UGUI介紹及使用8.2

GUI介紹及使用8.4

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

GUI介紹及使用8.3

UGUI介紹及使用8.4

NGUI介紹及使用8.5如何選擇你的UI戰(zhàn)略性新興領(lǐng)域教材建設(shè)團(tuán)隊(duì)-重型高端裝備制造21第八章GUI界面設(shè)計(jì)關(guān)鍵技術(shù)8.5如何選擇你的UIGUIUGUINGUI優(yōu)點(diǎn)簡(jiǎn)單易用，適合快速原型開發(fā)；不需要額外安裝插件，集成度高。靈活性和擴(kuò)展性：支持屏幕自適應(yīng)、錨點(diǎn)系統(tǒng)、事件系統(tǒng)等高級(jí)功能；性能優(yōu)化