4月8日unity界面设计.doc

《4月8日unity界面设计.doc》由会员分享，可在线阅读，更多相关《4月8日unity界面设计.doc（45页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

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

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

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

4、可，发现菜单栏出现了NGUI就成功安装了。4、如果发现错误，则在打开NGUI menu 脚本，将下面两句代码注释，保存脚本，错误就消失了。/MenuItem(NGUI/,false,11)/staticvoidBreaker() 5、在文件夹Textures，再新建一个文件夹，命名为UI，选中下面的图片直接拖入到UI文件夹中，完成图片的导入操作。6、在Assets文件夹下面新建1个文件夹，命名为Fonts，将字体拖入,完成字体的导入。7、回到UI文件夹，按住shift键，框选所有的图集，单击右键，选中Open Atlas Maker。单击creat创建一个图集。保存在Atlas文件夹下，命名为

5、GameUI.这样一个图集就制作完毕。8、在game窗口下单击9、创建2D UI10、切换到2D窗口。11、调整摄像机的大小12、选择540X960的分辨率。13、设置UI组件选中UI root，选择右边参数设置测试下场景回到sence界面，选中UIroot，创建sprite图片。Ctrl+D，更改位置回到game窗口，选中几种不同的分辨率，会发现5个图片的位置不会变。实现场景之间的跳转。1、 ctrl+N；ctrl+s，另存为，当前有两个场景。2、 在02_1场景里面，创建一个cube物体，保存好3、 在script创建一个脚本sencejump脚本4、 将脚本拖到场景02的中间图片上。5、

6、6、 代码：usingUnityEngine;usingSystem.Collections;usingUnityEngine.SceneManagement;/引入命名空间.publicclassSceneJump:MonoBehaviourvoidUpdate()if(Input.GetKeyDown(KeyCode.Space)SceneManager.LoadScene(02_1);注意的是要将02和02_1都拖入到Build Settings 的“打包面板”。到此为止，就可以按住空格键实现场景跳转了。第2 课：游戏UI 界面元素布局上课程要点：1.UI 元素制作比例2.开始界面UI

7、制作1.UI 元素制作比例在公司实际项目的开发过程中，美术相关人员（UI 设计）会给出参考图，以及切分好的UI 素材图片。在美术人员设计UI 界面的时候，是有一个整体的参考尺寸的。我们在Unity 中制作UI 的时候，就要按该参考图的尺寸定义原始的场景分辨率尺寸。本套案例的原始制作比例是1920*1080。2.开始界面UI 制作我们是可以根据UI 将游戏分割成不同的场景来分开制作，然后使用场景跳转功能最终将游戏串联起来。2.UI 场景制作这个案例，根据UI 可以分割成两个场景：开始场景，游戏场景。本节课程制作开始场景（Start.unity）。开始场景有两个UI 界面组成：开始UI，设置UI。

8、步骤：1、 可以根据上节课的案例将场景更改2、 打开02场景，选择左边的一个sprite，单击右边的里面的，选择需要的图片就可以了。-细节：1、涉及到屏幕比例时，需要更改，这两个要匹配。2、 若屏幕比例为，则图片和文字要适当缩小，否则图标显示非常大。如：a) 缩放后, 缩放的右边下拉框选择 （或者其他两种类型），接着缩放一定的比例。b) 当然也可以选择物体，利用直接缩放，或者直接输入大小最后效果如下：比较符合屏幕的实际需要。（比如在手机上运行）c) 如果屏幕的比例比较大，比如1920*1080。只要使用原来的大小即可（即图片可以适当大些）-3、移动图片时使用移动工具进行移动。4、选择该图片，切

9、换到缩放工具，单击右键，选择创建lable的child。5、选择lable，单击右边的font旁边的设置，选择导入的字体。制作开始场景1、 将文件命名为start2、打开2D UI2、 将两种比例都调整为1920*1080。3、 选择缩放工具，单击右键添加一个sprite4、 将图片移动到左上角，单击snap，此时的图片为正式的原始尺寸。5、 选择，选中刚才的星星图片，选中lable-child6、 将文字更改大小，左对齐，去掉渐变，更改颜色。（左对齐操作）7、 用同样的方法，制作下面的场景。即同样选中UI Root，利用缩放工具，右键创建sprit ，选择声音图标的图片。，单击snap。更名

10、为Audio声音图标后期会是一个按钮。8、 重复第7步骤，完成下面图标的添加。（也可以利用ctrl+D通过复制相同的图标，进行修改）9、 选中UI Root，利用缩放工具，右键创建Lable ，同样去掉渐变，更改颜色，文字内容。为“Your Best Score”10、 选择“Your Best Score”的lable，创建子标签，11、 最终结果如下：12、 重复第9步骤，创建游戏播放标签TAP TO PLAY。13,设置背景色，选择Main Camera，将类型改为solid color到此为止完成开始界面的设置第二个界面设置界面的制作制作前，先将第一个界面进行整理，选中UIRoot，右

11、键Panel（面板，容器）将所有的物体（除了camer外）移入Panel中，就可以一次性移动物体了，将Panel命名为StartPanel。3、 选中UI Root，利用缩放工具，右键创建一个新的Panel，命名为SetingsPanel。将StartPanel隐藏，去掉前面的勾。4、 选中SetingsPanel，利用缩放工具，右键创建一个Sprite，图片更改为bg，并更改透明度。 5、 将半透明图片拉大，超过边框一些，命名为Mask。 6、 再次选中SetingsPanel，利用缩放工具，右键创建一个Sprite，图片更改为bg，更改大小后，再细节调整。调整后，大家发现图片边缘出现了锯齿

12、解决的方法是给图片进行九宫划分。选中图片，单击右边的edit更改Border全部为1，增加1像素，类型改为Sliced（九宫布局）。 此时，会发现边缘锯齿已经解决。7、 选中刚才的Sprit，右键创建一个child的sprit，更改为红色，并调整大小和位置。8、 选中红色的Sprit，右键创建一个child 的lable，去掉渐变，更改内容。9、 选中红色的Sprit，右键创建一个child 的Sprit，更改为X图片。 10、选中大的白色的Sprit，右键创建一个child 的Sprit。更改为声音图片。11、选中声音图标，右键创建一个child 的lable，去掉渐变，更改内容12、将SO

13、UND按住ctrl+D复制一份,更改内容。注意：使用UIEventListener为一个按钮绑定点击事件时，绑定的方法名不要与UIEventListener里存在的方法同名 NGUI的UI布局1.商城界面UI 布局在游戏的开始界面的中间部分，制作一个“飞机购买商城”，使用左右滑动的方式切换显示商城内的飞机商品。Layer：层，Unity 中的所有的物品都是可以指定一个所属的层的。NGUI 属于层的第8 级。2.本地静态数据简介本地静态数据，也叫本地配置数据。主要用于存储游戏中的一些固定的，且需要重复使用的数据信息，降低与服务器之间的数据传输量。比如：MMORPG 手游中的背包系统中的成百上千的

14、装备,物品,碎片,晶石.每一个背包中独立的物品都会对应很多数据：Id，图片，名字，简介，类别，数量.如果每次联网都需要服务器将你背包中的所有物品的信息发送到客户端，这个数据量是很大的，比较浪费流量，且性能不高。所以就引出了本地静态数据，重复不变的一直存储在本地客户端，然后客户端登录的时候，只需要请求很少的数据，然后和本地的静态数据组合，生成背包内所有的物品。步骤：1、 单击StartPanel，单击右键，creat-Sprit，命名为Speed2、 接着选中Speed，右键创建一个child 的lable，命名为Speed_Num完成了提速的界面设计3、 同理，按住ctrl+D，复制一个，更改

15、名字为Rotate 和Rotate_Num，图片及文字，便完成了旋转的界面设计。4、 再次单击StartPanel，单击右键，creat-Sprit，命名为BuyButton，5、 接着选中BuyButton，右键创建一个child 的Sprit，命名为Bg。图片改为bg，改变透明度，类型改为九宫格，6、 接着选中BuyButton，右键创建一个child 的lable，命名为Price，输入5000.7、 接着选中BuyButton，右键创建一个child 的Sprit，选择星星图片。选择BuyButton，去掉UI Sprite前面的勾。8、 现在要在2D的相机里面看到3D的物体，如何实现

16、呢选择StartPanel，右键创建一个Sprite，命名为Model。导入飞机模型，将Materials再重新赋予下图片，将Prefabs下面的Ship_5直接拖到Model里面，赋予材质(可以新建一个material，进行材质赋予)。删除里面的3个特效。飞机沿X轴旋转-90度选择Model，隐藏。但是大家会发现飞机在game窗口，还是没有出现。、如何解决呢？Layer：层，Unity 中的所有的物品都是可以指定一个所属的层的。（前面7个是Unity内置的，灰色的。）NGUI 属于层的第8 级。接着将选择Ship_5，选择NGUI层，接着放大飞机为5倍，在game窗口便可以看见飞机模型了。切

17、换到3D窗口，往前或者往后移动，观察飞机模型的现实。我的案例是往前移动，可以看到飞机模型便清晰了很多。1、 单击StartPanel，单击右键，creat-Sprit，命名为Item。2、 选择，拖入到Item里面，成为Item的子物体。将Item的隐藏。到此为止，飞机商品的制作已经完成。接下来设置左右移动键步骤：3、 单击StartPanel，单击右键，creat-Sprit，命名为Shop。4、 选择Shop，右键再创建一个Sprit将其移动到飞机的左侧，命名为LeftButton。按住CTRL+D，复制一份，移动到右边，命名为RightButton将整个Item拖入到Shop里面变成其子

18、物体。最后将Shop的隐藏。到此为止，商城模块的UI已经制作完毕。商城功能之XML 读取操作课程要点：1.XML 简介2.Unity 操作XML1.XML 简介1.什么是XML？XML：可扩展标记语言。XML 类似于HTML，都是标签（标记）语言。在软件开发的各个领域（Web，Android，IOS，Game，EXE.）都可以看到XML 文件的身影。XML 的作用是用于传输和存储数据。XML 本身就是一个存储的文本。2.XML 的语法结构XML 文档的语法结构最终是一个树状结构。主要组成部分：根元素，子元素，属性，文本。3.XML 注意事项XML 标签对大小写很敏感；XML 标签必须正确的嵌套

19、；XML 标签中的属性值必须加（双）引号；XML 文档必须有根元素。Unity 操作XML1.读取XML 中的数据并展示出来实例化一个XML 文档操作对象；使用XML 对象加载XML；获取根节点；获取根节点下所有子节点；遍历输出。using UnityEngine;using System.Collections;using System.Xml; /引入XML操作相关的命名空间./ / XML操作演示./ public class XMLDemo : MonoBehaviour /定义一个字段,存储xml的路径. private string xmlPath = Assets/Datas/w

20、eb.xml;void Start () ReadXMLByPath(xmlPath); / / 通过路径读取XML中的数据进行显示. / / xml的路径地址 private void ReadXMLByPath(string path) /实例化一个XML文档操作对象. XmlDocument doc = new XmlDocument(); /使用XML对象加载XML. doc.Load(path); /获取根节点. XmlNode root = doc.SelectSingleNode(Web); /获取根节点下所有子节点. XmlNodeList nodeList = root.Ch

21、ildNodes; /遍历输出. 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); 2.实体类存储创建商品Item 实体类，并将XML 中的数据存储到Item 中，最终封装为一个List 数据集合，这个List 的结构合XML 文

22、档的结构是完全一样的。唯一的区别就是一个存储在硬盘中，而一个存储在内存中。步骤1、 将ShopData.XML拖入到Datas文件夹里面。2、 在script新建一个文件夹为Shop，新建一个ShopData脚本，将其挂载到Main Camera上。usingUnityEngine;usingSystem.Collections;usingSystem.Collections.Generic;/为List集合，引入命名空间。usingSystem.Xml;/商城功能模块数据操作./publicclassShopData:MonoBehaviourprivatestringxmlPath=Ass

23、ets/Datas/ShopData.xml;/用于存储XML数据的实体集合，定义List集合，并实例化。privateListshopList=newList();voidStart()ReadXmlByPath(xmlPath);-1DebugListInfo();/通过指定的路径读取XML文档./xml的路径privatevoidReadXmlByPath(stringpath)XmlDocumentdoc=newXmlDocument();/将对象实例化。doc.Load(path);/引用该对象的Load方法，将路径载入。XmlNoderoot=doc.SelectSingleNod

24、e(Shop);/获取根节点。XmlNodeListnodeList=root.ChildNodes;/ 获取根节点下所有子节点foreach(XmlNodenodeinnodeList)/遍历输出stringspeed=node.ChildNodes0.InnerText;stringrotate=node.ChildNodes1.InnerText;stringmodel=node.ChildNodes2.InnerText;stringprice=node.ChildNodes3.InnerText;/遍历完毕后,直接打印输出./stringinfo=string.Format(spee

25、d:0,rotate:1,model:2,price:3,speed,rotate,model,price);/Debug.Log(info);-1/遍历完毕后,存储到List实体集合中.-2替换1后，就把1中的数据输出到工作台变成存储到List实体集合中。ShopItemitem=newShopItem(speed,rotate,model,price);/实例化itemshopList.Add(item);/调用Add方法将item加入到List集合中去。/测试函数,测试List中的数据./privatevoidDebugListInfo()for(inti=0;ishopList.Cou

26、nt;i+)Debug.Log(shopListi.ToString();/调用ShopItem脚 本的publicoverridestringToString()。ShopItem脚本：该脚本不用挂载到任何物体里面。/商城物品Item实体类./publicclassShopItemprivatestringspeed;privatestringrotate;privatestringmodel;privatestringprice;/面向对象里面的构造publicShopItem(stringspeed,stringrotate,stringmodel,stringprice)/赋值this

27、.speed=speed;this.rotate=rotate;this.model=model;this.price=price;/封装访问属性。publicstringSpeedgetreturnspeed;setspeed=value;publicstringRotategetreturnrotate;setrotate=value;publicstringModelgetreturnmodel;setmodel=value;publicstringPricegetreturnprice;setprice=value;publicoverridestringToString()retur

28、nstring.Format(speed:0,rotate:1,model:2,price:3,speed,rotate,model,price);商城功能之XML 物品生成1. 将文件夹Item更名为ShopItem2、增加一个ShopItem标签2. 将ShopItem选择ShopItem标签3.3、 在Resource文件夹创建一个文件夹UI,将面板上的ShopItem拖入到UI文件夹里， 4、 在Script的Shop文件夹里面创建一个脚本ShopItemUI,将脚ShopItemUI挂载到物体ShopItem上，打开编程。5、 选择物体ShopItem，点击6、 在Script的Sh

29、op文件夹里面创建一个脚本ShopManager，将脚ShopManager挂载到物体Shop上。商品飞机模型展现飞机模型处理，包含缩放模型大小，删除特效显示；实例化飞机模型。步骤：上面一节课，已经将所有的商品实例化除了，一个4个，但是飞机模型还是默认的，并未展现出对应的模型。1.将拖入到面板中，双击打开其身上挂载的脚本2、导入其余的飞机模型，复制一份，命名为ShipUI,3、将ShipUI拖入到，将贴图重新赋予5、 更改ShopData里面的脚本，调用模型ShipUI/Ship_1 6、打开，添加GameObjectitem=NGUITools.AddChild(gameObject,ui_

30、ShopItem);/加载对应的飞机模型. 7. 更改的脚本所有的飞机模型都要放在model的下面，实例化作为其子物体然后调用。private GameObject shipParent; /飞机模型的父物体.接着查找父物体shipParent=m_Transform.FindChild(Model).gameObject; 通过设置参数，传递飞机模型：GameObjectship=NGUITools.AddChild(shipParent,model); 可以将对应飞机模型作为子物体的形式添加到model里，和ship_5是同级关系。ship.layer=8;/设置模型所处的层为NGUI层.

31、Transformship_Transform=ship.GetComponent();ship_Transform.FindChild(Mesh).gameObject.layer=8;/给子物体设置层为NGUI层./设置飞机模型的缩放位置信息.ship_Transform.localScale=newVector3(5,5,5);/缩放.ship_Transform.localPosition=newVector3(0,-82,0);/位置.Vector3rot=newVector3(-90,0,0);ship_Transform.localRotation=Quaternion.Eule

32、r(rot);/旋转. 8.运行效果，删除ship的特效。将ship1，ship2，ship3，ship4，拖入到面板中，将mesh下面的特效删除.注意事项：对应的ship_1，ship_2，ship_3，ship_4下面对应的为mesh；如果出错，就先将shipUI文件夹里面的ship模型拖入面板中，更改好后再移入需要的预制体文件夹，删除面板中的物体。到此为止，飞机模型和相对应的信息已经可以调用在面板上了。接下来是位置的处理，如果让位置移入到面板中合适的位置。由于目前还是测试阶段，1、 在运行状态，删除3个飞机组合，剩余1个飞机组合。 2、 将剩下的一个ShopItem（Clone），打开其子菜单，找到对应的位置参数。 根据其进行预制体修改： 而ship_5的参数修改在脚本中修改：/设置飞机模型的缩放位置信息.ship_Transform.localScale=newVector3(6,6,6);/缩放.ship_Transform.localPosition=newVector3(-12,12,136);/相对位置.Vector3rot=newVector3(-90,0,0);ship_Transform.localRotation=Quaternion.Euler(rot);/旋转. 设置完成后，