unity界面设计教案

1、第 1 课：游戏 UI 界面元素布课程要点：. 游戏界面UI 制作.UI 锚点定位. 游戏界面UI 制作游戏界面 UI 有两部分组成：游戏 UI ，结束 UI 。新建一个场景文件，或者复制上一个场景，在原有的基础上进行修改制作。.UI 锚点定位1.Anchors 简介UI 用于界面显示的组件，组件下方都跟着一个“ Anchors ”面板，这个面板的主要作用就是用于UI 定位。它只有一个Type 属性，常用的是前两个属性：None不启用锚点定位；Unified ：相对于父物体进行锚点定位；第 1 课：初始化项目开发环境课程要点：初始化项目屏幕自适应设置场景之间跳转初始化项目1项目创建（创建相应的

2、资源管理目录）；2NGUI导入（示例工程部分不要导入）；3相关项目资源导入（UI 图片 , 相关模型资源等）4Atlas 制作（ UI 图片制作成图集）。屏幕自适应设置.显示分辨率以及比例本套课程以 16:9 的分辨率进行自适应处理。比例值是： 1920/1080 = 1.7771920*1080 1280*720960*540 720*405640*360 320*180.NGUI 初步实现 UI 自适应Game面板创建显示用的分辨率尺寸；UIRoot 组件相关设置：1缩放类型：Constrained On Mobiles2内容宽度/ 高度：填写数值，勾选Fit场景之间跳转.场景的作用场景就

3、是一个游戏中，不同的游戏环境。 见图 而场景跳转就是在这些环境之间来回的切换，类似于电视电影的转场镜头。现实生活中也有同样的“场景概念”，比如：自己的家是一个“场景”，地铁上是一个“场景”，公司又是一个“场景”。. 脚本相关步骤引入命名空间： using UnityEngine.SceneManagement;将相关场景Build Settings 的“打包面板”中；使用SceneManager.LoadScene(“场景名称”)，实现场景跳转。步骤 ： 1、新建一个文件2、在Assets 文件夹下面新建8 个文件夹，分别命名，其中 Atlas 为图集。3、直接将NGUI资源拖入到asset文

4、件夹里面即可，发现菜单栏出现了NGUI就成功安装了。4、如果发现错误，则在打开 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创建一个图集。保存在Atlas文件夹下，命名为GameUI这样一个图集就制 作完毕。8、在game窗口下单击9、创建2D UI10、切换到2D窗口。11、调整摄像机的大小12、选择540X960的分辨率。13、设置UI组件选中UI root ,选择右边参数设置测试下场景回到sence界面，选中UIroot ,创建sprite 图片。Ctrl+D ,更改位置回到game窗口，选中几种不同白分辨率，会发现

6、 5个图片的位置不会变。实现场景之间的跳转。*3 021、ctrl+N ; ctrl+s ,另存为电口?，当前有两个场景在02_1场景里面，创建一个cube物体，保存好在script 创建一个脚本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 的“打包面板”。到此为止，就可以按住空格键实现场景跳转了。第2课：游戏UI界面元素布局上课程要点：.UI元素制作比例.开始界面UI制作.UI元素制作比例在公司实际项目的开发过程中，美术相关人员(UI设计)会给出参考图，以及 切分好的UI素材图片。在美术人员设计UI界面的时候，是有一个整体的参考 尺寸的。我们在Unity中制作UI的时候，就要按该参考图的尺寸定义原始的场 景分辨率尺寸。本套案例的原始制作比例是1920*1080。.开始界面UI制作我们是可以

8、根据UI将游戏分割成不同的场景来分开制作，然后使 用场景跳转功能最终将游戏串联起来。.UI场景制作这个案例，根据UI可以分割成两个场景：开始场景，游戏场景。本节课程制作开始场景(Start.unity )。开始场景有两个UI界面组成：开始UI,设置UI。步骤：1、可以根据上节课的案例将场景更改2、打开02场景，选择左边的一个sprite ,单击右边的Atla r j GameUIl (UIAtlas) o Edit | JSpnte t strEdit I _, Sprite 一_ 一一 ,里面的-,选择需要的图片就可以了细节：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 ,单击右键，选择创建lable的child。5、选择lable ,单击右边的font旁边的设置，选择导入的字体。制作开始场景1、将文件命名为start2、打开2D UI2、将两种比例都调整为1920*1080。3、选择缩放工具，单击右键添加一个sprite4、将图片移动到左上角，单击 正式的原始尺寸。

11、 Widget votepthsnap,此时的图片为5、选择,选中刚才的星星图片，选中lable-child6、将文字更改大小，左对齐，去掉渐变，更改颜色。（左对齐操作）7、用同样的方法，制作下面的场景。即同样选中 UI Root ,利用缩放工具，右键创建 sprit ,选择声音图标的图片。，单击 snap。更名为Audio声音图标后期会是一个按钮。8、重复第7步骤，完成下面图标的添加。（也可以利用 ctrl+D通过复制相同的图标， 进行修改）9、选中UI Root,利用缩放工具，右键创建 Lable ,同样去掉渐变，更改颜色，文字 内容。为 “Your Best Score ”选择 “You

12、r Best Score ” 的 lable ,创建子标签，最终结果如下：重复第9步骤，创建游戏播放标签 TAP TO PLAY13,设置背景色，选择 Main Camera,将类型改为solid color到此为止完成开始界面的设置第二个界面设置界面的制作制作前，先将第一个界面进行整理，选中 UIRoot,右键Panel （面板，容器）将所有的物体（除了 camer外）移入Panel中，就可以一次性移动物体了，将 Panel 命名为 StartPanel 。3、选中UI Root ,利用缩放工具，右键创建一个新的 Panel,命名为SetingsPanel。 将StartPanel隐藏，去掉

13、前面的勾。4、选中SetingsPanel ,利用缩放工具，右键创建一个 Sprite ,图片更改为bg,并更 改透明度。5、将半透明图片拉大，超过边框一些，命名为 Mas%6、再次选中SetingsPanel ,利用缩放工具，右键创建一个 Sprite ,图片更改为bg, 更改大小后，再细节调整。调整后，大家发现图片边缘出现了锯齿解决的方法是给图片进行九宫划分。选中图片，单击右边的 edit更改 Border 全部为 1，增加 1 像素，类型改为 Sliced （九宫布局）。此时，会发现边缘锯齿已经解决。选中刚才的Sprit，右键创建一个child的 sprit，更改为红色，并调整大小和位置

14、。选中红色的Sprit，右键创建一个child的 lable，去掉渐变，更改内容。选中红色的Sprit，右键创建一个child的 Sprit，更改为X 图片。10、选中大的白色的 Sprit ，右键创建一个child 的 Sprit 。更改为声音图片。11、选中 声音图标 ，右键创建一个child 的 lable ，去掉渐变，更改内容12、将SOUND住ctrl+D 复制一份，更改内容。注意： 使用 UIEventListener 为一个按钮绑定点击事件时，绑定的方法名不要与UIEventListener 里存在的方法同名NGUI的UI布局商城界面 UI 布局在游戏的开始界面的中间部分，制作一

15、个“飞机购买商城”，使用左右滑动的方式切换显示商城内的飞机商品。Layer ：层， Unity 中的所有的物品都是可以指定一个所属的层的。NGUI 属于层的第8 级。本地静态数据简介本地静态数据，也叫本地配置数据。主要用于存储游戏中的一些固定的，且需要重复使用的数据信息，降低与服务器之间的数据传输量。比如：MMORPG游中的背包系统中的成百上千的装备,物品,碎片,晶石每一个背包中独立的物品都会对应很多数据：Id ，图片，名字，简介， 类别 ， 数量 如果每次联网都需要服务器将你背包中的所有物品的信息发送到客户端， 这个数据量是很大的，比较浪费流量，且性能不高。所以就引出了本地静态数据，重复不变

16、的一直存储在本地客户端，然后客户端登录的时候，只需要请求很少的数据，然后和本地的静态数据组合，生成背包内所有的物品。步骤：1、单击 StartPanel ，单击右键， creat- Sprit ，命名为 Speed2、接着选中Speed,右键创建一个child 的lable ,命名为Speed_Num完成了提速的界面设计3、同理，按住ctrl+D ,复制一个，更改名字为 Rotate和Rotate_Num,图片及文字, 便完成了旋转的界面设计。4、再次单击 StartPanel ,单击右键，creat- Sprit ,命名为 BuyButton ,5、接着选中BuyButton ,右键创建一个

17、child 的Sprit ,命名为Bg。图片改为bg,改变透明度，类型改为九宫格，6、接着选中BuyButton ,右键创建一个child 的lable ,命名为Price ,输入5000.7、接着选中BuyButton ,右键创建一个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、现在要在2D勺相机里面看到3D的物体，如何实现呢选择StartPanel ,右键创建一个Sprite ,命名为Model。导入飞机模型，将Materials再重新赋予下图片，将Prefabs下面的Ship_5直接拖至U Model里面，赋予材质（可以新建一个material ,进行材质赋予）。删除里面的3个特效。飞机沿X轴旋转-90度 _ij n 1 产.匚 i卜叵| 匚 UI Sprite (Seript)| Ml- | GameUU (UIAt| G选才 Model,隐藏 叵亟二Z)但是大家会发现飞机在game0 口，还是没有出现180导

19、弹追击Your Best Score1805000TAP TO PLAYQ如何解决呢？Layer：层，Unity中的所有的物品都是可以指定一个所属的层的。（前面7个是Unity内置的，灰色的。）NGUI属于层的第8级。接着将选择Ship_5,选择NGUI层，接着放大飞机为5倍，在game窗口便可以看见飞 机模型了。切换到3D窗口，往前或者往后移动，观察飞机模型的现实。我的案例是往前移动，可以看到飞机模型便清晰了很多。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到此为止，飞机商品的制作已经完成接下来设置左右移动键步骤：3、单击 StartPanel ,单击右键，creat- Sprit ,命名为 Shopb4、选择Shop,右键再创建一个 Sprit 将其移动到飞机的左侧，命名为 LeftButton。按住CTRL+D复制一份，移动到右边，命名为 RightButton 将整个Item拖入到Shop里面变成其子物体。屈匚 ui Sprite (Script)Q

21、 由N Ag而雨 0 pidiH| Sprite 11.Edit最后将Shop的I. I隐藏。到此为止，商城模块的UI已经制作完毕。商城功能之XML读取操作课程要点：.XML简介.Unity 操作 XML.XML简介.什么是XM12XML可扩展标记语言。XML类似于HTML都是标签(标记)语言。在软件开发的各个领域(Web Android , IOS, Game EXE)都可以看到XML文件的身影。XML的作用是用于传输和存储数据。XML本身就是一个存储的文本。.XML的语法结构XML文档的语法结构最终是一个树状结构。主要组成部分：根元素，子元素，属性，文本。3.XML注意事项XML标签对大小

22、写很敏感；XML标签必须正确的嵌套；XML标签中的属性值必须加(双)引号；XML文档必须有根元素。Unity 操作 XML1.读取XML中的数据并展示出来实例化一个XML文档操作对象；用XML对象加载XML获取根节点；获取根节点下所有子节点；遍历输出。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中的数据进行显示./ / xml 的路径地址private void ReadXMLByPath(string path)/实例化一个XMLt档操彳售(寸象.XmlDocument doc = new XmlDocument();/使用XML寸象力口载XML.doc.Load(path);/ 获取根节点 .XmlNode root = doc.SelectSingleNode(Web);/ 获取根节点下所有子节点 .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); 实体类存储创建商品 Item 实体类，并将XML 中的数据存储到 Item 中，最终封装为一个List数据集合，这个List的结构合X

25、ML文档的结构是完全一样的。唯一的区别就是一个存储在硬盘中，而一个存储在内存中。步骤将ShopData.XML拖入到Datas文件夹里面。在script新建一个文件夹为Shop,新建一个ShopData脚本，将其挂载到MainCamera 上。using UnityEngine;using System.Collections;using / 为 List 集合，引入命名空间。using System.Xml;/ / 商城功能模块数据操作./ public class ShopData : MonoBehaviour private string xmlPath = Assets/Datas/

26、ShopData.xml/用于存储XML数据的实体集合，定义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 );/ 获取根节点。XmlNodeList nodeList = root.ChildNodes;/获取根节点下所有子节点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 中的数据输出到工作台 变成 存储到 List 实体集合中 。ShopItem item = new ShopItem (speed, rotate, model, price);/ 实例化 itemshopList.Add(item);/调用 Add 方法将 ite

29、m 加入到 List 集合中去。/ / 测试函数 , 测试 List 中的数据 ./ 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文件夹创建一个文件夹 UICreate Q All PrefabQ All ScriptjA Assets Atlas Data;X Fants Materials Mli.lel;； NGUI. PrefabsA ResourceAssets Resources ui将面板上的Shopitem拖入到UI文件夹里,4、在Script的Sho岐件夹里面创建一个脚本 ShopitemUI,将脚ShopitemUI挂载至U物体Shopitem上，打开编程5、选择物体Shopi

33、tem,点击、在Script的Sho岐件夹里面创建一个脚本ShopManager将脚ShopManage挂载到物体Shop。商品飞机模型展现飞机模型处理，包含缩放模型大小，删除特效显示;实例化飞机模型。步骤:上面一节课，已经将所有的商品实例化除了，一个 4个，但是飞机模型还是默认的,并未展现出对应的模型_ 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