游戲UI界面元素布

1、第1課：游戲UI界面元素布課程要點(diǎn)：1 .游戲界面UI制作2 .UI錨點(diǎn)定位1 .游戲界面UI制作游戲界面UI有兩部分組成：游戲UI,結(jié)束UI。新建一個(gè)場景文件，或者復(fù)制上一個(gè)場景，在原有的基礎(chǔ)上進(jìn)行修改制作。2 .UI錨點(diǎn)定位1.Anchors 簡介UI用于界面顯示的組件，組件下方都跟著一個(gè)" Anchors”面板，這個(gè)面板的主要作用就是用于UI定位。它只有一個(gè)Type屬性，常用的是前兩個(gè)屬性：None：不啟用錨點(diǎn)定位；Unified ：相對于父物體進(jìn)行錨點(diǎn)定位；第1課：初始化項(xiàng)目開發(fā)環(huán)境課程要點(diǎn)：1 .初始化項(xiàng)目2 .屏幕自適應(yīng)設(shè)置3 .場景之間跳轉(zhuǎn)1 .初始化項(xiàng)目1>項(xiàng)目

2、創(chuàng)建（創(chuàng)建相應(yīng)的資源管理目錄）； 2>NGUI導(dǎo)入（示例工程部分不要導(dǎo)入）3>相關(guān)項(xiàng)目資源導(dǎo)入（UI圖片，相關(guān)模型資源等）；4>Atlas制作（UI圖片制作成圖集）。2 .屏幕自適應(yīng)設(shè)置1 .顯示分辨率以及比例本套課程以16:9的分辨率進(jìn)行自適應(yīng)處理。比例值是：1920/1080 = 1.7771920*1080 1280*720960*540 720*405640*360 320*1802 .NGUI初步實(shí)現(xiàn)UI自適應(yīng)Game面板創(chuàng)建顯示用的分辨率尺寸；UIRoot組件相關(guān)設(shè)置：1> 縮放類型：Constrained On Mobiles2>內(nèi)容寬度/高度：填寫

3、數(shù)值，勾選Fit3 .場景之間跳轉(zhuǎn)1 .場景的作用場景就是一個(gè)游戲中，不同的游戲環(huán)境。見圖而場景跳轉(zhuǎn)就是在這些環(huán)境之間來回的切換，類似于電視電影的轉(zhuǎn)場鏡頭。現(xiàn)實(shí)生活中也有同樣的“場景概念”，比如：自己的家是一個(gè)“場景”，地鐵上是一個(gè)“場景”，公司又是一個(gè)“場景”2 .腳本相關(guān)步驟弓 I入命名空間：using UnityEngine.SceneManagement;將相關(guān)場景Build Settings的“打包面板”中；使用SceneManager.LoadScene（"場景名稱），實(shí)現(xiàn)場景跳轉(zhuǎn)。步驟：1、新建一個(gè)文件2、在Assets文件夾下面新建8個(gè)文件夾，分別命名，其中Atlas

4、為圖集3、直接將NGUI資源拖入到asset文件夾里面即可， 發(fā)現(xiàn)菜單欄出現(xiàn)了 NGUI就成功 安裝了。4、如果發(fā)現(xiàn)錯(cuò)誤，則在打開NGUI menu腳本，將下面兩句代碼注釋，保存腳本，錯(cuò)誤就消失了。/MenuItem("NGUI/", false, 11)/static void Breaker () 5、在文件夾Textures,再新建一個(gè)文彳夾，命名為 UI,選中下面的圖片加d沁儼igMia.BL尸g現(xiàn)dig 1 p叫ic.Qritrnl_ll.pngA討 art p*iqloD-phgl用川pna直接拖入到UI文件夾中,rofcj'fe.pnglHiretii

5、TV1完成圖片的導(dǎo)入操作。產(chǎn) g6、在Assets文件夾下面新建1個(gè)文件夾，命名為Fonts,將字體拖入，完成字體 的導(dǎo)入。7、回到UI文件夾，按住shift鍵，框選所有的圖集，單擊右鍵，選中Open AtlasMaker。，im ;i| iFi看啟第0 «fo U* 咐 hHHMii - OJjMllIly 4>* «, M»C A LhlWH ULllHknlj-i*.Irw*xu14 T.pILM，S< iHprd:TaErv TwniHMEIM W t0m鳴巾|樸I，I|MFmmI 1mmFa«5 tfrb ggd>niF Ti

6、Mt-Sitin ErfBifriW rn»di ”P N1.Jf1A”i kie*f單擊creat創(chuàng)建一個(gè)圖集。保存在 Atlas文件夾下，命名為 GameUL這樣一個(gè)圖集就制作完畢8、在game窗口下單擊9、倉I建 2D UI與聞3 UboflNt. 1m AlehlftL出1,%訂前片JP EpnuAit»SIWtlrDMSd 用tAit-Stirlt-WAnc+iwHJwlvzGridTobk205$U 5 2*.帝 ，:1orwn1* I rugM-sod11、調(diào)整攝像機(jī)的大小Vinriow HEjf H+fW .Mat dna. NnbFiLiv M >E

7、4S B wMUritfr Arrsordi -B 3J K, MhilA i.hi.x'SUidtfM* DXlln m jid -i1Hmi Canara。一如11.1.111 Pi上力5 1Ai mM'i心 JU g一41 wenmvu 4-ta- TI i- ih i| I ari"l!|里 InaaLlUUH 二 dyrsMir Ugm ulTriihh“EEhiy UPMlW UMid|n UhA diaM dt£j占 M1 P <* * rb 占 *i|iCvrar«iJldrGChM K*UlBrHvd ma4+taiUir

8、UUd UFMit1 uuja>d UI*«H| UlftpiFLorl UlfhiairMflHi;AU&3 5-3U.TU b£«<4lhhir 日厘d*rRifr la-J4niSUi|.j JHMfcri1"TfCBMli «'Tlf 小4 新* "jj. «, TruriilarwJ ->, A i，B' 41 d淖/中T flE P: i 9 并g1I 4 ”必£ 4 4MEI»fi UI4i!H ItsrHAFq.與“CsEWajJHtHmyiH，中

9、11匕3C4H4<VTun»1a»gvt 1TM； jhvgm o>h a -c>HM r«v«i 4htel，""FF*qH，. r- a E” lirEg4 TKi TUb.a, .Hi* -w+ -1 Mh，dJr« ,» »，Nhb r» e w, V1*> bn ¥； ar”？ ，n cithi Vi| q <m« T帆 JriVril r1F±t i FdSri，卡T J14噴田UI.I 立*L1JJ1d>ui t口

10、fp rag419mis12、選擇540X960的分辨率13、設(shè)置UI組件選中UI root,選擇右邊參數(shù)設(shè)置Tl'.Sfrll 的界白哽用E y haui-| 他2 I bF“1* I將酶岫 i.« ，url u* I d*ih”T L#v bei-! rj CirlBam Elt33l fclH-br-LM Kj*看« Unt ftrrsL-.5甘 02 a PC M*. & L iw &lr(J«ky7 口X1L* bdit Aiteli N»&Ul Midw NtlpA11K1EKI-TN«e-4 lII

11、 ii* r>j UL *4 dv “+ ” j Cib*vA I CM liUEna ThfhMa -ImH.Hi： n I Hl M- XiM'-K- L«h FVjW fal bML Tri lilt ad i>| I mAmk hl Th n»iiaaa , Ehp .jmiXfzJ03-“ t V 福：*!«&3rt Cirtlv0*iZlQMuiif34心口制iume唱|出唱.備中4寸寸布“癡<T-«dd-nq*Sidr hcrjir padi urtirt測試下場景 回到sence界面，選中Ulroot,創(chuàng)

12、建sprite圖片。Ctrl+D ,更改位置 riqp 或 口口" * Aa&dU T*sEj.r*d 41K «i ir-MWp 4 4i ipne. A»rt» &"THFlwb ll* MffiUE;TiTiVBn?Brm回到game窗口，選中幾種不同的分辨率，會(huì)發(fā)現(xiàn) 5個(gè)圖片的位置不會(huì)變實(shí)現(xiàn)場景之間的跳轉(zhuǎn)。1、 ctrl+N ； ctrl+s ,另存為02-1,當(dāng)前有兩個(gè)場景。2、 在02_1場景里面，創(chuàng)建一個(gè)cube物體，保存好3、 在script創(chuàng)建一個(gè)腳本sencejump腳本4、 將腳本拖到場景02的中間圖片上5

13、、6、代碼:using UnityEngine;using System.Collections;using UnityEngine.SceneManagement;/弓I入命名空間.public class SceneJump : MonoBehaviour void Update () if(Input .GetKeyDown(KeyCode.Space)SceneManager.LoadScene('02_1");注意的是要將02和02_1都拖入到Build Settings的“打包面板”到此為止，就可以按住空格鍵實(shí)現(xiàn)場景跳轉(zhuǎn)了。第2課：游戲UI界面元素布局上課程要點(diǎn)：

14、1 .UI元素制作比例2 .開始界面UI制作1 .UI元素制作比例在公司實(shí)際項(xiàng)目的開發(fā)過程中，美術(shù)相關(guān)人員(UI設(shè)計(jì))會(huì)給出參考圖，以及 切分好的UI素材圖片。在美術(shù)人員設(shè)計(jì)UI界面的時(shí)候，是有一個(gè)整體的參考 尺寸的。我們在Unity中制作UI的時(shí)候，就要按該參考圖的尺寸定義原始的場 景分辨率尺寸。本套案例的原始制作比例是1920*1080。2 .開始界面UI制作我們是可以根據(jù)UI將游戲分割成不同的場景來分開制作，然后使用場景跳轉(zhuǎn)功能最終將游戲串聯(lián)起來。3 .UI場景制作這個(gè)案例，根據(jù)UI可以分割成兩個(gè)場景：開始場景，游戲場景。本節(jié)課程制作開始場景(Start.unity)。開始場景有兩個(gè)UI

15、界面組成：開始UI,設(shè)置UL步驟：1、可以根據(jù)上節(jié)課的案例將場景更改2、打開02場景，選擇左邊的一個(gè)sprite,單擊右邊的r 回 H UI Sprite ( Seri pt)口 d ! Edit |里面的Sp rite的圖片就可以了細(xì)節(jié)：1、涉及到屏幕比例時(shí)，需要更改這兩個(gè)要匹配,則圖片和文字要適2、若屏幕比例為當(dāng)縮小，否則圖標(biāo)顯示非常大。如:a）縮放后，縮放的右邊下拉框選擇（或者其他兩種類型），接著縮放一定的比例b）當(dāng)然也可以選擇物體，利用接縮放，或者直接輸入大小最后效果如下:比較符合屏幕的實(shí)際需要。（比如在手機(jī)上運(yùn)行）c）如果屏幕的比例比較大，比如1920*1080。只要使用原來的大小即

16、可（即圖片可以適當(dāng)大些）3、移動(dòng)圖片時(shí)使用移動(dòng)工具進(jìn)行移動(dòng)4、選擇該圖片，切換到縮放工具，單擊右鍵，選擇創(chuàng)建lable的child。5、選擇lable,單擊右邊的font旁邊的設(shè)置，選擇導(dǎo)入的字體。制作開始場景1、將文件命名為start2、打開2D UI2、將兩種比例都調(diào)整為1920*10803、選擇縮放工具，單擊右鍵添加一個(gè)spritesnap4、將圖片移動(dòng)到左上角，單擊此時(shí)的圖片為正式的原始尺寸5、選擇,選中剛才的星星圖片，選中l(wèi)able-child6、將文字更改大小，左對齊，去掉漸變，更改顏色（左對齊操作）7、用同樣的方法，制作下面的場景。即同樣選中 UI Root,利用縮放工具，右鍵創(chuàng)

17、建sprit ,選擇聲音圖標(biāo)的圖片。，單擊 snap。更名為Audio聲音圖標(biāo)后期會(huì)是一個(gè)按鈕。8、重復(fù)第7步驟，完成下面圖標(biāo)的添加。（也可以利用ctrl+D通過復(fù)制相同的圖標(biāo)，進(jìn)行修改）9、選中UI Root,利用縮放工具，右鍵創(chuàng)建Lable ,同樣去掉漸變，更改顏色,文字內(nèi)容。為Your Best Score”10、選擇Your Best Score”的able,創(chuàng)建子標(biāo)簽,11、最終結(jié)果如下:12、 重復(fù)第9步驟，創(chuàng)建游戲播放標(biāo)簽 TAP TO PLAY13,設(shè)置背景色，選擇 Main Camera,將類型改為solid colorM Uwd中- aWLiiHiy 加, K. Mk At

18、 Liiuj iLaiCriuW1 « DJi' I MI事om Nii UI 徜而8« IH*K餐fcM A>1立母到此為止完成開始界面的設(shè)置第二個(gè)界面設(shè)置界面的制作制作前，先將第一個(gè)界面進(jìn)行整理，選中 UIRoot,右鍵Panel （面板，容器）將所有的物體（除了 camer外）移入Panel中，就可以一次性移動(dòng)物體了，將Panel 命名為 StartPanel。3、選中UI Root,利用縮放工具，右鍵創(chuàng)建一個(gè)新的Panel,命名為SetingsPanel將StartPanel隱藏,去掉前面的勾。4、選中SetingsPanel,利用縮放工具，右鍵創(chuàng)建一

19、個(gè) Sprite,圖片更改為bg,并更改透明度5、將半透明圖片拉大，超過邊框一些，命名為 Mask6、再次選中SetingsPanel,利用縮放工具，右鍵創(chuàng)建一個(gè)Sprite,圖片更改為 bg,更改大小后，再細(xì)節(jié)調(diào)整調(diào)整后，大家發(fā)現(xiàn)圖片邊緣出現(xiàn)了鋸齒解決的方法是給圖片進(jìn)行九宮劃分O選中圖片，單擊右邊的edit更改Border全部為1,增加1像素，類型改為Sliced （九宮布局）此時(shí)，會(huì)發(fā)現(xiàn)邊緣鋸齒已經(jīng)解決。7、選中剛才的Sprit,右鍵創(chuàng)建一個(gè)child的sprit,更改為紅色，并調(diào)整大小和位置。8、選中紅色的Sprit,右鍵創(chuàng)建一個(gè)child的lable,去掉漸變，更改內(nèi)容9、選中紅色的S

20、prit,右鍵創(chuàng)建一個(gè)child的Sprit,更改為X圖片10、選中大的白色的Sprit,右鍵創(chuàng)建一個(gè)child的Sprit。更改為聲音圖片11、選中聲音圖標(biāo)，右鍵創(chuàng)建一個(gè)child的lable,去掉漸變，更改內(nèi)容12、將SOUND按住ctrl+D復(fù)制一份，更改內(nèi)容注意：使用UIEventListener為一個(gè)按鈕綁定點(diǎn)擊事件時(shí)，綁定的方法名不要與UIEventListener里存在的方法同名NGUI的UI布局1 .商城界面UI布局在游戲的開始界面的中間部分，制作一個(gè)“飛機(jī)購買商城”，使用左右滑動(dòng)的方式切換顯示商城內(nèi)的飛機(jī)商品。Layer：層，Unity中的所有的物品都是可以指定一個(gè)所屬的層的

21、。NGUI屬于層的第8級(jí)。2 .本地靜態(tài)數(shù)據(jù)簡介本地靜態(tài)數(shù)據(jù)，也叫本地配置數(shù)據(jù)。主要用于存儲(chǔ)游戲中的一些固定的， 且需要重復(fù)使用的數(shù)據(jù)信息，降低與服務(wù)器 之間的數(shù)據(jù)傳輸量。比如：MMORPG手游中的背包系統(tǒng)中的成百上千的裝備，物品，碎片，晶石每一個(gè)背包中獨(dú)立的物品都會(huì)對應(yīng)很多數(shù)據(jù)：Id,圖片，名字，簡介，類別，數(shù)量如果每次聯(lián)網(wǎng)都需要服務(wù)器將你背包中的所有物品的信息發(fā)送到客戶端，這個(gè)數(shù)據(jù)量是很大的，比較浪費(fèi)流量，且性能不高。所以就引出了本地靜態(tài)數(shù)據(jù)，重復(fù)不變的一直存儲(chǔ)在本地客戶端， 然后客戶端 登錄的時(shí)候，只需要請求很少的數(shù)據(jù)，然后和本地的靜態(tài)數(shù)據(jù)組合，生成背包內(nèi)所有的物品步驟：1、單擊Star

22、tPanel,單擊右鍵，creat- » Sprit,命名為 Speed2、接著選中Speed,右鍵創(chuàng)建一個(gè)child的lable,命名為Speed_Num完成了提速的界面設(shè)計(jì)3、同理，按住ctrl+D ,復(fù)制一個(gè)，更改名字為 Rotate和Rotate_Num ,圖片及文字，便完成了旋轉(zhuǎn)的界面設(shè)計(jì)。4、再次單擊StartPanel,單擊右鍵，creat-Sprit,命名為BuyButton ,5、接著選中BuyButton ,右鍵創(chuàng)建一個(gè)child的Sprit,命名為Bg。圖片改為bg,改變透明度，類型改為九宮格,UHfr.妣*Mil A Ll >uX ”制心仁6、接著選中B

23、uyButton ,右鍵創(chuàng)建一個(gè)childMable,命名為 Price,輸入5000.7、接著選中BuyButton ,右鍵創(chuàng)建一個(gè)child的Sprit,選擇星星圖片。選擇BuyButton ,去掉UISprite前面的勾。08、現(xiàn)在要在2D的相機(jī)里面看到3D的物體，如何實(shí)現(xiàn)呢選擇StartPanel,右鍵創(chuàng)建一個(gè)Sprite,命名為Model。導(dǎo)入飛機(jī)模型，將Materials再重新賦予下圖片，將Prefabs下面的Ship_5直接拖至UModel里面，賦予材質(zhì)（可以新建一個(gè)material ,進(jìn)行材質(zhì)賦予）。刪除里面的3個(gè)特效。飛機(jī)沿X軸旋轉(zhuǎn)-90度選才M Model ,隱藏但是大家會(huì)

24、發(fā)現(xiàn)飛機(jī)在game窗口，還是沒有出現(xiàn)如何解決呢？（前面7個(gè)是Layer：層，Unity中的所有的物品都是可以指定一個(gè)所屬的層的Unity內(nèi)置的，灰色的。）NGUI屬于層的第8級(jí)接著將選擇Ship_5,選擇NGUI層，接著放大飛機(jī)為5倍，在game窗口便可以看見飛機(jī)模型了。切換到3D窗口，往前或者往后移動(dòng)，觀察飛機(jī)模型的現(xiàn)實(shí)我的案例是往前移動(dòng)，可以看到飛機(jī)模型便清晰了很多。1、單擊 StartPanel,單擊右鍵，creat-» Sprit,命名為 Item。2、選擇，拖入到Item里面，成為Item的子物體將Item的隱藏到此為止，飛機(jī)商品的制作已經(jīng)完成接下來設(shè)置左右移動(dòng)鍵步驟：3、

25、單擊 StartPanel,單擊右鍵，creat-Sprit,命名為 Shop。4、選擇Shop,右鍵再創(chuàng)建一個(gè) Sprit將其移動(dòng)到飛機(jī)的左側(cè)，命名為 LeftButton。按住CTRL+D,復(fù)制一份，移動(dòng)到右邊，命名為 RightButton將整個(gè)Item拖入到Shop里面變成其子物體最后將Shop的隱藏到此為止，商城模塊的UI已經(jīng)制作完畢。商城功能之XML讀取操作課程要點(diǎn)：1 .XML簡介2 .Unity 操作 XML1 .XML簡介1什么是XML?XML:可擴(kuò)展標(biāo)記語言。XML類似于HTML,都是標(biāo)簽（標(biāo)記）語言。在軟件開發(fā)的各個(gè)領(lǐng)域（Web, Android , IOS, Game,

26、 EXE.）都可以看到XML文件的身影。XML的作用是用于傳輸和存儲(chǔ)數(shù)據(jù)。XML本身就是一個(gè)存儲(chǔ)的文本。2 .XML的語法結(jié)構(gòu)XML文檔的語法結(jié)構(gòu)最終是一個(gè)樹狀結(jié)構(gòu)。主要組成部分：根元素，子元素，屬性，文本。3 .XML注意事項(xiàng)XML標(biāo)簽對大小寫很敏感；XML標(biāo)簽必須正確的嵌套；XML標(biāo)簽中的屬性值必須加（雙）引號(hào)；XML文檔必須有根元素。Unity 操作 XML1.讀取XML中的數(shù)據(jù)并展示出來< 1>實(shí)例化一個(gè)XML文檔操作對象；< 2>使用XML對象加載XML;< 3>獲取根節(jié)點(diǎn)；< 4>獲取根節(jié)點(diǎn)下所有子節(jié)點(diǎn)；< 5>遍歷"輸出。using UnityEngine;using System.Collect