4月8日unity界面设计

1、4月8日unity界面设计4月8日unity界面设计15/154月8日unity界面设计精心整理第1课：游戏UI界面元素布课程重点：游戏界面UI制作2.UI锚点定位游戏界面UI制作游戏界面UI有两部分构成：游戏UI，结束UI。新建一个场景文件，或许复制上一个场景，在原有的基础进步行改正制作。2.UI锚点定位1.Anchors简介UI用于界面显示的组件，组件下方都随着一个“Anchors”面板，这个面板的主要作用就是用于UI定位。它只有一个Type属性，常用的是前两个属性：None：不启用锚点定位；Unified：有关于父物体进行锚点定位；第1课：初始化项目开发环境课程重点：初始化项目屏幕自适应

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

3、景的作用场景就是一个游戏中，不一样样的游戏环境。见图而场景跳转就是在这些环境之间往返的切换，近似于电视电影的转场镜头。现实生活中也有相同的“场景见解”，比方：自己的家是一个“场景”，地铁上是一个“场景”，企业又是一个“场景”。脚真有关步骤引入命名空间：usingUnityEngine.SceneManagement;将有关场景BuildSettings的“打包面板”中；使用SceneManager.LoadScene(“场景名称”)，实现场景跳转。步骤：1、新建一个文件2、在Assets文件夹下边新建8个文件夹，分别命名，此中Atlas为图集。3、直接将NGUI资源拖入到asset文件夹里面即

4、可，发现菜单栏出现了NGUI就成功安装了。4、假如发现错误，则在翻开NGUImenu脚本，将下边两句代码说明，保留脚本，错误就消逝了。/MenuItem(NGUI/,?false,?11)?/static?void?Breaker?()?5、在文件夹Textures，再新建一个文件夹，命名为UI，选中下边的图片直接拖入到UI文件夹中，完成图片的导入操作。6、在Assets文件夹下边新建1个文件夹，命名为Fonts，将字体拖入,完成字体的导入。7、回到UI文件夹，按住shift键，框选所有的图集，单击右键，选中OpenAtlasMaker。单击creat创立一个图集。保留在Atlas文件夹下，命

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

6、5、代码：using?UnityEngine;using?System.Collections;using?UnityEngine.SceneManagement;/引入命名空间.public?class?SceneJump?:?MonoBehaviour?void?Update?()?if(Input.GetKeyDown(KeyCode.Space)?SceneManager.LoadScene(02_1);?注意的是要将02和02_1都拖入到BuildSettings的“打包面板”。到此为止，就能够按住空格键实现场景跳转了。第2课：游戏UI界面元素布局上课程重点：1.UI元素制作比率开始

7、界面UI制作1.UI元素制作比率在企业实质项目的开发过程中，美术有关人员（UI设计）会给出参照图，以及切分好的UI素材图片。在美术人员设计UI界面的时候，是有一个整体的参照尺寸的。我们在Unity中制作UI的时候，就要按该参照图的尺寸定义原始的场景分辨率尺寸。本套事例的原始制作比率是1920*1080。开始界面UI制作我们是能够依据UI将游戏切割成不一样样的场景来分开制作，此后使精心整理用途景跳转功能最后将游戏串联起来。2.UI场景制作这个事例，依据UI能够切割成两个场景：开始场景，游戏场景。本节课程制作开始场景（Start.unity）。开始场景有两个UI界面构成：开始UI，设置UI。步骤：

8、1、能够依据上节课的事例将场景改正2、翻开02场景，选择左边的一个sprite，单击右侧的里面的，选择需要的图片就能够了。细节：1、波及到屏幕比率时，需要改正，这两个要般配。2、若屏幕比率为显示特别大。如：，则图片和文字要适合减小，不然图标a)缩放后,缩放的右侧下拉框选择（或许其余两各样类），接着缩放必然的比率。b)自然也能够选择物体，利用直接缩放，或许直接输入大小最后见效以下：比较符合屏幕的实质需要。（比方在手机上运转）假如屏幕的比率比较大，比方1920*1080。只需使用本来的大小即可（即图片能够适合大些）精心整理3、挪动图片刻使用挪动工具进行挪动。4、选择该图片，切换到缩下班具5、选择l

9、able，单击右侧的font，单击右键，选择创立lable旁边的设置，选择导入的字体。的child。制作开始场景1、将文件命名为start2、翻开2DUI2、将两种比率都调整为1920*1080。3、选择缩下班具，单击右键增添一个sprite4、将图片挪动到左上角，单击snap，此时的图片为正式的原始尺寸。5、选择，选中刚才的星星图片，选中lable-child6、将文字改正大小，左对齐，去掉渐变，改正颜色。（左对齐操作）7、用相同的方法，制作下边的场景。即相同选中UIRoot，利用缩下班具，右键创立sprit，选择声音图标的图片。，单击snap。更名为Audio声音图标后期会是一个按钮。8、

10、重复第7步骤，完成下边图标的增添。（也能够利用ctrl+D经过复制相同的图标，进行改正）9、选中UIRoot，利用缩下班具，右键创立Lable，相同去掉渐变，改正颜色，文字内容。为“YourBestScore”10、选择“YourBestScore”的lable11、最后结果以下：12、重复第9步骤，创立游戏播放标签，创立子标签，TAPTOPLAY。13,设置背风景，选择MainCamera，将种类改为solidcolor到此为止完成开始界面的设置第二个界面设置界面的制作制作前，先将第一个界面进行整理，选中UIRoot，右键Panel（面板，容器）将所有的物体（除了camer外）移入Panel

11、中，就能够一次性挪动物体了，将Panel命名为StartPanel。3、选中UIRoot，利用缩下班具，右键创立一个新的Panel，命名为SetingsPanel。将StartPanel隐蔽，去掉前面的勾。4、选中SetingsPanel，利用缩下班具，右键创立一个Sprite，图片改正为bg，并改正透明度。精心整理5、将半透明图片拉大，超出边框一些，命名为Mask。6、再次选中SetingsPanel，利用缩下班具，右键创立一个Sprite，图片改正为bg，改正大小后，再细节调整。调整后，大家发现图片边沿出现了锯齿解决的方法是给图片进行九宫区分。选中图片，单击右侧的edit改正Border所

12、有为1，增添1像素，种类改为Sliced（九宫布局）。此时，会发现边沿锯齿已经解决。7、选中刚才的Sprit，右键创立一个child的sprit，改正为红色，并调整大小和地点。8、选中红色的Sprit，右键创立一个child的lable，去掉渐变，改正内容。9、选中红色的Sprit，右键创立一个child的Sprit，改正为X图片。10、选中大的白色的Sprit，右键创立一个child的Sprit。改正为声音图片。11、选中声音图标，右键创立一个child的lable，去掉渐变，改正内容12、将SOUND按住ctrl+D复制一份,改正内容。注意：使用UIEventListener为一个按钮绑定

13、点击事件时，绑定的方法名不要与UIEventListener里存在的方法同名NGUI的UI布局商城界面UI布局在游戏的开始界面的中间部分，制作一个“飞机购置商城”，使用左右滑动的方式切换显示商城内的飞机商品。Layer：层，Unity中的所有的物件都是能够指定一个所属的层的。NGUI属于层的第8级。当地静态数据简介当地静态数据，也叫当地配置数据。主要用于储蓄游戏中的一些固定的，且需要重复使用的数据信息，降低与服务器之间的数据传输量。比方：MMORPG手游中的背包系统中的数不胜数的装备,物件,碎片,晶石每一个背包中独立的物件都会对应好多半据：Id，图片，名字，简介，种类，数目假如每次联网都需要服

14、务器将你背包中的所有物件的信息发送到客户端，这个数据量是很大的，比较浪费流量，且性能不高。因此就引出了当地静态数据，重复不变的向来储蓄在当地客户端，此后客户端登录的时候，只需要恳求极少的数据，此后和当地的静态数据组合，生成背包内所有的物件。步骤：1、单击StartPanel，单击右键，creat-Sprit，命名为Speed精心整理2、接着选中Speed，右键创立一个child的lable，命名为Speed_Num完成了加速的界面设计3、同理，按住ctrl+D，复制一个，更更名字为Rotate和Rotate_Num，图片及文字，便完成了旋转的界面设计。4、再次单击5、接着选中StartPane

15、l，单击右键，BuyButton，右键创立一个creat-childSprit的Sprit，命名为BuyButton，命名为Bg。图片改为6、接着选中7、接着选中bg，改变透明度，种类改为九宫格，BuyButton，右键创立一个child的lableBuyButton，右键创立一个child的Sprit，命名为Price，输入5000.，选择星星图片。选择BuyButton，去掉UISprite前面的勾。8、此刻要在2D的相机里面看到3D的物体，怎样实现呢选择StartPanel，右键创立一个Sprite，命名为Model。导入飞机模型，将Materials再从头恩赐以下列图片，将Prefab

16、s下边的Ship_5直接拖到Model里面，恩赐材质(能够新建一个material，进行材质恩赐)。删除里面的3个殊效。飞机沿X轴旋转-90度选择Model，隐蔽。可是大家会发现飞机在game窗口，仍是没有出现精心整理。、怎样解决呢？Layer：层，Unity中的所有的物件都是能够指定一个所属的层的。（前面7个是Unity内置的，灰色的。）NGUI属于层的第8级。接着将选择Ship_5，选择NGUI层，接着放大飞机为5倍，在game窗口便能够看见飞机模型了。切换到3D窗口，往前或许今后挪动，察看飞机模型的现实。我的事例是往前挪动，能够看到飞机模型便清楚了好多。1、单击StartPanel，单击

17、右键，creat-Sprit，命名为Item。2、选择，拖入到Item里面，成为Item的子物体。将Item的隐蔽。到此为止，飞机商品的制作已经完成。接下来设置左右挪动键步骤：3、单击StartPanel，单击右键，creat-Sprit，命名为Shop。4、选择Shop，右键再创立一个Sprit将其挪动到飞机的左边，命名为LeftButton。精心整理按住CTRL+D，复制一份，挪动到右侧，命名为RightButton将整个Item拖入到Shop里面变为其子物体。最后将Shop的隐蔽。到此为止，商城模块的UI已经制作完成。商城功能之XML读取操作课程重点：1.XML简介2.Unity操作XM

18、L1.XML简介什么是XML？XML：可扩展标志语言。XML近似于HTML，都是标签（标志）语言。在软件开发的各个领域（Web，Android，IOS，Game，EXE.）都能够看到XML文件的身影。XML的作用是用于传输和储蓄数据。XML自己就是一个储蓄的文本。2.XML的语法结构XML文档的语法结构最后是一个树状结构。主要构成部分：根元素，子元素，属性，文本。3.XML注意事项XML标签对大小写很敏感；XML标签必然正确的嵌套；XML标签中的属性值必然加（双）引号；XML文档必然有根元素。Unity操作XML读取XML中的数据并显现出来实例化一个XML文档操作对象；使用XML对象加载XML

19、；获得根节点；精心整理获得根节点下所有子节点；遍历输出。usingUnityEngine;usingSystem.Collections;usingSystem.Xml;/引入XML操作有关的命名空间.XML操作演示.publicclassXMLDemo:MonoBehaviour定义一个字段,储蓄xml的路径.privatestringxmlPath=Assets/Datas/web.xml;voidStart()ReadXMLByPath(xmlPath);经过路径读取XML中的数据进行显示./xml的路径地点privatevoidReadXMLByPath(stringpath)/实例化

20、一个XML文档操作对象.XmlDocumentdoc=newXmlDocument();/使用XML对象加载XML.doc.Load(path);/获得根节点.XmlNoderoot=doc.SelectSingleNode(Web);/获得根节点下所有子节点.XmlNodeListnodeList=root.ChildNodes;/遍历输出.foreach(XmlNodenodeinnodeList)/取属性.intid=int.Parse(node.Attributesid.Value);/取文本.stringname=node.ChildNodes0.InnerText;stringur

21、l=node.ChildNodes1.InnerText;Debug.Log(id+-+name+-+url);实体类储蓄创立商品Item实体类，并将XML中的数据储蓄到Item中，最后封装为一个List数据会合，这个List的结构合XML文档的结构是完满相同的。独一的差别就是一个储蓄在硬盘中，而一个储蓄在内存中。步骤1、将ShopData.XML拖入到Datas文件夹里面。精心整理2、在script新建一个文件夹为Shop，新建一个ShopData脚本，将其挂载到MainCamera上。using?UnityEngine;using?System.Collections;using/为Lis

22、t会合，引入命名空间。using?System.Xml;/?/?商城功能模块数据操作./?public?class?ShopData?:?MonoBehaviour?private?string?xmlPath?=?Assets/Datas/ShopData.xml;/用于储蓄XML数据的实领悟合，定义List会合，并实例化。private?List?shopList?=?new?List();void?Start?()?ReadXmlByPath(xmlPath);1?DebugListInfo();?/?/?经过指定的路径读取XML文档./?/?xml的路径private?void?Rea

23、dXmlByPath(string?path)?XmlDocument?doc?=?new?XmlDocument();/将对象实例化。?doc.Load(path);/引用该对象的Load方法，将路径载入。?XmlNode?root?=?doc.SelectSingleNode(Shop);/获得根节点。?XmlNodeList?nodeList?=?root.ChildNodes;/获得根节点下所有子节点?foreach(XmlNode?node?in?nodeList)/遍历输出?string?speed?=?node.ChildNodes0.InnerText;?string?rota

24、te?=?node.ChildNodes1.InnerText;?string?model?=?node.ChildNodes2.InnerText;?string?price?=?node.ChildNodes3.InnerText;?/遍历完成后,直接打印输出.?/string?info?=?string.Format(speed:0,?rotate:1,?model:2,?price:3,?speed,?rotate,?model,?price);?/Debug.Log(info);1?/遍历完成后,储蓄到List实领悟合中.2取代1后，就把1中的数据输出到工作台变为储蓄到List实领悟

25、合中。?ShopItem?item?=?new?ShopItem(speed,?rotate,?model,?price);/实例化item精心整理?shopList.Add(item);/调用Add方法将item加入到List会合中去。?/?/?测试函数,测试List中的数据./?private?void?DebugListInfo()?for(int?i?=?0;?i?shopList.Count;?i+)?Debug.Log(shopListi.ToString();/调用ShopItem脚本的?public?override?string?ToString()。?ShopItem脚本：

26、该脚本不用挂载就任何物体里面。/?/?商城物件Item实体类./?public?class?ShopItem?private?string?speed;?private?string?rotate;?private?string?model;?private?string?price;面向对象里面的结构public?ShopItem(string?speed,?string?rotate,?string?model,?string?price)?/赋值?this.speed?=?speed;?this.rotate?=?rotate;?this.model?=?model;?this.pric

27、e?=?price;?封装接见属性。public?string?Speed?get?return?speed;?set?speed?=?value;?public?string?Rotate?get?return?rotate;?set?rotate?=?value;?精心整理public?string?Model?get?return?model;?set?model?=?value;?public?string?Price?get?return?price;?set?price?=?value;?public?override?string?ToString()?return?string

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

29、一个脚本ShopManager，将脚ShopManager挂载到物体Shop上。精心整理商品飞机模型显现飞机模型办理，包括缩放模型大小，删除殊效显示；实例化飞机模型。步骤：上边一节课，已经将所有的商品实例化除了，一个4个，可是飞机模型仍是默认的，并未显现出对应的模型。1.将拖入到面板中，双击翻开其身上挂载的脚本2、导入其余的飞机模型，复制一份，命名为ShipUI,3、将ShipUI拖入到5、改正ShopData里面的脚本，调用模型ShipUI/Ship_1，将贴图从头恩赐6、翻开，增添GameObject?item?=?NGUITools.AddChild(gameObject,?ui_ShopItem);?/加载对应的飞机模型.7.改正的脚本所有的飞机模型都要放在model的下边，实例化作为其子物体此后调用。privateGameObjectshipParent;/飞机模型的父物体.接着查找父物体?shipParent?=?m_Transform.FindChild(Model).gameObject;经过设置参数，传达飞机模型：精心整理?GameObject?ship?=?NGUITools.AddChild(shipParent,?m