游戏UI界面元素布

-第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工程创立创立相应的资源管理目录；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.场景的作用场景就是一个游戏中，不同的游戏环境。见图而场景跳转就是在这些环境之间来回的切换，类似于电视电影的转场镜头。现实生活中也有同样的场景概念，比方：自己的家是一个场景，地铁上是一个场景，公司又是一个场景。2.脚本相关步骤引入命名空间：using UnityEngine.SceneManagement;将相关场景Build Settings 的打包面板中；使用SceneManager.LoadScene(场景名称)，实现场景跳转。步骤：1、新建一个文件2、在Assets文件夹下面新建8个文件夹，分别命名，其中Atlas为图集。3、直接将NGUI资源拖入到asset文件夹里面即可，发现菜单栏出现了NGUI就成功安装了。4、如果发现错误，则在翻开NGUI menu 脚本，将下面两句代码注释，保存脚本，错误就消失了。/MenuItem(NGUI/,false,11)/staticvoidBreaker()5、在文件夹Te*tures，再新建一个文件夹，命名为UI，选中下面的图片直接拖入到UI文件夹中，完成图片的导入操作。6、在Assets文件夹下面新建1个文件夹，命名为Fonts，将字体拖入,完成字体的导入。7、回到UI文件夹，按住shift键，框选所有的图集，单击右键，选中Open Atlas Maker。单击creat创立一个图集。保存在Atlas文件夹下，命名为GameUI.这样一个图集就制作完毕。8、在game窗口下单击9、创立2D UI10、切换到2D窗口。11、调整摄像机的大小12、选择540*960的分辨率。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、 代码：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 制作1.UI 元素制作比例在公司实际工程的开发过程中，美术相关人员UI 设计会给出参考图，以及切分好的UI 素材图片。在美术人员设计UI 界面的时候，是有一个整体的参考尺寸的。我们在Unity 中制作UI 的时候，就要按该参考图的尺寸定义原始的场景分辨率尺寸。本套案例的原始制作比例是1920*1080。2.开场界面UI 制作我们是可以根据UI 将游戏分割成不同的场景来分开制作，然后使用场景跳转功能最终将游戏串联起来。2.UI 场景制作这个案例，根据UI 可以分割成两个场景：开场场景，游戏场景。本节课程制作开场场景Start.unity。开场场景有两个UI 界面组成：开场UI，设置UI。步骤：1、 可以根据上节课的案例将场景更改2、 翻开02场景，选择左边的一个sprite，单击右边的里面的，选择需要的图片就可以了。-细节：1、涉及到屏幕比例时，需要更改，这两个要匹配。2、 假设屏幕比例为，则图片和文字要适当缩小，否则图标显示非常大。如：a) 缩放后,缩放的右边下拉框选择或者其他两种类型，接着缩放一定的比例。b) 当然也可以选择物体，利用直接缩放，或者直接输入大小最后效果如下：比拟符合屏幕的实际需要。比方在手机上运行c) 如果屏幕的比例比拟大，比方1920*1080。只要使用原来的大小即可即图片可以适当大些-3、移动图片时使用移开工具进展移动。4、选择该图片，切换到缩放工具，单击右键，选择创立lable的child。5、选择lable，单击右边的font旁边的设置，选择导入的字体。制作开场场景1、 将文件命名为start2、翻开2D UI2、 将两种比例都调整为1920*1080。3、 选择缩放工具，单击右键添加一个sprite4、 将图片移动到左上角，单击snap，此时的图片为正式的原始尺寸。5、 选择，选中刚刚的星星图片，选中lable-child6、 将文字更改大小，左对齐，去掉渐变，更改颜色。左对齐操作7、 用同样的方法，制作下面的场景。即同样选中UI Root，利用缩放工具，右键创立sprit ，选择声音图标的图片。，单击snap。更名为Audio声音图标后期会是一个按钮。8、 重复第7步骤，完成下面图标的添加。也可以利用ctrl+D通过复制一样的图标，进展修改9、 选中UI Root，利用缩放工具，右键创立Lable ，同样去掉渐变，更改颜色，文字内容。为Your Best Score10、 选择Your Best Score的lable，创立子标签，11、 最终结果如下：12、 重复第9步骤，创立游戏播放标签TAP TO PLAY。13,设置背风光，选择Main Camera，将类型改为solid color到此为止完成开场界面的设置第二个界面设置界面的制作制作前，先将第一个界面进展整理，选中UIRoot，右键Panel面板，容器将所有的物体除了camer外移入Panel中，就可以一次性移动物体了，将Panel命名为StartPanel。3、 选中UI Root，利用缩放工具，右键创立一个新的Panel，命名为SetingsPanel。将StartPanel隐藏，去掉前面的勾。4、 选中SetingsPanel，利用缩放工具，右键创立一个Sprite，图片更改为bg，并更改透明度。5、 将半透明图片拉大，超过边框一些，命名为Mask。6、 再次选中SetingsPanel，利用缩放工具，右键创立一个Sprite，图片更改为bg，更改大小后，再细节调整。调整后，大家发现图片边缘出现了锯齿解决的方法是给图片进展九宫划分。选中图片，单击右边的edit更改Border全部为1，增加1像素，类型改为Sliced九宫布局。此时，会发现边缘锯齿已经解决。7、 选中刚刚的Sprit，右键创立一个child的sprit，更改为红色，并调整大小和位置。8、 选中红色的Sprit，右键创立一个child 的lable，去掉渐变，更改内容。9、 选中红色的Sprit，右键创立一个child 的Sprit，更改为*图片。10、选中大的白色的Sprit，右键创立一个child 的Sprit。更改为声音图片。11、选中声音图标，右键创立一个child 的lable，去掉渐变，更改内容12、将SOUND按住ctrl+D复制一份,更改内容。注意：使用UIEventListener为一个按钮绑定点击事件时，绑定的方法名不要与UIEventListener里存在的方法同名NGUI的UI布局1.商城界面UI 布局在游戏的开场界面的中间局部，制作一个飞机购置商城，使用左右滑动的方式切换显示商城内的飞机商品。Layer：层，Unity 中的所有的物品都是可以指定一个所属的层的。NGUI 属于层的第8 级。2.本地静态数据简介本地静态数据，也叫本地配置数据。主要用于存储游戏中的一些固定的，且需要重复使用的数据信息，降低与效劳器之间的数据传输量。比方：MMORPG 手游中的背包系统中的成百上千的装备,物品,碎片,晶石.每一个背包中独立的物品都会对应很多数据：Id，图片，名字，简介，类别，数量.如果每次联网都需要效劳器将你背包中的所有物品的信息发送到客户端，这个数据量是很大的，比拟浪费流量，且性能不高。所以就引出了本地静态数据，重复不变的一直存储在本地客户端，然后客户端登录的时候，只需要请求很少的数据，然后和本地的静态数据组合，生成背包内所有的物品。步骤：1、 单击StartPanel，单击右键，creat-Sprit，命名为Speed2、 接着选中Speed，右键创立一个child 的lable，命名为Speed_Num完成了提速的界面设计3、 同理，按住ctrl+D，复制一个，更改名字为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的物体，如何实现呢选择StartPanel，右键创立一个Sprite，命名为Model。导入飞机模型，将Materials再重新赋予下列图片，将Prefabs下面的Ship_5直接拖到Model里面，赋予材质(可以新建一个material，进展材质赋予)。删除里面的3个特效。飞机沿*轴旋转-90度选择Model，隐藏。但是大家会发现飞机在game窗口，还是没有出现。、如何解决呢？Layer：层，Unity 中的所有的物品都是可以指定一个所属的层的。前面7个是Unity内置的，灰色的。NGUI 属于层的第8 级。接着将选择Ship_5，选择NGUI层，接着放大飞机为5倍，在game窗口便可以看见飞机模型了。切换到3D窗口，往前或者往后移动，观察飞机模型的现实。我的案例是往前移动，可以看到飞机模型便清晰了很多。1、 单击StartPanel，单击右键，creat-Sprit，命名为Item。2、 选择，拖入到Item里面，成为Item的子物体。将Item的隐藏。到此为止，飞机商品的制作已经完成。接下来设置左右移动键步骤：3、 单击StartPanel，单击右键，creat-Sprit，命名为Shop。4、 选择Shop，右键再创立一个Sprit将其移动到飞机的左侧，命名为LeftButton。按住CTRL+D，复制一份，移动到右边，命名为RightButton将整个Item拖入到Shop里面变成其子物体。最后将Shop的隐藏。到此为止，商城模块的UI已经制作完毕。商城功能之*ML 读取操作课程要点：1.*ML 简介2.Unity 操作*ML1.*ML 简介1.什么是*ML？*ML：可扩展标记语言。*ML 类似于HTML，都是标签标记语言。在软件开发的各个领域Web，Android，IOS，Game，E*E.都可以看到*ML 文件的身影。*ML 的作用是用于传输和存储数据。*ML 本身就是一个存储的文本。2.*ML 的语法构造*ML 文档的语法构造最终是一个树状构造。主要组成局部：根元素，子元素，属性，文本。3.*ML 考前须知*ML 标签对大小写很敏感；*ML 标签必须正确的嵌套；*ML 标签中的属性值必须加双引号；*ML 文档必须有根元素。Unity 操作*ML1.读取*ML 中的数据并展示出来实例化一个*ML 文档操作对象；使用*ML 对象加载*ML；获取根节点；获取根节点下所有子节点；遍历输出。using UnityEngine;using System.Collections;using System.*ml; /引入*ML操作相关的命名空间./ / *ML操作演示./ public class *MLDemo : MonoBehaviour /定义一个字段,存储*ml的路径. private string *mlPath = Assets/Datas/web.*ml;void Start () Read*MLByPath(*mlPath); / / 通过路径读取*ML中的数据进展显示. / / *ml的路径地址 private void Read*MLByPath(string path) /实例化一个*ML文档操作对象. *mlDocument doc = new *mlDocument(); /使用*ML对象加载*ML. doc.Load(path); /获取根节点. *mlNode root = doc.SelectSingleNode(Web); /获取根节点下所有子节点. *mlNodeList nodeList = root.ChildNodes; /遍历输出. foreach(*mlNode node in nodeList) /取属性. int id = int.Parse(node.Attributesid.Value); /取文本. string name = node.ChildNodes0.InnerTe*t; string url = node.ChildNodes1.InnerTe*t; Debug.Log(id + - + name + - + url); 2.实体类存储创立商品Item 实体类，并将*ML 中的数据存储到Item 中，最终封装为一个List 数据集合，这个List 的构造合*ML 文档的构造是完全一样的。唯一的区别就是一个存储在硬盘中，而一个存储在内存中。步骤1、 将ShopData.*ML拖入到Datas文件夹里面。2、 在script新建一个文件夹为Shop，新建一个ShopData脚本，将其挂载到Main Camera上。usingUnityEngine;usingSystem.Collections;usingSystem.Collections.Generic;/为List集合，引入命名空间。usingSystem.*ml;/商城功能模块数据操作./publicclassShopData:MonoBehaviourprivatestring*mlPath=Assets/Datas/ShopData.*ml;/用于存储*ML数据的实体集合，定义List集合，并实例化。privateListshopList=newList();voidStart()Read*mlByPath(*mlPath);-1DebugListInfo();/通过指定的路径读取*ML文档./*ml的路径privatevoidRead*mlByPath(stringpath)*mlDocumentdoc=new*mlDocument();/将对象实例化。doc.Load(path);/引用该对象的Load方法，将路径载入。*mlNoderoot=doc.SelectSingleNode(Shop);/获取根节点。*mlNodeListnodeList=root.ChildNodes;/ 获取根节点下所有子节点foreach(*mlNodenodeinnodeList)/遍历输出stringspeed=node.ChildNodes0.InnerTe*t;stringrotate=node.ChildNodes1.InnerTe*t;stringmodel=node.ChildNodes2.InnerTe*t;stringprice=node.ChildNodes3.InnerTe*t;/遍历完毕后,直接打印输出./stringinfo=string.Format(speed: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.Count;i+)Debug.Log(shopListi.ToString();/调用ShopItem脚 本的publicoverridestringToString()。ShopItem脚本：该脚本不用挂载到任何物体里面。/商城物品Item实体类./publicclassShopItemprivatestringspeed;privatestringrotate;privatestringmodel;privatestringprice;/面向对象里面的构造publicShopItem(stringspeed,stringrotate,stringmodel,stringprice)/赋值this.speed=speed;this.rotate=rotate;this.model=model;this.price=price;/封装访问属性。publicstringSpeedgetreturnspeed;setspeed=value;publicstringRotategetreturnrotate;setrotate=value;publicstringModelgetreturnmodel;setmodel=value;publicstringPricegetreturnprice;setprice=value;publicoverridestringToString()returnstring.Format(speed:0,rotate:1,model:2,price:3,speed,rotate,model,price);商城功能之*ML 物品生成1. 将文件夹Item更名为ShopItem2、增加一个ShopItem标签2. 将ShopItem选择ShopItem标签3、 在Resource文件夹创立一个文件夹UI,将面板上的ShopItem拖入到UI文件夹里， 4、 在Script的Shop文件夹里面创立一个脚本ShopItemUI,将脚ShopItemUI挂载到物体ShopItem上，翻开编程。5、 选择物体ShopItem，点击6、 在Script的Shop文件夹里面创立一个脚本ShopManager，将脚ShopManager挂载到物体Shop上。商品飞机模型展现飞机模型处理，包含缩放模型大小，删除特效显示；实例化飞机模型。步骤：上面一节课，已经将所有的商品实例化除了，一个4个，但是飞机模型还是默认的，并未展现出对应的模型。1.将拖入到面板中，双击翻开其身上挂载的脚本2、导入其余的飞机模型，复制一份，命名为ShipUI,3、将ShipUI拖入到，将贴图重新赋予5、 更改ShopData里面的脚本，调用模型ShipUI/Ship_16、翻开，添加GameObjectitem=NGUITools.AddChild(gameObject,ui_ShopItem);/加载对应的飞机模型.7. 更改的脚本所有的飞机模型都要放在model的下面，实例化作为其子物体然后调用。private GameObject shipParent; /飞机模型的父物体.接着查找父物体shipParent=m_Transform.FindChild(Model).gameObject;通过设置参数，传递飞机模型：GameObjectship=NGUITools.AddChild(shipParent,model);可以将对应飞机模型作为子物体的形式添加到model里，和ship_5是同级关系。ship.layer=8;/设置模型所处的层为NGUI层.Transformship_Transform=ship.Getponent();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.Euler(rot);/旋转.8.运行效果，删除ship的特效。将ship1，ship2，ship3，ship4，拖入到面板中，将mesh下面的特效删除.考前须知：对应的ship_1，ship_2，ship_3，ship_4下面对应的为mesh；如果出错，就先将shipUI文件夹里面的ship模型拖入面板中，更改好后再移入需要的预制体文件夹，删除面板中的物体。到此为止，飞机模型和相对应的信息已经可以调用在面板上了。接下来是位置的处理，如果让位置移入到面板中适宜的位置。由于目前还是测试阶段，1、 在运行状态，删除3个飞机组合，剩余1个飞机组合。2、 将剩下的一个ShopItemClone，翻开其子菜单，找到对应的位置参数。根据其进展预制体修改：而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);/旋转.设置完成后，. z.