河北工業(yè)大學(xué)游戲?qū)嶒?

1、計算機游戲程序設(shè)計實驗指導(dǎo)書河北工業(yè)大學(xué)計算機科學(xué)與軟件學(xué)院實驗一GUI 游戲界面的實現(xiàn)一、實驗?zāi)康呐c要求1. 熟悉及掌握GUI 的高級控件，以及用法。2. 掌握GUI 自定義皮膚用法3. 熟悉GUILayout的使用。4. 熟悉2D 貼圖的繪制和幀動畫的實現(xiàn)方法。二、實驗原理及知識點在游戲的整個開發(fā)過程中，游戲界面設(shè)計占據(jù)非常重要的地位。因為游戲啟動后，第一個映入玩家眼簾的就是游戲的UI 界面。 UI 界面主要包括貼圖， 按鈕和高級控件等。通常游戲界面的展現(xiàn)方式有很多種，大多數(shù)都由自定義圖形界面組成。Unity 為開發(fā)者提供了一套非常完善的圖形化界面引擎，它包括常見的游戲窗口、文本框、輸入框

2、、拖動條、按鈕、貼圖框等，無論是做軟件還是做游戲，都可以很方便地使用。另外， Unity 提供了界面自定義皮膚的功能?？丶粌H可以使用默認的皮膚， 還可以自定義皮膚，自定義皮膚不僅可以美化游戲界面，還可以提升游戲品質(zhì)。Unity 游戲界面主要由GUI 完成。 在本章中，我們將使用JavaScript腳本向讀者詳細介紹Unity 中有關(guān) GUI 界面的所有高級控件。2 . GUI 高級控件系統(tǒng)高級UI 控件已經(jīng)成為游戲開發(fā)中不可缺少的一部分，高級界面由系統(tǒng)提供，所以運行效率要遠遠高于低級界面（高級界面為系統(tǒng)實現(xiàn)，低級界面為自己手動實現(xiàn)）。拿按鈕控件來說吧，不使用系統(tǒng)提供的按鈕控件，我們也可以使用

3、低級界面模擬實現(xiàn)按鈕的功能。不過， 低級界面實現(xiàn)的 “按鈕”沒有高級界面實現(xiàn)的效率高，但是低級界面制作的“按鈕”比較靈活，可以任意修改。GUI 高級控件的種類非常繁多，包括標(biāo)簽、按鈕、輸入框和拖動條等。他們可用于任何游戲或軟件的界面研發(fā)。GUI 高級控件的應(yīng)用也非常廣泛，比如網(wǎng)絡(luò)游戲中輸入賬號與密碼的提示框，通關(guān)游戲后上傳游戲積分的按鈕， 創(chuàng)建角色時輸入的角色信息等。下面將分別向讀者介紹GUI 高級控件的相關(guān)用法。Label 控件使用 Label 控件（標(biāo)簽控件），可以在游戲界面中以文本的形式展示出一段字符串信息。使用 Label 控件， 我們不僅可以輸入字符串，還可以貼圖。Button 控件

4、在開發(fā)中，Button 控件（按鈕控件）是十分常見的控件之一，可以用來判斷用戶在程序中的一些操作行為，比如對話框中的“確定”和“取消”按 鈕。按鈕共有3 個基本狀態(tài)組成：未點擊狀態(tài)、擊中狀態(tài)、點擊后狀態(tài)。一般情況下，游戲界面的按鈕只監(jiān)聽“未點擊狀態(tài)”和“點擊后狀態(tài)”。按照展現(xiàn)方式，按鈕可以分為兩種： “普通按鈕”和“圖片按鈕”。普通按鈕為系統(tǒng)默認顯示的按鈕，而圖片按鈕可以設(shè)定按鈕的背景圖案。TextField 控件TextField 控件主要用于監(jiān)聽用戶輸入的信息，其應(yīng)用非常普遍，比如在游戲登陸界面中，玩家輸入用戶名和密碼后，點擊“確認”按鈕判斷其輸入是否正確，或者游戲通關(guān)后填寫勝利者姓名與輸

5、入相關(guān)的游戲信息等。一般情況下，使用（）方法顯示輸入框，該方法的返回值為用戶輸入的字符串信息。使用（）方法，可以將用戶輸入的信息顯示為任意字符串，一般在輸入密碼時將密碼以“* ”的形式顯示。后面的參數(shù)“* ”【 0】用來將輸入的字符串顯示為“* ”。Slider 控件Slider 控件由滑塊和滑動條組成。使用Slider 控件，可以計算出滑塊在滑動過程中占整個滑動條的比例。如果滑動條的整體長度為100，則滑塊滑動的范圍就是0 至 100 。按照展示方式，滑動條可分為兩種：一種為水平滑動條（ HorizontalSlider） ，另一種為垂直滑動條（VerticalSlider） ，它們之間的用

6、法完全相同。在開發(fā)中，我們常使用滑動條來調(diào)節(jié)音量或者顏色等。ScrollView 控件如果游戲界面中的GUI 控件過多，超出了屏幕的顯示范圍，就需要使用ScrollView 控件來完成它的展示效果。ScrollView 控件可設(shè)定一個滾動顯示區(qū)域。如果橫向或縱向的GUI 控件超出了其顯示區(qū)域。視圖下方或者右方將會出現(xiàn)滾動條。在開發(fā)中使用ScrollView 控件的情況非常普遍，比如如果游戲中幫助信息或者關(guān)于信息過長，就可以使用滾動條來查看相關(guān)信息。群組控件（GroupView 控件）群組視圖（GroupView 控件）可將多個視圖全部放在一個群組當(dāng)中。將視圖添加進群組當(dāng)中后，群組中任何視圖的坐

7、標(biāo)都是相對坐標(biāo)，它是相對群組視圖左上角的坐標(biāo)。修改群組視圖坐標(biāo)后，群組中所有視圖的坐標(biāo)都會跟著修改。推薦使用群組視圖來制作游戲界面，因為設(shè)備的屏幕尺寸不同，這樣做可以避免對坐標(biāo)進行多次修改的麻煩。窗口窗口在游戲開發(fā)中并不陌生，所有視圖都需要依賴窗口來顯示，我們可以把窗口理解為視圖的父類。前面我們介紹了各式各樣的游戲視圖，它們都屬于窗口的子類。游戲界面可以由若干個窗口組成，窗口又由若干個視圖組成。創(chuàng)建窗口時需要設(shè)定它的顯示區(qū)域，在窗口中可以添加任意組件，前提是組件的顯示區(qū)域必須在窗口當(dāng)中，否則無法顯示。另外， 窗口中所有控件的坐標(biāo)均采取相對坐標(biāo)，相對窗口左上角的坐標(biāo)。GUI Skin通過之前章節(jié)

8、的學(xué)習(xí)，我想大家已經(jīng)掌握了Unity 大部分的GUI 控件，但是直接使用這些控件開發(fā)游戲還遠遠不夠，因為系統(tǒng)默認的界面實在過于粗糙與單調(diào)。為了讓自己的游戲界面活靈活現(xiàn)，我們需要使用GUI Skin為控件添加一個漂亮的皮膚。3 GUILayout 游戲界面布局游戲界面的制作效果有很多中，有復(fù)雜絢麗的界面，也有簡單明了的界面，而設(shè)計方式的仁者見仁，智者見智。在跨平臺游戲界面開發(fā)中，最麻煩的事就是各個平臺的分辨率不一樣，甚至相同平臺的分辨率也不一樣，這無疑給移植造成非常大的麻煩。因此， 在制作游戲界面時，使用絕對坐標(biāo)值是相當(dāng)危險的一件事。因為如果跨平臺移植的話，分辨率發(fā)生了改變，開發(fā)者就得為其重新設(shè)

9、計坐標(biāo)，這在開發(fā)效率上將大打折扣。為了避免后期對坐標(biāo)重新進行計算，前期制作界面時可以考慮自適應(yīng)屏幕布局，GUI 為開發(fā)者提供了游戲布局的概念，并且在布局的過程中所有的坐標(biāo)點都是對稱坐標(biāo)，所以使用 GUI 游戲界面布局來制作界面將更有效地實現(xiàn)自適應(yīng)屏幕。GUI 與 GUILayout 的區(qū)別通過之前的學(xué)習(xí)，我相信大家對GUI 應(yīng)該并不陌生了，那么GUILayout是什么東西呢它是游戲界面的布局。從命名中就可以看到這兩個東西非常相像，但是在使用過程中兩者還是存在一定區(qū)別的。使用 GUI 繪制控件的時候，需要設(shè)置控件的Rect（）方法， 也就是說需要設(shè)定控件的整體顯示區(qū)域。這樣設(shè)置的控件非常不靈活，

10、因為它的坐標(biāo)以及大小已經(jīng)固定死了，這是如果控件中的內(nèi)容長度發(fā)生改變，就會直接影響展示效果。例如， 在界面中繪制一個按鈕時，按鈕中的顯示文本剛好填充在整個按鈕當(dāng)中，如果動態(tài)加長文本的顯示長度，就會超出按鈕的顯示范圍，使按鈕控件變得不倫不類。我們需要制作控件的自適應(yīng)，所以不能使用Rect（）方法固定控件的顯示區(qū)域，而是需要使用界面布局制作界面。使用GUILayout來制作界面，可以很方便的為我們解決上述難題。使用GUI 制作界面的時候，需要給每一個控件設(shè)定顯示區(qū)域，系統(tǒng)會自動幫我們計算控件的顯示區(qū)域，并且保證他們不會重合。（注意之前介紹的大部分GUI控件都可以使用 GUILayout進行繪制）線性

11、布局線性布局是以線性連續(xù)排列的形式將GUI 控件有規(guī)律的顯示在屏幕中，共分為兩種：一種為水平線性布局，另一種為垂直線性布局。默認的界面是以垂直線性布局的方式來排列。創(chuàng)建水平線性布局時，首先需要使用BeginHorizontal ()方法，然后將控件添加至線性布局當(dāng)中，最后使用EndHorizontal( ) 方法來結(jié)束當(dāng)前線性布局。而如果使用垂直線性布局，則需要使用BeginVertical ()方法與EndVertical ()方法。無論是水平線性布局還是垂直線性布局，都可以使用嵌套的形式來制作游戲界面，也就是說，父類布局中可以繼續(xù)嵌套一個子類布局，子類布局完全受父類布局的限制。善用布局之間

12、的嵌套，可以方便我們制作更為復(fù)雜的游戲界面?？丶撇季峙c布局之間都是以一種線性方式緊密排列的，無法直接修改布局當(dāng)中兩個相連控件的距離，為了解決這個問題，就需要使用空間偏移。在控件中使用Space。方法可以設(shè)置控件之間的偏移量。4 2D 貼圖與幀動畫2D 貼圖好比在屏幕中繪制了一張靜態(tài)圖片，其繪制方式有兩種，第一種由 GUI 繪制， 第二種是將貼圖以材質(zhì)的形式繪制在游戲?qū)ο笾校诒竟?jié)中，我們將著重介紹第一種方式。幀動畫的實現(xiàn)原理就是使用若干張靜態(tài)圖片以一定的時間一幀一幀地在屏幕中切換播放，好比在屏幕中預(yù)先設(shè)定一個現(xiàn)實動畫的區(qū)域。然后將圖片在這個現(xiàn)實區(qū)域中頻繁切換播放。由于繪制的圖片有規(guī)律的切換

13、播放，給人們帶來了視覺的假象，感覺就像播放動畫一樣。繪制貼圖要在屏幕中繪制一張靜態(tài)貼圖，需要使用()方法,該方法可設(shè)定圖片的顯示位置、縮放比例和渲染混合等，該方法的原型如下：其中第一個參數(shù)表示圖片的繪制區(qū)域，第二個參數(shù)表示繪制圖片的圖像， 第 3 個參數(shù)表示圖片的縮放模式，第四個參數(shù)表示的是否開啟圖片混合模式，第五個參數(shù)表示圖片縮放寬高的比例。在Project視圖中將需要加載的圖片存儲在根目錄“Resources”中。需要說明的是，一定要將加載的圖片保存在“Resources”文件夾中，否則程序?qū)o法識別。()方法和()方法的參數(shù)均為資源文件夾的完整路徑，只不過前者返回的事讀取的資源對象，后者

14、返回的是資源對象的數(shù)組。 繪制動畫本節(jié)中我們開始學(xué)習(xí)幀動畫的繪制。首先需要一組幀動畫的資源，在這里我們選擇一套2D 人物四宮格行走圖，在繪制幀動畫之前，我們需要學(xué)習(xí)幀動畫的繪制原理：首先需要在屏幕中設(shè)定一個顯示區(qū)域，然后將動畫中的每一個幀動畫按照固定的時間在這個區(qū)域中按順序切換，繼而實現(xiàn)動畫的播放。這里我們使用程序?qū)赢嬞Y源存儲在動畫數(shù)組當(dāng)中，然后設(shè)定動畫的刷新時間，每次刷新動畫時將在原有的顯示區(qū)域中繪制下一幀圖片，到了最后一幀則從第一幀重新開始，以此類推你。實例人物移動結(jié)合 2D 幀動畫的繪制原理，本節(jié)我們將制作一個游戲?qū)嵗?，效果如圖所示。 在屏幕中共繪制了四個按鈕，通過點擊這四個按鈕來控制

15、主角的移動，并且播放主角在對應(yīng)方向上的行走的動畫。程序需要監(jiān)聽用戶出發(fā)的按鈕來切換動畫方向，比如當(dāng)用戶點擊 “向上”按鈕時，將播放主角向上走的動畫。我們使用x、 y 全局變量來記錄當(dāng)前主角的坐標(biāo)，上下行走為加減x 坐標(biāo)，左右行走為加減y 坐標(biāo)，最后根據(jù)主角的x、 y 坐標(biāo)來繪制但前動畫在屏幕中的位置，從而實現(xiàn)控制主角向四個方向行走。5 本部分內(nèi)容小結(jié)本部分首先介紹了Unity 中 GUI 界面的相關(guān)組件以及自定義皮膚的實現(xiàn)方式， 其中每一個GUI 高級組件都配備了一個小例子供讀者學(xué)習(xí)；然后介紹了 GUI與GUILayout的區(qū)別，已介入和使用GUILayout布局來制作界面；接著介紹了使用GU

16、I 繪制 2D 貼圖與動畫，以及如何控制主角移動的游戲?qū)嵗?；最后通過制作一個游戲主界面，回顧了前面所學(xué)的游戲界面的相關(guān)內(nèi)容。請大家認真閱讀本章內(nèi)容，打好游戲界面設(shè)計的基礎(chǔ)，為后面深入學(xué)習(xí)做好準(zhǔn)備。三、實驗內(nèi)容及步驟1. 熟悉 GUI 高級控件，練習(xí)使用GUI 的高級控件制作23 個游戲界面。2. 練習(xí)使用GUI 自定義皮膚，實現(xiàn)游戲界面的字體，背景顏色等設(shè)置。3. 熟悉GUILayout的使用，聯(lián)系使用GUILayout的水平線性布局和垂直線性布局，并加適當(dāng)偏移。4. 熟悉 2D 貼圖的繪制和幀動畫的實現(xiàn)方法，練習(xí)在界面中繪制靜態(tài)圖片和動畫。四、實驗儀器與軟件1. PC 計算機2. Unity

17、 3D 軟件五、實驗報告要求描述實驗的基本步驟，給出各個步驟中取得的程序運行結(jié)果和源代碼，并進行必要的討論。23個游戲界面。1.熟悉GUI高級控件，練習(xí)使用GUI的高級控件制作 (1)創(chuàng)建腳本，將其拖動到主相機中，使腳本綁定在相機中 (2)在Assert中雙擊腳本，在里面編寫代碼，并保存 . (3)運行游戲，觀察效果。界面一代碼：using UnityEngine;using ;public class login : MonoBehaviour private string user;private string pwd;private string show;0,10);if(new Rect(10,120,150,30),登陸)show=用戶名：+user+密碼：+pwd;界面一效果：用戶名 122494密碼 ZZ登陸用戶名:122494密碼：jiaqu白n攔!界面二代碼：using UnityEngine;using ;public class window : MonoBehaviour float v=;int time=0;練習(xí)使用GUI自