4月8日unity界面设计

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

2、1工程创立创立相应的资源治理目录；2NGU入例如工程局部不要导入；3相关工程资源导入UI图片,相关模型资源等；4Atlas制作UI图片制作成图集.2 .屏幕自适应设置1 .显示分辨率以及比例本套课程以16:9的分辨率进行自适应处理.比例值是：1920/1080=1.7771920*10801280*720仅供个人学习参考960*540720*405640*360320*1802 .NGUI初步实现UI自适应Game®板创立显示用的分辨率尺寸；UlRoot组件相关设置：1缩放类型：ConstrainedOnMobiles2内容宽度/高度：填写数值,勾选 Fit3 .场景之间跳转1 .场

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

4、面即可,发现菜单栏出现了 NGUI就成功安装了4、如果发现错误,那么在翻开NGUImenU?本,将下面两句代码注释,保存脚本,错误就消失了./MenuItem("NGUI/",?false,?11)?static?void?Breaker?()?5、在文件夹Textures ,再新建一个文件夹,命名为 UI,选中下面的图片rontroL-S png home, pnglea pinglogo.pngright pngnotte pngwrting.pngspeedLpngstar pngttartpogtme.png直接拖入到UI文件夹中,完成图片的导入操作.6、在Asse

5、ts文件夹下面新建1个文件夹,命名为Fonts ,将字体拖入,完成字体的导入.7、回到UI文件夹,按住shift键,框选所有的图集,单击右键,选中OpenAtlasMaker.单击creat创立一个图集.保存在 Atlas文件夹下,命名为GameUI这样一个图集就制作完毕8、在game9 口下单击9、仓I建 2DUI 10、切换到2D窗口.仅供个人学习参考11、调整摄像机的大小12、选择540X960的分辨率.13、设置UI组件选中Ulroot ,选择右边参数设置测试下场景回到sence界面,选中Ulroot ,创立sprite 图片.Ctrl+D ,更改位置回到game窗口,选中几种不同的分

6、辨率,会发现 5个图片的位置不会变实现场景之间的跳转.*2 021、 ctrl+N ； ctrl+s ,另存为 可.?,当前有两个场景.2、 在02_1场景里面,创立一个cube物体,保存好3、 在script 创立一个脚本sencejump脚本4、 将脚本拖到场景02的中间图片上.5、 代码：I 1 "-p ' Iusing ?UnityEngine;using ?System.Collections;using ?UnityEngine.SceneManagement; / 弓I入命名空间.public ?class ?SceneJump?:? MonoBehaviour

7、 ?void ?Update?()? if (Input .GetKeyDown( KeyCode.Space)? SceneManager .LoadScene( "02_1");?注意的是要将02和02_1都拖入到BuildSettings 的“打包面板. 到此为止,就可以按住空格键实现场景跳转了.第2课：游戏UI界面元素布局上课程要点：1 .UI元素制作比例2 .开始界面UI制作1 .UI元素制作比例在公司实际工程的开发过程中,美术相关人员(UI设计)会给出参考图,以及 切分好的UI素材图片.在美术人员设计UI界面的时候,是有一个整体的参考 尺寸的.我们在Unity中

8、制作UI的时候,就要按该参考图的尺寸定义原始的场 景分辨率尺寸.仅供个人学习参考本套案例的原始制作比例是1920*1080.2 .开始界面UI制作我们是可以根据UI将游戏分割成不同的场景来分开制作,然后使 用场景跳转功能最终将游戏串联起来.3 .UI场景制作这个案例,根据UI可以分割成两个场景：开始场景,游戏场景.本节课程制作开始场景Start.unity .开始场景有两个UI界面组成：开始UI,设置UI.步骤:1、可以根据上节课的案例将场景更改2、翻开02场景,选择左边的一个sprite,单击右边的蕈 叵 UI Sprite (Script)GameUll (UIAtlas)SpriteEd

9、it里面的Sprite,选择需要的图片就可以了.细节：1、涉及到屏幕比例时,需要更改 MUI Root (Script)口仇|Scaling StyleCon5trained On MobiJ« t-Content Width1080Fit 0Content Height1920Fit 0C GameB (1030x1920)Q Asset Storedirtion 174x309显示非常大.如:2、a缩放后, Widget;缩放的AspectBased On Width ；右边下拉框选择或者其他两种类型,接着缩放一定的比例.b当然也可以选择物体,利用 仅供个人学习参考直接缩放,或者

10、直接输入大小最后效果如下：比拟符合屏幕的实际需要比方在 上运行3、移动图片时使用移开工具一进行移动.c如果屏幕的比例比拟大,比方 1920*1080.只要使用原来的大小即可即图片可以适当大 些4、选择该图片,切换到缩放工具工U ,单击右键,选择创立lable的child.5、选择lable ,单击右边的font旁边的设置,选择导入的字体.制作开始场景1、将文件命名为start2、翻开2DUI2、将两种比例都调整为1920*108003、选择缩放工具,单击右键添加一个sprite, Widgetvotepth4、将图片移动到左上角,单击 snap- 尺寸.Back |.ForwaidSnap,此

11、时的图片为正式的原始5、选择10、11、12、,选中刚刚的星星图片,选中lable-child6、将文字更改大小,左对齐,去掉渐变,更改颜色.左对齐操作7、用同样的方法,制作下面的场景.即同样选中UIRoot,利用缩放工具,右键创立sprit ,选择声音图标的图片.,单击 snap.更名为Audio声音图标后期会是一个按钮.8、重复第7步骤,完成下面图标的添加.也可以利用ctrl+D通过复制相同的图标,进行修改9、选中UIRoot,利用缩放工具,右键创立Lable,同样去掉渐变,更改颜色,文字内容.为“YourBestScore 选择“ YourBestScore 的lable ,创立子标签,

12、最终结果如下：重复第9步骤,创立游戏播放标签TAPTOPLAY13,设置背景色,选择 MainCamera将类型改为solidcolor 到此为止完成开始界面的设置第二个界面设置界面的制作仅供个人学习参考制作前,先将第一个界面进行整理,选中 UlRoot,右键Panel 面板,容器将所有的物体除了 camer外移入Panel中,就可以一次性移动物体了,将 Panel命名为 StartPanel .3、选中UlRoot,利用缩放工具,右键创立一个新的 Panel,命名为SetingsPanel.将StartPanel 隐藏,去掉前面的勾.4、选中SetingsPanel ,利用缩放工具,右键创立

13、一个 Sprite ,图片更改为bg,并更改透明度.5、将半透明图片拉大,超过边框一些,命名为Mask6、再次选中SetingsPanel ,利用缩放工具,右键创立一个Sprite ,图片更改为bg,更改大小后, 再细节调整.调整后,大家发现图片边缘出现了锯齿解决的方法是给图片进行九宫划分.r I选中图片,单击右边的edit更改Border全部为1,增加1像素,类型改为Sliced 九宫布局.此时,会发现边缘锯齿已经解决.7、选中刚刚的Sprit ,右键创立一个child的sprit ,更改为红色,并调整大小和位置.8、选中红色的Sprit ,右键创立一个child的lable ,去掉渐变,更

14、改内容.9、选中红色的Sprit ,右键创立一个child 的Sprit ,更改为X图片.10、选中大的白色的Sprit ,右键创立一个child的Sprit.更改为声音图片.11、选中声音图标,右键创立一个child的lable ,去掉渐变,更改内容12、将SOUNDS住ctrl+D 复制一份,更改内容.注意：使用UIEventListener 为一个按钮绑定点击事件时,绑定的方法名不要与UIEventListener 里存在的方法同名INGUI的UI布局1 .商城界面UI布局在游戏的开始界面的中间局部,制作一个“飞机购置商城,使用左右滑动的方式切换显示商城 内的飞机商品.Layer：层,U

15、nity中的所有的物品都是可以指定一个所属的层的.NGUI属于层的第8级.2 .本地静态数据简介本地静态数据,也叫本地配置数据.主要用于存储游戏中的一些固定的,且需要重复使用的数据信息,降低与效劳器 之间的数据传输量.比方：MMOR嗝中的背包系统中的成百上千的装备,物品,碎片,晶石每一个背包中独立的物品都会对应很多数据：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 ,右键创立一个child的Sprit ,命名为Bg.图片改为bg,改

17、变透明度,类型改为九宫格,i I6、接着选中BuyButton ,右键创立一个child的lable ,命名为Price ,输入5000.7、接着选中BuyButton ,右键创立一个child的Sprit ,选择星星图片.0选择BuyButton,去掉UISprite前面的勾.8、现在要在2D的相机里面看到3D勺物体,如何实现呢选择StartPanel ,右键创立一个Sprite ,命名为Model.导入飞机模型,将Materials再重新赋予下列图片,将Prefabs下面的Ship_5直接拖至U Model里面,赋 予材质可以新建一个material ,进行材质赋予.删除里面的3个特效.飞

18、机沿X轴旋转-90度 仅供个人学习参考L5J八T 6 L Ul Sprite (Script)| 用加竽GameUIl (UIAt gSprite star选才M Model,隐藏但是大家会发现飞机在game0 口,还是没有出现如何解决呢？Layer:层,UNty中的所有的物品都是可以指定一个所属的层的.前面7个是UMty内置的,灰色的.NGUI属于层的第8级接着将选择Ship_5,选择NGUI层,接着放大飞机为5倍,在game窗口便可以看见飞机模型了 切换到3D窗口,往前或者往后移动,观察飞机模型的现实.我的案例是往前移动,可以看到飞机模型便清楚了很多.2、拖入到Item里面,成为Item

19、的子物体.1、单击 StartPanel ,单击右键,；creat- » Sprit ,命名为 Item.ItemSpeed Rotate BuyButton Model仅供个人学习参考事国口111Sprite (Script)口 0T| Atlas| GameUIl UIAt白Edit 1Sprite starEdit 1TvnsSimclEF I将Item的到此为止,飞机商品的制作已经完成.接下来设置左右移动键步骤：3、单击 StartPanel ,单击右键,creat- » Sprit ,命名为 Shop4、选择Shop,右键再创立一个 Sprit将其移动到飞机的左侧

20、,命名为LeftButton .按住CTRL+D复制一份,移动到右边,命名为 RightButton将整个Item拖入到Shop里面变成其子物体.,同 CJui Sprite (Seript)最后将Shop的I4廿日8SpriteGameUU(UIAt O E$t |到此为止,商城模块的UI已经制作完毕.商城功能之XML读取操作课程要点:1.XML简介2.Unity 操作 XML1.XML简介1 .什么是XML2XML可扩展标记语言.XM类似于HTML都是标签(标记)语言.在软件开发的各个领域(Web Android , IOS, Game EXE.)都可以看到XM及:件的身影.XM的作用是用

21、于传输和存储数据.XM L*身就是一个存储的文本.2 .XMU勺语法结构XM文档的语法结构最终是一个树状结构.主要组成局部：根元素,子元素,属性,文本.仅供个人学习参考3 .XMLS意事项XM标签对大小写很敏感；XM标签必须正确的嵌套；XM标签中的属性值必须加(双)引号；XML文档必须有根元素.Unity 操作 XML1.读取XM中的数据并展示出来< 1>实例化一个XMLC档操作对象；< 2>>用XML寸象加载XML< 3术取根节点；< 4术取根节点下所有子节点；< 5>遍历"输出.usingUnityEngine;usingSy

22、stem.Collections;usingSystem.Xml;/引入XMLS作相关的命名空间/<summary>/XML操作演示./</summary>publicclassXMLDemo:MonoBehaviour/定义一个字段,存储xml的路径.iprivatestringxmlPath="Assets/Datas/web.xml"voidStart()ReadXMLByPath(xmlPath);/<summary>/通过路径读取XML中的数据进行显示./</summary>/<paramname="

23、path">xml 的路径地址 </param> privatevoidReadXMLByPath(stringpath)/<1>实例化一个XML±档操彳(寸象.XmlDocumentdoc=newXmlDocument();/<2>使用XMLM象力口载XML.doc.Load(path);/<3>获取根节点.XmlNoderoot=doc.SelectSingleNode("Web");/<4>获取根节点下所有子节点.XmlNodeListnodeList=root.ChildNodes

24、;/<5>遍历"输出.foreach(XmlNodenodeinnodeList)/取属性.intid=int.Parse(node.Attributes"id".Value);仅供个人学习参考/取文本.stringname=node.ChildNodes0.InnerText;stringurl=node.ChildNodes1.InnerText;Debug.Log(id+"-"+name+"-"+url); 2.实体类存储创立商品Item实体类,并将XM中的数据存储到Item中,最终封装为一个 List数据

25、集合,这个List的结构合XMLC档的结构是完全一样的.唯一的区别就是一个存储在硬盘中,而一个存储在内存中. 步骤1、 将ShopData.XML拖入到Datas文件夹里面.2、 在script 新建一个文件夹为 Shop,新建一个ShopData脚本,将其挂载到 MainCamera上using ?UnityEngine;, -using ?System.Collections;using /为List集合,引入命名空间.using ?System.Xml;/?<summary>/?商城功能模块数据操作./?</summary>Ipublic ?class ?Shop

26、Data ?:? MonoBehaviour ? private ?string ?xmlPath?=? "Assets/Datas/ShopData.xml" ;?/用于存储XML数据的实体集合,定义List集合,并实例化.? private ?List <ShopItem >?shopList?=? new?List <ShopItem >();?void ?Start?()?ReadXmlByPath(xmlPath);1?DebugListInfo();? /?<summary>?/?通过指定的路径读取 XML文档.? /?<

27、;/summary>?/?<param?name="path">xml 的路径 </param>? private ?void ?ReadXmlByPath( string ?path)? XmlDocument ?doc?=? new?XmlDocument ();/ 将对象实例化.?doc.Load(path);引用该对象的Load方法,将路径载入.? XmlNode?root?=?doc.SelectSingleNode( "Shop" );/ 获取根节点.? XmlNodeList ?nodeList?=?root.

28、ChildNodes;/获取根节点下所有子节点? foreach (XmlNode?node? in ?nodeList)/ 遍历输出仅供个人学习参考? string ? string ? string ? string0.InnerText;1 .InnerText;2 .InnerText;3 .InnerText;?speed?=?node.ChildNodes ?rotate?=?node.ChildNodes ?model?=?node.ChildNodes ?price?=?node.ChildNodes ? /<1>遍历完毕后,直接打印输出.? string?info

29、?=?string.Format("speed:0,?rotate:1,?model:2,?price:3,?speed,?rotate,?model,?price);? /Debug.Log(info);1? /<2>遍历完毕后,存储到List实体集合中.-2 替换1后,就把1中的数据输出到工作台变成存储到List实体集合中? ShopItem ?item?=? new?ShopItem (speed,?rotate,?model,?price);/实例化 item?shopList.Add(item);/ 调用 Add 方法将 item 参加到 List 集合中去.?

30、 I? /?<summary>?/?测试函数,测试List中的数据.? /?</summary>? private ?void ?DebugListInfo() ? for (int ?i?=? 0;?i?<?shopList.Count;?i+)? Debug.Log(shopListi. ToString ();/ 调用 ShopItem 脚 本的？public ?override ?string ?ToString().? ?l_'iShopItem脚本：该脚本不用挂载到任何物体里面./?<summary>/?商城物品Item实体类./?

31、</summary>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 .

32、model?=?model;? this .price?=?price;?/封装访问属性.? public ?string ?Speed? get ? return ?speed;? set ?speed?=?value;? public ?string ?Rotate?, , , I? get ? return ?rotate;? set ?rotate?=?value;?public ?string ?Model? get ? return ?model;? set ?model?=?value;? public ?string ?Price? get ? return ?price;?

33、set ?price?=?value;?I 痔、Xi 1"-I? public ?override ?string ?ToString()?, , , I? return ?string .Format( "speed:0,?rotate:1,?model:2,?price:3,?speed,?rotate,?model,?price);?商城功能之XML物品生成1 .将文件夹Item更名为ShopItem 2、增加一个ShopItem标签2 .将 ShopItem 选择 ShopItem 标签仅供个人学习参考3、在Resource文件夹创立一个文件夹UICreate -C

34、l All Prefab Q All Script!4 Assets» Atlas Datas* Fants Materials 知 Models卜 1 NGUI Prefabs . Resource弓CFFlmMAssets Resources ,将面板上的Shopitem拖入至I UI文件夹里,4、在Script的Sho眩件夹里面创立一个脚本 ShopitemUI,将脚ShopItemUI挂载到物体Shopitem上,翻开编程.Revsit5、选择物体ShopItem,点击o rmApply.仇6、在Script的Sho眩件夹里面创立一个脚本ShopManager将脚ShopMa

35、nage挂载到物体Shop商品飞机模型展现飞机模型处理,包含缩放模型大小,删除特效显示;实例化飞机模型.步骤:上面一节课,已经将所有的商品实例化除了,一个4个,但是飞机模型还是默认的,并未展现出对应的模型.1.将AtlasJ Datas* Fonts 一 MaterialsModels_ NGUI. Prefabs一 Resource仅供个人学习参考Shopitem拖入到面板中,urn Wl IMI 3写、 UI RootCamera StaitPanel Setinfl&PanelShopItem翻开其身上挂载的脚本43 01安 AllPrefabs_ Elements2、导入其余的

36、飞机模型,复制一份,命名为ShipUlShipUl prera&s_ Resources*= ShipUl3、将ShipUl拖入到 二w,将贴图重新赋予5、更改ShopData里面的脚本,调用模型<model >ShipUI/Ship_1</ model > 一!,IShopManager6、翻开 力,添加GameObject ?item?=? NGUITools .AddChild(gameObject,?ui_ShopItem);? /加载对应的飞机模型.r / /一 , ShopneiTiJi.H .i r7 .更改的脚本所有的飞机模型都要放在 model的下面,实例化作为其子物体然后调用.privateGameObjectshipParent;/ 飞机模型的父物体.接着查找父物体?shipParent?=?m_Transform.FindChild( "M