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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17、 3D 軟件五、實(shí)驗(yàn)報(bào)告要求描述實(shí)驗(yàn)的基本步驟，給出各個(gè)步驟中取得的程序運(yùn)行結(jié)果和源代碼，并進(jìn)行必要的討論。23個(gè)游戲界面。1.熟悉GUI高級(jí)控件，練習(xí)使用GUI的高級(jí)控件制作 (1)創(chuàng)建腳本，將其拖動(dòng)到主相機(jī)中，使腳本綁定在相機(jī)中 (2)在Assert中雙擊腳本，在里面編寫代碼，并保存 . (3)運(yùn)行游戲，觀察效果。界面一代碼：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自