Unity界面插件NGUI核心组件说明

素颜马尾好姑娘i 2022-04-22 03:54 234阅读 0赞

UICamera-可以添加到任何相机,包含事件系统.  
  
UICamera是每个UI的重要组成部分.它负责发送Camera中所有NGUI的活动.如果场景中仅有一个Camera,要确保它附有UICamera脚本.如果有多个相机,确保至少用来渲染UI的相机有UICamera脚本.当将这个脚本放在主相机上时,在 [游戏][Link 1]场景中的所有都将有OnClick, OnHover, OnDrag等事件.  
  
![201202102311464.jpg][]  
  
参数  
Tooltip Delay:设定悬停与对象多少秒才执行OnTooltip事件.  
如果使用Orthographic Projection相机,建议将相机的Size的尺寸设置为当前分辨率高度的一半.比如针对iPad的屏幕1024\*768分辨率,就设置Size为384.另外一种方法是保持Size是1,缩放UI的Root为该值的倒数,比如在iPad上获得完美尺寸你需要设置Root的缩放到1/384或者0.002604167.第二种方法比较容易实行,不过物体在场景视图中照比其他物体会比较小.  
  
如果你仍旧不知道怎么设置正交相机的尺寸,那么尝试看看下面这图.  
  
![20120210231250x.jpg][]  
  
UIAtlas-定义精灵的纹理图  
  
  
UIAtlas是一个容器,它包含了一堆sprite的坐标信息.如果你不熟悉这个概念.你可以这样认为:使用一张包含很多小贴图的大贴图比用若干张小贴图更有效率.而大贴图中的小的贴图被称作为精灵(sprite),大纹理成为图集(atlas).  
  
你使用NGUI之前都需要创建一个图集(或使用现有的).可以从这里了解图集的做法.当然也可以直接使用UITexture,但它并不能应对所有问题.  
  
![20120210231412b.jpg][]  
  
Material:是描述绘制本图集的材料.通常推荐用unlit着色器,比如用.Unlit – Transparent Colored为NGUI.  
TP Import：用于导入从TexturePacker导出的精灵.只需要拖拽输出的Txt文件和所有精灵即可.  
Coordinates:这允许你从基于像素的坐标系切换为基于UV的坐标系.通常都是以像素坐标系制作,但如果你需要重新调整纹理,则要先切换为纹理坐标.  
New Sprite:允许已当前选择的精灵为范本创建新的精灵.  
Delete:删除所选精灵.  
Sprite:可以通过下拉列表选择所有正在使用的精灵.  
Edit Name:重命名精灵的名称.  
Outer Rect:设置精灵的外边框.  
Inner Rect 设置精灵的内边框,如果你不使用UISlicedSprite,可以跳过这个设置.  
Padding:微调校正精灵的偏移量  
Correction:基础的校正精灵的坐标使用完美整数像素.  
Show:检查精灵在图集中的位置.  
  
提示  
可以将精灵组织成组创建多个图集.只要图集共享相同的材质,那么控件仍旧会使用很少的DrawCall.  
为达到最佳效果,推荐将纹理的wrap模式设置为"Clamp"和将格式设置为"Truecolor".  
将类似的纹理做成一个图集是很好的方式,但是要尽量减少同时使用的图集数量.  
如果你是使用Texture Packer工具来创建图集,要在输出设置中选择Unity3D.  
  
![201202102314217.jpg][]  
  
如果你是用Photoshop创建图集,你能通过选择工具配合info panel面板来找出精灵的位置和尺寸.      
  
![201202102314264.jpg][]  
  
UIFont-字体图集  
UIFont可以设置UI所使用的字体数据和材质.可以使用免费的BMFont,或使用更专业的Glyph Designer.一般只做一次字体,保存为一个预设,作为新标签所用的字体.参数:  
  
![201202102316403.jpg][]  
  
Import Font:用于导入Glyph Designer.或BMFont输出的FNT(改后缀为TXT)数据.  
UIAtlas:用来设置字体纹理所在的图集,根据是否已选定UIAtlas,你会看到一下选项  
    如果UIAtlas已指定,你可以选择使用字体的精灵.  
    如果没有指定UIAtlas,你可以选择用来绘制字体的材质.在NGUI中通常用"Unlit"类别下的着色器,如“Unlit – Transparent Colored".  
    你可以调整字体在材质纹理内的像素矩形.  
    快速校正完美像素坐标,四舍五入到最近的像素值.  
Spacing:可以调整字符之间的间距.  
Show:检查字体在纹理贴图中的位置.  
  
提示  
为达到最佳效果,推荐将纹理的wrap模式设置为"Clamp"和将格式设置为"Truecolor".  
可以将多个字体合并为一个图集.这样整个UI使用这些字体,仍旧会保持一个DrawCall.  
你可以给字体增加斜角,阴影,描边等效果,只要确保BMFont导出之前你设置好足够的边距和间距就可以了.  
  
UISprite-从图集中画一个精灵  
  
UISprite是第二个不常用的插件(第一个是UITexture),它唯一用途就是绘制地图集的一部分.  
  
![20120210231739a.jpg][]  
  
参数  
Transform:是很重要的一个组件,每个控件都可以通过Transform来进行位置和大小的调整.它也会影响到"Make Pixel-Perfect".你可以在它和UICamera之间任选一个来进行"完美像素"的调整.  
UIAtlas:用来指定所使用的图集.拖拽或者按下左侧的按钮选择最近使用的图集.  
Sprite:选择图集中使用的精灵.选择好精灵后.点击一下"Make Pixel-Perfect"会自动为你调整Transform的尺寸.  
Depth是避免用Unity的Z排序(效率不好),而且如果你要旋转UI窗口.单纯的通过调整每个控件的Transform的Z轴来排序是不行的.所以要用这个深度来排序.  
Color Tint:用来调整色调.  
Make Pixel-Perfect:让你快速调整控件的尺寸到实际像素尺寸.  
Pivot:选择部件的坐标原点位置.  
Preview:预览精灵的纹理.  
  
提示:  
如果你看到两个控件有闪烁,意味着你设置了同样的Depth导致了重叠,你要调整不同的深度,让它们不重叠.  
不要把多个控件混在一起,否则会影响到完美像素这个功能.添加新控件时要注意保持创建新的子对象.  
也可以在使用完美像素按钮后再移动组合控件.  
  
  
  
Label-用指定的字体绘制一个文本标签  
 UILabel被用来显示文字.支持多行,只需要用"\\n"换行即可.允许用\[RrGgBb\]来建立彩色文字.  
  
![20120210231852e.jpg][]  
  
参数:  
Transform:是很重要的一个组件,每个控件都可以通过Transform来进行位置和大小的调整.它也会影响到"Make Pixel-Perfect".你可以在它和UICamera之间任选一个来进行"完美像素"的调整.  
UIFont:你可以选择用于这个标签的字体.你可以拖拽预设或者按下按钮选择最近使用的字体.  
可以通过使用"\\n"来决定标签是多行还是单行,同样可以用16进制颜色值来定义彩色文字,以\[RrGgBb\]开始,以\[-\]结束.如"Hello \[FF0000\]World\[-\]!",最后的结果是World是红色的文字.  
Line Width:用来指定文字行的最大宽度,如果是单行文本则切掉超出的.如多行文本则会根据宽度自动换行.  
Multi-line:选择该项后标签达到最大宽度后会自动换行.  
Password:勾选后字符将自动转为星号.  
Encoding:勾选后会关闭特殊字符处理,一般用于输入框.  
Depth:改边标签控件的层级.  
Color Tint:更改文本的主色调.  
Make Pixel-Perfect: 让你快速调整控件的尺寸到实际像素尺寸.  
Pivot:选择部件的坐标原点位置.  
Preview:预览精灵的纹理.  
  
提示:  
如果你看到文本闪烁或看到被其他控件覆盖了.那么就要调整它的深度.  
如果遇到复杂字符串(如斜体,标点,括号混合的)需要增加行宽度避免超宽.  
用"\\n"和颜色,仅一个标签就可以做到下面的效果.  
  
![20120210231859q.jpg][]  
  
UIPanel-为控件分组,用于管理和优化DrawCalls  
  
UIPanel用来负责创建实际的几何体.不必特别添加UIPanel,只要创建一个控件,它就会自动被添加.你可以创建多个Panel,用于多个菜单.  
  
![20120210231945k.jpg][]  
  
参数:  
Normals:显示法线,用来检查UI正反是否正确.  
Gizmos:用来显示几何体,可供选取用.  
Debug:配合调试检查场景视图的几何体,如果你开启了这个.就应该取消掉上面Gizmos这个选项.  
Widgets:会显示有多少个控件在这个Panel上.  
Draw Calls:可以看到用了多少个DrawCall,这个越低越好.  
Clipping:可以选择你要显示的部分,默认是不进行裁切的.是利用着色器进行裁切的,如果开启这个选项,NGUI将自动切换为有裁切属性的着色器.  
    如果开启裁切.你可以通过Center和Size来设置裁切盒.单位为像素.  
    如果选择柔化边缘裁切,将会有40像素的柔化边缘供处理柔化效果.  
Material:是只读的,可以看面板用了多少个材质.一个材质将占用一个DrawCall.  
  
提示:  
默认情况下如果没有UIPanel的话,会被最根的控件创建并作为其父对象.而且最好让你多个控件都用一个父对象,便于管理.  
如果Panels下没有控件.你可以放心的删除这个面板.  
如果你删除一个存有控件的Panels,它和它下面的控件都会消失,但是当你播放时,所有控件又会重现,因为又自动创建了一个欣的UIPanel.  
当没有变化时,几何体不会重建,这意味着如果有个完全静止的UI,不会没帧都去更新几何形状,相反它也会被重用,提高性能.  
  
    UIAnchor-能让控件自动配合屏幕尺寸,填充满屏和保持真实像素尺寸的UI.  
  
UIAnchor有多种用途,其中包括在多种分辨率的屏幕的相对定位.  
如果你将它放在2D UI的root上,它会自动进行完美像素处理.  
如果将它用于一个对象,它将辅助对象在屏幕上的定位,比如侧边或者角落.  
比如放在一个精灵上,可以用来将精灵自动填满整个屏幕,比如做个背景.  
  
![20120210232017f.jpg][]  
  
参数:  
HUD Camera是用来绘制该对象的相机,通常会自动选择的.  
Side:设置锚点,有4个边,4个角和中心供选择.  
Half Pixel Offset:让控件有半像素的位移以避免DirectX 9在Windows机器上的一个Bug.  
Stretch To Fill:缩放填充,一般做背景时候会使用它.  
Depth Offset:用于基于透视相机时调整计算点的深度.  
  
提示:  
如果对象有UIAnchor这个脚本,它自身的Transform将不接受你的修改,因为它受控于这个脚本.如果你希望添加基于这个锚点的位移,你可以添加一个子对象.比如你希望有个控件始终在屏幕偏移(100,100)这个位置,你应该在层次面板做这样的结构.UI->Anchor->Offset->Widget.  
UIAnchor同样可用于非正交相机.  
如果UIOrthoCamera附加到相机,用UIAnchor创建的界面将固定尺寸和位置,无论你将屏幕尺寸改成多大.  
  
Events-NGUI强大的事件系统  
UIEvents-事件系统  
你可以添加下面的方法脚本到控件或者带有碰撞盒的 [游戏][Link 1]对象,当然也可以赋予给相机,不过需要相机同时有UICamera脚本:  
void OnHover (bool isOver):当鼠标移出或者悬停在某个碰撞器上的时候返回布尔值.在触摸设备上不会有作用.  
void OnPress (bool isDown):当鼠标或者触摸到碰撞器发生布尔值返回.  
void OnSelect (bool selected):当鼠标或者触摸从OnPress发生后的释放将会返回这个布尔值.  
void OnClick():和OnSelect的产生条件相同,当点击或触摸碰撞器并且没有发生拖拽时候触发.  
void OnDrag (Vector2 delta):当移动鼠标或者触摸按下时候位移超过特定阀值时触发.  
void OnDrop (GameObject drag):当鼠标或触摸释放于从发生OnDrag的不同碰撞器伤触发.传递的参数是产生OnDrag的 [游戏][Link 1]对象.  
void OnInput (string text):当一个OnSelect发生后在同一个碰撞器上触发输入.一般只有UIInput用它.  
void OnTooltip (bool show):当鼠标悬停超过tooltipDelay时间后触发该命令.触摸设备上不会有作用.  
  
可以用UICamera.lastCamera找到谁发出的事件,可用UICamera.lastHit得到谁接受这个事件,以及用UICamera.lastTouchPosition得到触摸或屏幕的位置  
  
下面的脚本赋予一个碰撞器时,点击这个碰撞器会输出HelloWorld.  
  
![20120210232042t.jpg][]  
  
原文: [http://www.tasharen.com/?page\_id=197][http_www.tasharen.com_page_id_197]  
由威阿翻译,转载请注明来自1Vr.Cn

[Link 1]: http://1vr.cn/
[201202102311464.jpg]: /images/20220422/2d163c3bf1f04be7b89e0400d1717f55.png
[20120210231250x.jpg]: /images/20220422/da88920eee264491b10f9061e325138d.png
[20120210231412b.jpg]: /images/20220422/9f6655da37034981ad98d25d5b7671c9.png
[201202102314217.jpg]: /images/20220422/cb326b23961a4ed88549acd5d954db40.png
[201202102314264.jpg]: /images/20220422/6c90534ffadf474e8c4d763fabeab7a5.png
[201202102316403.jpg]: /images/20220422/5e607ffa3f394695bf740f4e90d6c73f.png
[20120210231739a.jpg]: /images/20220422/a0d525b4a2894f23a703aeee3ab58340.png
[20120210231852e.jpg]: /images/20220422/0c8b5b2a3d8c4878a7b5801bc7b92cd3.png
[20120210231859q.jpg]: /images/20220422/4c554688f2824455a92e4303877836b0.png
[20120210231945k.jpg]: /images/20220422/dad317b361e541f8946b2c36ab6faeb5.png
[20120210232017f.jpg]: /images/20220422/0180e0ff4f54442c9977cef166b6dba2.png
[20120210232042t.jpg]: /images/20220422/9e88b701e06e46e595858aaa1e504368.png
[http_www.tasharen.com_page_id_197]: http://www.tasharen.com/?page_id=197