教學課件 10項目十：UGUI系統(tǒng)-《迷宮尋寶》游戲界面設(shè)計

模塊三：制作游戲界面與動畫特效項目十：UGUI系統(tǒng)—《迷宮尋寶》游戲界面設(shè)計UnityGameEngineUNITY模塊三制作游戲界面與動畫特效UGUI系統(tǒng)

——《迷宮尋寶》游戲界面設(shè)計動畫系統(tǒng)——游戲動畫制作地形引擎——游戲場景制作聲光技術(shù)——聲光特效項目十項目十一項目十二項目十三粒子系統(tǒng)——粒子特效項目十四尋路技術(shù)——導(dǎo)航尋路動畫項目十五背包系統(tǒng)——物品拾取動畫項目十六任務(wù)概述近年來，游戲行業(yè)發(fā)展迅猛，一款界面設(shè)計精美的游戲往往會吸引更多的玩家，這就需要用到UGUI系統(tǒng)，即圖形用戶界面。游戲界面設(shè)計必須遵守相關(guān)的規(guī)定或法規(guī)，比如，圖標設(shè)計、色彩搭配、排版布局等都要遵循統(tǒng)一的視覺規(guī)范，游戲內(nèi)容必須符合社會道德規(guī)范，操作方面需要符合用戶的操作習慣，同時，游戲界面設(shè)計也要根據(jù)用戶的需求和體驗進行優(yōu)化和創(chuàng)新，以提高游戲的競爭力。本項目我們以《迷宮尋寶》游戲界面設(shè)計為例學習一下UGUI系統(tǒng)的使用方法。行業(yè)PPT模板/hangye/學習目標011.掌握UGUI系統(tǒng)各個控件的構(gòu)造和基本參數(shù)設(shè)置2.掌握控件的響應(yīng)事件教學目標重難點重點：UGUI控件的使用及交互設(shè)計難點：對各控件參數(shù)的理解項目實現(xiàn)02任務(wù)1：游戲開始場景制作1.導(dǎo)入給出的素材資源并新建場景。2.新建背景Image，調(diào)整其大小并顯示在畫布中央。3.將GameBg背景圖片轉(zhuǎn)換為精靈圖片并作為Image的背景。制作步驟提示4.新建Image，設(shè)置其Width為300，Height為140。5.為Image添加dialogbj圖片，制作對話框背景。項目實現(xiàn)02任務(wù)1：游戲開始場景制作6.新建Text文本。7.設(shè)置Text屬性為“歡迎您來到亞斯星球！”，字號FontSize為16。制作步驟提示8.新建按鈕，設(shè)置其Text屬性為“繼續(xù)”，F(xiàn)ont屬性為“方正少兒_GBK”字體，Color屬性為白色。9.設(shè)置按鈕背景為buttonBG圖片，同時調(diào)整Button的Width為120，Height為40。項目實現(xiàn)02任務(wù)1：游戲開始場景制作10.新建存放腳本的文件夾Script。11.創(chuàng)建空物體UIController。12.為空物體添加腳本UIEvent。制作步驟提示usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.UI;//引入UI命名空間publicclassUIEvent:MonoBehaviour{publicImageimage;publicTexttext;publicvoidChangeText(){text.text="快來開啟你的尋寶之旅吧！";//更改單擊時的文字

text.color=Color.white;//更改單擊時文字的顏色

}publicvoidChangeImage(){image.color=Color.black;//更改單擊時背景圖片的顏色

}}項目實現(xiàn)02任務(wù)1：游戲開始場景制作13.為Button添加單擊事件ChangeImage（）方法。14.再次為按鈕添加ChangeText（）方法。制作步驟提示15.選擇UIController，在Inspector視圖中，將對應(yīng)的游戲物體Image1和Text文本添加到UIEvent（Script）對應(yīng)位置處。16.選擇畫布Canvas，將UIScaleMode設(shè)置為ScaleWithScreenSize，讓其隨著屏幕大小自動縮放。項目實現(xiàn)02任務(wù)2：菜單界面制作1.打開SampleScene場景。2.制作背景Image，設(shè)置其Width為900，Height為450，PosX為0，PosY為0，畫布隨著屏幕大小縮放，并添加背景圖片GameBG。制作步驟提示3.新建主菜單背景Image，命名為mainpage。4.設(shè)置其Width為250，Height為350，添加background圖片。項目實現(xiàn)02任務(wù)2：菜單界面制作5.利用Image、Button、Text制作完成主菜單界面制作。制作步驟提示6.用同樣的方法制作游戲設(shè)置界面。項目實現(xiàn)02任務(wù)2：菜單界面制作7.制作排行榜界面效果。制作步驟提示8.制作角色設(shè)置界面。首先利用InputField制作姓名輸入框。9.設(shè)置InputField的Width為80，Height為25，輸入文本的字號為10，顏色為黑色。項目實現(xiàn)02任務(wù)2：菜單界面制作10.利用Dropdown制作性別選項。設(shè)置其Width為80，Height為25。11.設(shè)置性別選項的Options內(nèi)容為男和女。12.

Label和Item的字號屬性設(shè)置為10。制作步驟提示13.利用ScrollView制作角色介紹，設(shè)置其Width為200，Height為80。14.

新建文本xinggejieshaotxt，用于在滾動視圖中顯示角色介紹文字，字體為“方正少兒_GBK”，字號為14，顏色為白色，行間距為1.5，文字高度為150左右，并將其設(shè)置為ScrollView下Viewport下Content的子物體。項目實現(xiàn)02任務(wù)2：菜單界面制作15.制作音樂設(shè)置界面，利用Toggle制作背景音樂下面的開關(guān)選項，設(shè)置Label的Text屬性為“開“，字體為”方正少兒_GBK”，Color為白色。16.將Toggle復(fù)制，更改位置及l(fā)abel標簽的Text屬性為“關(guān)”。制作步驟提示17.新建一個空物體toggleControl，為其添加一個ToggleGroup組件。18.將兩個Toggle選中，拖動到toggleControl上，使其成為toggleControl的子物體，然后將toggleControl拖動到兩個Toggle的Group屬性處，此時，開和關(guān)按鈕就變成了二選一的狀態(tài)。項目實現(xiàn)02任務(wù)2：菜單界面制作19.利用Slider制作音量滑塊，Width為120，NormalColor屬性為黃色，MaxValue值為100，選中WholeNumbers選項，使滑塊的數(shù)值為整數(shù)。制作步驟提示20.新建一個Text，命名為slidertxt，調(diào)整一下它的顯示位置在Slider右側(cè)，更改其Text屬性為0%，Color屬性為白色，至此，音樂設(shè)置界面布置完成。項目實現(xiàn)02任務(wù)3：實現(xiàn)菜單交互1.實現(xiàn)各界面按鈕間的跳轉(zhuǎn)（1）將mainpage移動到所有游戲物體的最下方，并在Inspector視圖中將其顯示出來，將其它界面隱藏。（2）將游戲設(shè)置界面顯示，其它界面如排行榜、角色設(shè)置、音樂設(shè)置及主頁均隱藏。（3）用同樣的方法，為其它的所有按鈕設(shè)置跳轉(zhuǎn)效果。制作步驟提示項目實現(xiàn)02任務(wù)3：實現(xiàn)菜單交互2.實現(xiàn)開始與退出游戲功能以及音量控制的交互效果（1）新建空物體gameController，為其添加gameUIEvent腳本。（2）單擊File菜單下的BuildSettings命令，在彈出的窗口中，將SampleScene和gameScene兩個場景添加到ScenesInBuild中，測試場景。制作步驟提示usingUnityEngine.UI;usingUnityEngine.SceneManagement;publicclassgameUIEvent:MonoBehaviour{publicButtonstartButton;publicButtonexitButton;publicToggletoggle1;publicSliderslider;publicTexttext1;

publicvoidOnStartGameButtonPressed()//設(shè)置開始按鈕的場景跳轉(zhuǎn)功能

{SceneManager.LoadScene("gameScene");//雙引號中的是要跳轉(zhuǎn)到場景的名稱

}publicvoidOnExitGameButtonPressed()//設(shè)置退出按鈕的功能

{Application.Quit();//實現(xiàn)退出游戲功能

}publicvoidOnToggleChanged1()//音樂設(shè)置界面開或關(guān)時Slider滑塊是否可用

{if(toggle1.isOn)eractable=true;//當開關(guān)打開時，Slider滑塊可用

elseeractable=false;//當開關(guān)關(guān)閉時，Slider滑塊不可用

}publicvoidOnSliderValueChanged()//設(shè)置Slider滑塊拖動時文本的顯示數(shù)值

{text1.text=slider.value.ToStr