unity界面設計教案

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

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

3、是一個游戲中，不同的游戲環(huán)境。 見圖 而場景跳轉就是在這些環(huán)境之間來回的切換，類似于電視電影的轉場鏡頭?，F(xiàn)實生活中也有同樣的“場景概念”，比如：自己的家是一個“場景”，地鐵上是一個“場景”，公司又是一個“場景”。. 腳本相關步驟引入命名空間： using UnityEngine.SceneManagement;將相關場景Build Settings 的“打包面板”中；使用SceneManager.LoadScene(“場景名稱”)，實現(xiàn)場景跳轉。步驟 ： 1、新建一個文件2、在Assets 文件夾下面新建8 個文件夾，分別命名，其中 Atlas 為圖集。3、直接將NGUI資源拖入到asset文

4、件夾里面即可，發(fā)現(xiàn)菜單欄出現(xiàn)了NGUI就成功安裝了。4、如果發(fā)現(xiàn)錯誤，則在打開 NGUImenu 腳本，將下面兩句代碼注釋，保存腳本，錯誤就消失了。/MenuItem(NGUI/, false, 11)/static void Breaker () 5、在文件夾Textures ，再新建一個文件夾，命名為 UI ，選中下面的圖片st司匚pngK啜audiooff.ipngaudia=口 H.pnglepnglijgchpng導彈逼1tW-P09ightpngnotfltepngcorttral_2_pngCDiWOll.pHstart png直接拖入到UI文件夾中，完成圖片的導入操作。6、在A

5、ssets文件夾下面新建1個文件夾，命名為Fonts ,將字體拖入，完成字體的導7、回到UI文件夾，按住shift鍵，框選所有的圖集，單擊右鍵，選中OpenAtlas Maker。 單擊creat創(chuàng)建一個圖集。保存在Atlas文件夾下，命名為GameUI這樣一個圖集就制 作完畢。8、在game窗口下單擊9、創(chuàng)建2D UI10、切換到2D窗口。11、調整攝像機的大小12、選擇540X960的分辨率。13、設置UI組件選中UI root ,選擇右邊參數(shù)設置測試下場景回到sence界面，選中UIroot ,創(chuàng)建sprite 圖片。Ctrl+D ,更改位置回到game窗口，選中幾種不同白分辨率，會發(fā)現(xiàn)

6、 5個圖片的位置不會變。實現(xiàn)場景之間的跳轉。*3 021、ctrl+N ; ctrl+s ,另存為電口?，當前有兩個場景在02_1場景里面，創(chuàng)建一個cube物體，保存好在script 創(chuàng)建一個腳本sencejump腳本將腳本拖到場景02的中間圖片上。代碼：using UnityEngine;using System.Collections;using UnityEngine.SceneManagement; / 弓I入命名空間.public class SceneJump : MonoBehaviour void Update () if (Input .GetKeyDown( KeyCode

7、.Space)SceneManager .LoadScene( 02_1);一注意的是要將02和02_1都拖入到Build Settings 的“打包面板”。到此為止，就可以按住空格鍵實現(xiàn)場景跳轉了。第2課：游戲UI界面元素布局上課程要點：.UI元素制作比例.開始界面UI制作.UI元素制作比例在公司實際項目的開發(fā)過程中，美術相關人員(UI設計)會給出參考圖，以及 切分好的UI素材圖片。在美術人員設計UI界面的時候，是有一個整體的參考 尺寸的。我們在Unity中制作UI的時候，就要按該參考圖的尺寸定義原始的場 景分辨率尺寸。本套案例的原始制作比例是1920*1080。.開始界面UI制作我們是可以

8、根據(jù)UI將游戲分割成不同的場景來分開制作，然后使 用場景跳轉功能最終將游戲串聯(lián)起來。.UI場景制作這個案例，根據(jù)UI可以分割成兩個場景：開始場景，游戲場景。本節(jié)課程制作開始場景(Start.unity )。開始場景有兩個UI界面組成：開始UI,設置UI。步驟：1、可以根據(jù)上節(jié)課的案例將場景更改2、打開02場景，選擇左邊的一個sprite ,單擊右邊的Atla r j GameUIl (UIAtlas) o Edit | JSpnte t strEdit I _, Sprite 一_ 一一 ,里面的-,選擇需要的圖片就可以了細節(jié)：1、涉及到屏幕比例時，需要更改Content WidthConte

9、nt Height1080Fit 1 司Frt g1920，畫 UI Root (Script)匚 *Scaling Style I Can strained On Mobik : |C GameB (1030 x1920)lution 174x309這兩個要匹配。I國超UI Root (Script) Q *Scaling Style| Ccnin2d On Ma- i Content Width 540 Fit |V CntentHei9ht國口it畫 II,則圖片和文字要適當縮小，否則圖標顯示非常大。如:a）縮放后，* _dget_縮放的刖時5右邊下拉框選擇（或者其他兩種類型），接著縮放

10、一定的比例b）當然也可以選擇物體，利用直接縮放，或者直接輸入大小最后效果如下：比較符合屏幕的實際需要。（比如在手機上運行）c）如果屏幕的比例比較大，比如 1920*1080。只要使用原來的大小即可（即圖片 可以適當大些）3、移動圖片時使用移動工具 K3進行移動。4、選擇該圖片，切換到縮放工具工U ,單擊右鍵，選擇創(chuàng)建lable的child。5、選擇lable ,單擊右邊的font旁邊的設置，選擇導入的字體。制作開始場景1、將文件命名為start2、打開2D UI2、將兩種比例都調整為1920*1080。3、選擇縮放工具，單擊右鍵添加一個sprite4、將圖片移動到左上角，單擊 正式的原始尺寸。

11、 Widget votepthsnap,此時的圖片為5、選擇,選中剛才的星星圖片，選中l(wèi)able-child6、將文字更改大小，左對齊，去掉漸變，更改顏色。（左對齊操作）7、用同樣的方法，制作下面的場景。即同樣選中 UI Root ,利用縮放工具，右鍵創(chuàng)建 sprit ,選擇聲音圖標的圖片。，單擊 snap。更名為Audio聲音圖標后期會是一個按鈕。8、重復第7步驟，完成下面圖標的添加。（也可以利用 ctrl+D通過復制相同的圖標， 進行修改）9、選中UI Root,利用縮放工具，右鍵創(chuàng)建 Lable ,同樣去掉漸變，更改顏色，文字 內容。為 “Your Best Score ”選擇 “You

12、r Best Score ” 的 lable ,創(chuàng)建子標簽，最終結果如下：重復第9步驟，創(chuàng)建游戲播放標簽 TAP TO PLAY13,設置背景色，選擇 Main Camera,將類型改為solid color到此為止完成開始界面的設置第二個界面設置界面的制作制作前，先將第一個界面進行整理，選中 UIRoot,右鍵Panel （面板，容器）將所有的物體（除了 camer外）移入Panel中，就可以一次性移動物體了，將 Panel 命名為 StartPanel 。3、選中UI Root ,利用縮放工具，右鍵創(chuàng)建一個新的 Panel,命名為SetingsPanel。 將StartPanel隱藏，去掉

13、前面的勾。4、選中SetingsPanel ,利用縮放工具，右鍵創(chuàng)建一個 Sprite ,圖片更改為bg,并更 改透明度。5、將半透明圖片拉大，超過邊框一些，命名為 Mas%6、再次選中SetingsPanel ,利用縮放工具，右鍵創(chuàng)建一個 Sprite ,圖片更改為bg, 更改大小后，再細節(jié)調整。調整后，大家發(fā)現(xiàn)圖片邊緣出現(xiàn)了鋸齒解決的方法是給圖片進行九宮劃分。選中圖片，單擊右邊的 edit更改 Border 全部為 1，增加 1 像素，類型改為 Sliced （九宮布局）。此時，會發(fā)現(xiàn)邊緣鋸齒已經(jīng)解決。選中剛才的Sprit，右鍵創(chuàng)建一個child的 sprit，更改為紅色，并調整大小和位置

14、。選中紅色的Sprit，右鍵創(chuàng)建一個child的 lable，去掉漸變，更改內容。選中紅色的Sprit，右鍵創(chuàng)建一個child的 Sprit，更改為X 圖片。10、選中大的白色的 Sprit ，右鍵創(chuàng)建一個child 的 Sprit 。更改為聲音圖片。11、選中 聲音圖標 ，右鍵創(chuàng)建一個child 的 lable ，去掉漸變，更改內容12、將SOUND住ctrl+D 復制一份，更改內容。注意： 使用 UIEventListener 為一個按鈕綁定點擊事件時，綁定的方法名不要與UIEventListener 里存在的方法同名NGUI的UI布局商城界面 UI 布局在游戲的開始界面的中間部分，制作一

15、個“飛機購買商城”，使用左右滑動的方式切換顯示商城內的飛機商品。Layer ：層， Unity 中的所有的物品都是可以指定一個所屬的層的。NGUI 屬于層的第8 級。本地靜態(tài)數(shù)據(jù)簡介本地靜態(tài)數(shù)據(jù)，也叫本地配置數(shù)據(jù)。主要用于存儲游戲中的一些固定的，且需要重復使用的數(shù)據(jù)信息，降低與服務器之間的數(shù)據(jù)傳輸量。比如：MMORPG游中的背包系統(tǒng)中的成百上千的裝備,物品,碎片,晶石每一個背包中獨立的物品都會對應很多數(shù)據(jù)：Id ，圖片，名字，簡介， 類別 ， 數(shù)量 如果每次聯(lián)網(wǎng)都需要服務器將你背包中的所有物品的信息發(fā)送到客戶端， 這個數(shù)據(jù)量是很大的，比較浪費流量，且性能不高。所以就引出了本地靜態(tài)數(shù)據(jù)，重復不變

16、的一直存儲在本地客戶端，然后客戶端登錄的時候，只需要請求很少的數(shù)據(jù)，然后和本地的靜態(tài)數(shù)據(jù)組合，生成背包內所有的物品。步驟：1、單擊 StartPanel ，單擊右鍵， creat- Sprit ，命名為 Speed2、接著選中Speed,右鍵創(chuàng)建一個child 的lable ,命名為Speed_Num完成了提速的界面設計3、同理，按住ctrl+D ,復制一個，更改名字為 Rotate和Rotate_Num,圖片及文字, 便完成了旋轉的界面設計。4、再次單擊 StartPanel ,單擊右鍵，creat- Sprit ,命名為 BuyButton ,5、接著選中BuyButton ,右鍵創(chuàng)建一個

17、child 的Sprit ,命名為Bg。圖片改為bg,改變透明度，類型改為九宮格，6、接著選中BuyButton ,右鍵創(chuàng)建一個child 的lable ,命名為Price ,輸入5000.7、接著選中BuyButton ,右鍵創(chuàng)建一個child 的Sprit ,選擇星星圖片。選擇BuyButton ,去掉UI Sprite 前面的勾。E I hiiiy rmd m.giiY .舊 PC. Mflr 內 I inux 53血初-M HcmiLw Spud / P!dLMi BurhEDMlPTiCW S;rrtHA* A*|, r aRWOrHMK. * Al Ai MEviiAlBfl片如

18、Funp 一 Mcindi樸 MMid 4f .8、現(xiàn)在要在2D勺相機里面看到3D的物體，如何實現(xiàn)呢選擇StartPanel ,右鍵創(chuàng)建一個Sprite ,命名為Model。導入飛機模型，將Materials再重新賦予下圖片，將Prefabs下面的Ship_5直接拖至U Model里面，賦予材質（可以新建一個material ,進行材質賦予）。刪除里面的3個特效。飛機沿X軸旋轉-90度 _ij n 1 產(chǎn).匚 i卜叵| 匚 UI Sprite (Seript)| Ml- | GameUU (UIAt| G選才 Model,隱藏 叵亟二Z)但是大家會發(fā)現(xiàn)飛機在game0 口，還是沒有出現(xiàn)180導

19、彈追擊Your Best Score1805000TAP TO PLAYQ如何解決呢？Layer：層，Unity中的所有的物品都是可以指定一個所屬的層的。（前面7個是Unity內置的，灰色的。）NGUI屬于層的第8級。接著將選擇Ship_5,選擇NGUI層，接著放大飛機為5倍，在game窗口便可以看見飛 機模型了。切換到3D窗口，往前或者往后移動，觀察飛機模型的現(xiàn)實。我的案例是往前移動，可以看到飛機模型便清晰了很多。1、單擊 StartPanel ,單擊右鍵，creat- Sprit ,命名為 Item。2、選擇Item,拖入到Item里面，成為Item的子物體。SpeedRotate將Ite

20、m的BuyB jtton Model，匚 UI Sprite (Script)口科| Atlas/GameUIl UIAt0 (Edit | Sprite /EditI Simole*|Tvor到此為止，飛機商品的制作已經(jīng)完成接下來設置左右移動鍵步驟：3、單擊 StartPanel ,單擊右鍵，creat- Sprit ,命名為 Shopb4、選擇Shop,右鍵再創(chuàng)建一個 Sprit 將其移動到飛機的左側，命名為 LeftButton。按住CTRL+D復制一份，移動到右邊，命名為 RightButton 將整個Item拖入到Shop里面變成其子物體。屈匚 ui Sprite (Script)Q

21、 由N Ag而雨 0 pidiH| Sprite 11.Edit最后將Shop的I. I隱藏。到此為止，商城模塊的UI已經(jīng)制作完畢。商城功能之XML讀取操作課程要點：.XML簡介.Unity 操作 XML.XML簡介.什么是XM12XML可擴展標記語言。XML類似于HTML都是標簽(標記)語言。在軟件開發(fā)的各個領域(Web Android , IOS, Game EXE)都可以看到XML文件的身影。XML的作用是用于傳輸和存儲數(shù)據(jù)。XML本身就是一個存儲的文本。.XML的語法結構XML文檔的語法結構最終是一個樹狀結構。主要組成部分：根元素，子元素，屬性，文本。3.XML注意事項XML標簽對大小

22、寫很敏感；XML標簽必須正確的嵌套；XML標簽中的屬性值必須加(雙)引號；XML文檔必須有根元素。Unity 操作 XML1.讀取XML中的數(shù)據(jù)并展示出來實例化一個XML文檔操作對象；用XML對象加載XML獲取根節(jié)點；獲取根節(jié)點下所有子節(jié)點；遍歷輸出。using UnityEngine;using System.Collections;using System.Xml; 引入XM哪作相關的命名空間./ / XML 操作演示 ./ public class XMLDemo : MonoBehaviour / 定義一個字段, 存儲 xml 的路徑 .private string xmlPath =

23、 Assets/Datas/web.xml;void Start () ReadXMLByPath(xmlPath);/ / 通過路徑讀取XML中的數(shù)據(jù)進行顯示./ / xml 的路徑地址private void ReadXMLByPath(string path)/實例化一個XMLt檔操彳售(寸象.XmlDocument doc = new XmlDocument();/使用XML寸象力口載XML.doc.Load(path);/ 獲取根節(jié)點 .XmlNode root = doc.SelectSingleNode(Web);/ 獲取根節(jié)點下所有子節(jié)點 .XmlNodeList nodeLi

24、st = root.ChildNodes;/ 遍歷輸出 .foreach(XmlNode node in nodeList)/取屬性.int id = int.Parse(node.Attributesid.Value);/取文本.string name = node.ChildNodes0.InnerText;string url = node.ChildNodes1.InnerText;Debug.Log(id + - + name + - + url); 實體類存儲創(chuàng)建商品 Item 實體類，并將XML 中的數(shù)據(jù)存儲到 Item 中，最終封裝為一個List數(shù)據(jù)集合，這個List的結構合X

25、ML文檔的結構是完全一樣的。唯一的區(qū)別就是一個存儲在硬盤中，而一個存儲在內存中。步驟將ShopData.XML拖入到Datas文件夾里面。在script新建一個文件夾為Shop,新建一個ShopData腳本，將其掛載到MainCamera 上。using UnityEngine;using System.Collections;using / 為 List 集合，引入命名空間。using System.Xml;/ / 商城功能模塊數(shù)據(jù)操作./ public class ShopData : MonoBehaviour private string xmlPath = Assets/Datas/

26、ShopData.xml/用于存儲XML數(shù)據(jù)的實體集合，定義List集合，并實例化。 private List shopList = new List ();void Start () ReadXmlByPath(xmlPath);1DebugListInfo();/ /通過指定的路徑讀取XML文檔./ / xml 的路徑 private void ReadXmlByPath( string path)XmlDocument doc = new XmlDocument ();/ 將對象實例化。doc.Load(path);/ 引用該對象的 Load 方法，將路徑載入。XmlNode root

27、= doc.SelectSingleNode( Shop );/ 獲取根節(jié)點。XmlNodeList nodeList = root.ChildNodes;/獲取根節(jié)點下所有子節(jié)點foreach ( XmlNode node in nodeList)/ 遍歷 輸出0.InnerText;1.InnerText;2.InnerText;3.InnerText;stringspeed = node.ChildNodesstringrotate = node.ChildNodesstringmodel = node.ChildNodesstringprice = node.ChildNodes/ 遍

28、歷完畢后, 直接打印輸出 ./string info = string.Format(speed:0, rotate:1, m odel:2, price:3, speed, rotate, model, price);/Debug.Log(info);1/ 遍歷完畢后, 存儲到 List 實體集合中 .2 替換 1 后， 就把1 中的數(shù)據(jù)輸出到工作臺 變成 存儲到 List 實體集合中 。ShopItem item = new ShopItem (speed, rotate, model, price);/ 實例化 itemshopList.Add(item);/調用 Add 方法將 ite

29、m 加入到 List 集合中去。/ / 測試函數(shù) , 測試 List 中的數(shù)據(jù) ./ private void DebugListInfo() for ( int i =0; i shopList.Count; i+)Debug.Log(shopListi. ToString ();/ 調用 ShopItem 腳本的 public override string ToString() 。ShopItem 腳本：該腳本不用掛載到任何物體里面。/ / 商城物品 Item 實體類 ./ public class ShopItem privatestringspeed;privatestringrot

30、ate;privatestringmodel;privatestringprice;/ 面向對象里面的構造public ShopItem( string speed, string rotate, string model, stri ng price)/ 賦值this .speed = speed;this .rotate = rotate;this .model = model;this .price = price; / 封裝訪問屬性。public string Speedget return speed; set speed = value; public string Rotateg

31、et return rotate; set rotate = value; public string Modelget return model; set model = value; public string Priceget return price; set price = value; public override string ToString()return string .Format( speed:0, rotate:1, model:2, pri ce:3 , speed, rotate, model, price);商城功能之XML物品生成. 將文件夾 Item 更名

32、為 ShopItem2、增加一個Shopitem標簽.將 Shopitem 選擇 Shopitem 標簽3、在Resource文件夾創(chuàng)建一個文件夾 UICreate Q All PrefabQ All ScriptjA Assets Atlas Data;X Fants Materials Mli.lel;； NGUI. PrefabsA ResourceAssets Resources ui將面板上的Shopitem拖入到UI文件夾里,4、在Script的Sho岐件夾里面創(chuàng)建一個腳本 ShopitemUI,將腳ShopitemUI掛載至U物體Shopitem上，打開編程5、選擇物體Shopi

33、tem,點擊、在Script的Sho岐件夾里面創(chuàng)建一個腳本ShopManager將腳ShopManage掛載到物體Shop。商品飛機模型展現(xiàn)飛機模型處理，包含縮放模型大小，刪除特效顯示;實例化飛機模型。步驟:上面一節(jié)課，已經(jīng)將所有的商品實例化除了，一個 4個，但是飛機模型還是默認的,并未展現(xiàn)出對應的模型_ Atlas三 DatasFontsMaterials二 Models4sHGUI 一Prefabs Resource1.將UT拖入到面板中k* 113y JUI RootCamera StatlPanelb Seting&PanclShopltem開其身上掛載的腳本, 雙擊二 AllPref

34、absElementm2、導入其余的飛機模型，復制一份，命名為ShipUI心 ShipUI Hrerabs修 Resources土 ShipUI3、將ShipUI拖入到 ttUI,將貼圖重新賦予5、更改ShopData里面的腳本，調用模型ShipUI/Ship_1ShopManager6、打開力,添加GameObject item = NGUITools .AddChild(gameObject, ui_ShopItem);/加載對應的飛機模型.更改的腳本所有的飛機模型都要放在 model的下面，實例化作為其子物體然后調用。private GameObject shipParent; / 飛機模型的父物體.接著查找父物體shipPa