unity NGUIunity3d简单例子教程的问题

来源：蜘蛛抓取(WebSpider) 时间：2016-09-19 10:02 标签： unity做简单的游戏
程序写累了，就来玩玩酷跑小游戏吧，嘿嘿。
雨松MOMO送你一首歌曲，嘿嘿。
NGUI研究院之开始学习制作第一个例子（一）
NGUI研究院之开始学习制作第一个例子（一）
围观111988次
编辑日期： 字体：
NGUI是Unity的一个插件，使用它来制作你的游戏UI必定将事半功倍。为什么这么说呢？首先我们说说GUI与NGUI的区别，GUI是Unity自带的绘制界面工具，它的成像原理是基于表层的，所以执行效率非常的低，并且没有提供复杂的UI的接口，就算开发者硬着头皮写上去只能让UI的执行效率更低。然而NGUI 完全依赖与3D就好比在游戏世界中的摄像机直直的照射在一个平面中，在平面之上再去绘制自己的UI，所以它的执行效率会非常高。
NGUI是一款收费的插件，在Asset Store中大家可以看到价格。在未购买正版的前提下我们可以通过两种方法来使用NGUI，第一种：使用官方提供的免费版本，但是这个版本中有NGUI的水印，无法正式发布不过完全可以作为学习使用。第二种：使用别人购买过的正版插件，在互联网中有朋友放出NGUI的插件。
这里提供免费版本NGUI的下载地址，欢迎大家和MOMO一起学习
插件下载完毕后打开Unity开始导入插件，首先在Project视图中右键选择Import Package-&Custom Package-&ngui_free.unitypackage（刚刚下载至本地的插件）导入完毕后，请刷新一下你的工程确保Unity导航菜单栏中出现NGUI的菜单项，Unity的版本不同可能导致NGUI导入时不存在菜单项，也可以退出Unity在重新进入即可。
首先在新创建的Unity工程中删除Hierarchy视图中原有的摄像机对象，在Unity导航栏菜单中选择NGUI-&Create
a New UI。可以理解为创建摄像机，并且这个摄像机直直的照射在平面中，该平面就是我们的UI平面。如下图所示，点击Create a New UI
菜单项后弹出UI Tool工具栏。Layer下拉列表表示摄像机的显示层，用过摄像机的都应当清楚吧？ Camera下拉列表设置摄像机的朝向是2D 还是3D，最后直接点击Create Your UI即可创建一个新的界面。
接着NGUI会自动帮我们在Hierarchy视图中生成如下的对象关系。
UI ROOT(2D)：看着名字我想搞程序的都应该知道是啥意思吧？界面根节点、入口点。
Camera ：NGUI生成的摄像机对象，它将直直的照射在锚点面板。
Anchor：界面的锚点，影响UI的显示位置。它下面会挂着面板。
Panel：面板，摄像机照射着它，它下面会挂一些控件，比如标签、按钮、精灵、拖动条等等。
接着我们开始创建界面组件，在Unity导航菜单栏中选择NGUI-& Create a Widget创建小部件，然后选择字体与图像集合，这里先选择它自带的图像集合，后面我们在学习如何制作自己的图像集合。接着选择贴图的模板最后完成创建即可，这里我们创建一个简单的贴图。
（点击图片查看大图）
OK下面我们将材质绑定在刚刚创建的Simple Texture身上。如下图所示，Transform中是名对象的变换。
P：X、Y、Z坐标
R：X、Y、Z轴的旋转
S :X可理解为图片宽，Y理解为图片高
刚刚我们创建的模板为Simple Texture，NGUI会帮我们绑定UITexture脚本。
Material：添加的材质对象，为了让材质显示的更加清晰，我们设置材质的着色器为Unlit/Texture
Depth：表示深度，就好比UI绘制的先后顺序，数值越高越先绘制，它主要应用于Sprite精灵（后面详细说），在Simple Texture中设置无效，不过可以通过修改Z轴坐标的形式来更改绘制顺序。
Color Tint： 设置颜色，用于没有贴图的材质。
Correction：自动设置图片宽高，就好比本例中我的图片宽高是128X128，点击该按钮后会自动修改Transform中S的X = 128与Y = 128。
Pivot：贴图显示的锚点，没什么大问题。
Preview：是否在监测面板视图中预览下方我的头像贴图。
继续创建一个Simple Texture 绑定在面板中，男生和女生的头像都显示了出来 嚯嚯。如图所示最后的效果图。
OK接着我们创建一个简单的按钮，Fantasv Atlas是NGUI 资源包中自带的一组图像集合。下一篇文章中我会介绍如何自定义这个图像集合，Template中选择Button，Background选择“NGUI”，“NGUI”是Fantasv Atlas图片集合中的一个图像，我们用他做为我们的按钮背景。
然后编写简单的脚本来监听这个按钮的点击事件、这段代码的意思就是点击按钮后删除女生头像。
12345678910
using UnityEngine;using System.Collections;&public class Test : MonoBehaviour {& void OnClick () {
Destroy(GameObject.Find("Texture1")); }}
OnClik()方法当点击按钮时调用，前提是在UICamera脚本绑定的对象或子对象中，并且该对象具有Box Collider组件。
如下图所示，项目的结构如下。点击按钮后女生头像消失！
background是按钮背景图像，它是由精灵组成
Label是标签框，可以写入文本内容。
（点击图片查看大图）
NGUI真的挺给力的！好玩！好用！有意思！哇咔咔！！
这儿有一篇非常棒的NGUI的文章，推荐大家去学习学习。
最近我使用了一下最新的NGUI版本发现UIAtlas的作法已经和以前的不一样了，在博客中补充一下吧。
切记！一定要先选择需要制作UIAtlas的所有图片。如图所示，首先在Project视图中用鼠标选中所有的图片，接着在导航菜单栏中选择NGUI -& Atlas Maker 。
如果不先选择图片，直接点击Atlas Maker的话，那么你的UIAtlas中就不会有任何精灵了。这里一定要切记！！！然后可以看到刚刚我选择的3张图片已变成精灵添加入UIAtlas中拉。
继续点击Create完成创建。点击sprite下拉按钮 即可看到所有的精灵文件。如下图所示，新版的NGUI会帮我们把所有贴图和并在同一张图片上，宽高都是2次幂这样就很好的避免图片尺寸2次幂比例的问题。
如果你想在原有的Atlas上更新与删除精灵的话。还是先在Project选择需要添加的精灵图片，然后导航菜单栏中选择NGUI -& Atlas Maker
如果删除的话，点击下图中对应精灵的“X”按钮，最后点击 ADD/UpdateALL。 如果只是更新的话就不要点击Replace，他会把你之前精灵全部替换掉。
精灵合集图片生场完毕后，你也可以把之前的单张图片删除掉。 都不影响精灵的使用。
本文固定链接:
转载请注明:
雨松MOMO提醒您：亲，如果您觉得本文不错，快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展，谢谢！
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
如果您愿意花10块钱请我喝一杯咖啡的话，请用手机扫描二维码即可通过支付宝直接向我捐款哦。
您可能还会对这些文章感兴趣！
Pingback 引用通告：Unity3D&NGUI&简单控制UI自适应&by&ZHow
据说NGUI的自适应问题比较难解决，我以目前遇到的自适应问题提出我的解决方案~
问题描述：解决屏幕长宽比变化后，内容溢出相机视野的问题（并不想让图像被从某个方向压扁）
解决思路：建立另一个UISprite（叫做BackgroundBase好了，我图个省事儿写作了BgBase），用代码控制其大小，让UI元素全部依赖这个BgBase
第一步：让BgBase变成想要的大小，大小参考你的UI背景图片
第二步：设定BgBase的【Widget】属性——把Aspect调整为Based On
Width（选择Based On
Height也可，后面的内容也要变动，可以根据你的理解进行修改）
这一步后，BgBase就成了只能调整宽度的元素，之后用代码控制时要记得哦（硬拿代码调整高度的话会没有任何效果出现）。
第三步：建立脚本以控制BgBase的大小。
我建立了名为BgBase.cs的脚本，同时挂在了 游戏物体BgBase 上。
编写脚本，引入UIRoot的子元素之一 —— Camera
我们利用Camera物体上的Camera组件，命名为camera。
Camera组件可以得到相机的尺寸信息，即高，宽，宽高比例
还要利用 游戏物体BgBase的 UISprite 组件，命名为sprite。
UISprite也有它的尺寸信息。并且与Camera的尺寸信息单位相同，都是像素。
第四步：书写调整大小的函数
目标有俩：1.根据camera画面尺寸，阻止宽和高上的画面溢出 2.根据camera画面尺寸，让画面足够大
我们可以先让画面“足够大”，然后解决画面溢出。
将需要确定的值拿出来判断，遇到不合理的，对宽度进行赋值即可。
遇到高度不合理的情况，就换算一下画面更改后的高度对应的宽度（需要借助UISprite的变量aspectRatio得到比例），再对宽度赋值即可
void SetBg()
if (camera.pixelHeight & sprite.height &&
camera.pixelWidth & sprite.width)
sprite.width=camera.pixelW
}//“足够大”达成
if (camera.pixelHeight & sprite.height || camera.pixelWidth
& sprite.width)
if (camera.pixelHeight & sprite.height)
sprite.width = (int)(camera.pixelHeight *
sprite.aspectRatio);
if (camera.pixelWidth & sprite.width)
sprite.width = camera.pixelW
}//“防溢出”达成
是在Update里调用还是Start里调用，看你的咯。
本函数可以解决比较苛刻的长宽比例，放在Update里的话，怎样动都满有效
转载请务必标注出处哟
By ZHow , in&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。鏌ョ湅: 15109|鍥炲?: 10
鍏充簬NGUI鐨凷croll View鐨勪袱绉嶆搷浣渵锛堟垜鍙?粰鏈

我要回帖

更多关于 unity做简单的游戏 的文章

 

随机推荐