2019-02-07 16:23:34 Jaihk662 阅读数 248

 

一、安装NGUI

NUGI:最强大的UI系统之一

是个额外需要下载的插件:https://pan.baidu.com/s/1IFjAX6Bp2itilBaBHTPmSw (3.10.0smva)

下载后可以得到一个 .unitypackage 后缀的资源包,新建Unity项目直接导入即可

 

二、NGUI文件夹

  1. Editor:编辑器扩展
  2. Examples:示例工程
  3. Resources:资源文件
  4. Scripts:脚本组件(非常重要)

Unity是基于组件形式的引擎,任何功能都是一个独立的组件;组件其实就是一个类,一个对象,一个脚本文件,NGUI中所有的 UI也都是通过组件的形式体现的  

示例工程:NGUI/Examples/Scenes

 

2019-02-07 16:53:43 Jaihk662 阅读数 233

 

前文:https://blog.csdn.net/Jaihk662/article/details/86771968(NGUI插件介绍)

一、NGUI层次关系

先创建一个用于显示文字的“游戏物体”:NGUI→Create→Label

之后就可以看到NGUI的默认层次结构如下:

  • UI Root:所有的 NGUI 元素都是 UI Root 的子物体
  • Camera:用于渲染 NGUI 的摄像机
  • Lable:游戏物体标签

 

二、Scene中的NGUI

Scene 视图紫色的矩形,就是 NGUI(UI Root) 的操作范围,如下:

切换到2D模式后,选中紫色边框右键就可以进行设置,如下:

如果觉得摄像机组件的图标太大了,还可以调整灯光/摄像机组件图标大小:

 

三、Prefab Toolbar预制体工具栏

预制体工具栏,其实就是 NGUI 提供的一些现成的 UI 功能元素的预制体文件,也可以理解为自带的资源

打开方式:NGUI→Open→Prefab Toolbar

 

2013-12-03 11:15:25 u012465377 阅读数 706

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


UICamera-可以添加到任何相机,包含事件系统.


UICamera是每个UI的重要组成部分.它负责发送Camera中所有NGUI的活动.如果场景中仅有一个Camera,要确保它附有UICamera脚本.如果有多个相机,确保至少用来渲染UI的相机有UICamera脚本.当将这个脚本放在主相机上时,在游戏场景中的所有都将有OnClick, OnHover, OnDrag等事件.



参数
Tooltip Delay:设定悬停与对象多少秒才执行OnTooltip事件.
如果使用Orthographic Projection相机,建议将相机的Size的尺寸设置为当前分辨率高度的一半.比如针对iPad的屏幕1024*768分辨率,就设置Size为384.另外一种方法是保持Size是1,缩放UI的Root为该值的倒数,比如在iPad上获得完美尺寸你需要设置Root的缩放到1/384或者0.002604167.第二种方法比较容易实行,不过物体在场景视图中照比其他物体会比较小.

如果你仍旧不知道怎么设置正交相机的尺寸,那么尝试看看下面这图.



UIAtlas-定义精灵的纹理图


UIAtlas是一个容器,它包含了一堆sprite的坐标信息.如果你不熟悉这个概念.你可以这样认为:使用一张包含很多小贴图的大贴图比用若干张小贴图更有效率.而大贴图中的小的贴图被称作为精灵(sprite),大纹理成为图集(atlas).

你使用NGUI之前都需要创建一个图集(或使用现有的).可以从这里了解图集的做法.当然也可以直接使用UITexture,但它并不能应对所有问题.



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.



如果你是用Photoshop创建图集,你能通过选择工具配合info panel面板来找出精灵的位置和尺寸.    



UIFont-字体图集
UIFont可以设置UI所使用的字体数据和材质.可以使用免费的BMFont,或使用更专业的Glyph Designer.一般只做一次字体,保存为一个预设,作为新标签所用的字体.参数:



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),它唯一用途就是绘制地图集的一部分.



参数
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被用来显示文字.支持多行,只需要用”
“换行即可.允许用[RrGgBb]来建立彩色文字.



参数:
Transform:是很重要的一个组件,每个控件都可以通过Transform来进行位置和大小的调整.它也会影响到”Make Pixel-Perfect”.你可以在它和UICamera之间任选一个来进行”完美像素”的调整.
UIFont:你可以选择用于这个标签的字体.你可以拖拽预设或者按下按钮选择最近使用的字体.
可以通过使用”
“来决定标签是多行还是单行,同样可以用16进制颜色值来定义彩色文字,以[RrGgBb]开始,以[-]结束.如”Hello [FF0000]World[-]!”,最后的结果是World是红色的文字.
Line Width:用来指定文字行的最大宽度,如果是单行文本则切掉超出的.如多行文本则会根据宽度自动换行.
Multi-line:选择该项后标签达到最大宽度后会自动换行.
Password:勾选后字符将自动转为星号.
Encoding:勾选后会关闭特殊字符处理,一般用于输入框.
Depth:改边标签控件的层级.
Color Tint:更改文本的主色调.
Make Pixel-Perfect: 让你快速调整控件的尺寸到实际像素尺寸.
Pivot:选择部件的坐标原点位置.
Preview:预览精灵的纹理.

提示:
如果你看到文本闪烁或看到被其他控件覆盖了.那么就要调整它的深度.
如果遇到复杂字符串(如斜体,标点,括号混合的)需要增加行宽度避免超宽.
用”
“和颜色,仅一个标签就可以做到下面的效果.



UIPanel-为控件分组,用于管理和优化DrawCalls

UIPanel用来负责创建实际的几何体.不必特别添加UIPanel,只要创建一个控件,它就会自动被添加.你可以创建多个Panel,用于多个菜单.



参数:
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上,它会自动进行完美像素处理.
如果将它用于一个对象,它将辅助对象在屏幕上的定位,比如侧边或者角落.
比如放在一个精灵上,可以用来将精灵自动填满整个屏幕,比如做个背景.



参数:
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-事件系统
你可以添加下面的方法脚本到控件或者带有碰撞盒的游戏对象,当然也可以赋予给相机,不过需要相机同时有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的游戏对象.
void OnInput (string text):当一个OnSelect发生后在同一个碰撞器上触发输入.一般只有UIInput用它.
void OnTooltip (bool show):当鼠标悬停超过tooltipDelay时间后触发该命令.触摸设备上不会有作用.

可以用UICamera.lastCamera找到谁发出的事件,可用UICamera.lastHit得到谁接受这个事件,以及用UICamera.lastTouchPosition得到触摸或屏幕的位置

下面的脚本赋予一个碰撞器时,点击这个碰撞器会输出HelloWorld.



原文:http://www.tasharen.com/?page_id=197
由威阿翻译,转载请注明来自1Vr.Cn
2014-11-03 20:58:07 qinglongyanyuezhu 阅读数 3657


NGUI是unity3D开发中常用的UI制作插件,它提供了丰富的UI组件,为开发者提供了极大的方便。作为一个手游开发者,面对纷繁复杂的机型,UI的自适应是一个很大的问题,还好NGUI为广大开发者提供了非常方便的自适应解决方案。


在NGUI的整个UI框架中,UIRoot是必不可少的,UI视口的大小是由 NGUI的UIRoot脚本决定的。NGUI的其他控件,如 UIPanel UITexture UISprite UIlabel 等组件,都是继承自UIRect组件,这些组建在Inspector面板中都能够看到Anchor选项,可以选择对应的自适应模式:

None即不进行自适应,不管屏幕分辨率怎么改变,位置保持不变;

Unified 标准自适应,选择后可以选择一个Target,及相对于target的上下左右偏移量,当分辨率改变或者target的尺寸发生变化的时候,UIRect会根据相对于Target的偏移量进行相应的移动缩放等变化。

Advance,上下左右四个边可以分别指定一个Target,当然也可以不指定。


在NGUI3.7.x之前的版本中,UIRoot的 ScalingStyle 由三种不同的选项:

PixelPerfect,

FixedSize,

FixedSizeOnMobiles


PixelPerfect 就是UI显示以图片的真实像素为准,在Minimum Hight 和Maximum Hight 范围内,不进行缩放,图片是多大就是多大,当超过这个范围后,就以此最小值,或最大值的显示范围为准。


FixedSize 也即UI根据设备当前的分辨率自动进行缩放。

FixedSizeOnMobiles 是以上两种的结合,当程序运行在android iOS wp 等移动设备上时,使用FixedSize 模式,其他情况下使用PixelPerfect模式。

因在移动设备中PixelPerfect模式不常用,这里重点说明下FixedSize 模式下的自适应方案。

在FixedSize模式下,UIRoot有个Manual Height 参数,这个就是参考屏幕的高度,在横屏模式下,如果游戏的UI设计是以960*640分辨率为基准的,那么这个值就填640,那么不管在任何分辨率下,都会保证高度不变,宽度根据实际分辨率的比例扩大显示范围,如在1136 * 640分辨率下,显示范围就是1136 * 640 ,在854 * 480 分辨率下,根据显示高度为640,那么宽度就是(640 /480)*854 = 1138.66666,显示范围就是1138*640。为了使在不同分辨率下都能显示背景图,往往会吧背景图做的大一些,以下是不同分辨率下的效果图,图中左中右三个小图片分别根据anchor设置居左对齐,无 ,右对齐:

背景图: 



960*640分辨率下:


 1136*640下:



854* 480下: 




 

以上三种分辨率中,宽高比:

960*640 :1.5,

1136*640 :1.775,

854*480:1.779,

因为我们的UI都是以960*640为基准设计的,当在1136*640和854*480这些宽高比大于960*640的时候,视口范围会自动向两边扩展,按钮等组建也会随之向两边扩展,那么问题来了!1024*768分辨率宽高比:1.33333,小于1.5,视口依旧是高度不变,宽度缩小,就出现了下面的情况:

 

因为宽度缩小,按钮依旧是左/ 右对齐,就会导致按钮相互重叠!

出现这种问题怎么办?如果我们以1024*768分辨率做为参考分辨率,那么所有其他的宽高比大于1.333的分辨率下都是宽度向两边扩展,貌似不会出现重叠的问题,但是如果分辨率宽高比比这个更小呢(虽然现在貌似除了黑莓的一款方屏手机外木有其他的奇葩机型了)?并且现在市面上流行的几种分辨率宽高比基本上都在1.7以上,如果以4:3为比例设计UI的话,放在1.7以上的手机上可能会显得比较松散,效果也不够好。最好的解决办法,就是在宽高比小于基准分辨率的宽高比的情况下,使用基于宽度的缩放模式,反之使用基于高度的缩放模式。

在NGUI3.7.0以前,NGUI并没有提供基于宽度缩放的模式,我们就要自己实现了,这个网上也有较多的解决方案,原理都是一样的,基于宽度缩放,几保证宽度960不变,那么在1024*768屏幕下,高度应该为960*3/4 = 720,也就是当我们把UIRoot的ManualHeight设置为720的时候就能保证在此分辨率下是基于高度缩放了。下边是个人根据网上的方案修改的一个脚本:

public class AutoScale : MonoBehaviour
{

    static int SCREEN_WIDTH = 960;
    static int SCREEN_HEIGHT = 640;
    int mScreenWidth;
    int mScreenHeight;

    UIRoot root;
    // Use this for initialization
    void Awake()
    {
        mScreenWidth = SCREEN_WIDTH;
        mScreenHeight = SCREEN_HEIGHT;
        root = GetComponent<UIRoot>();
ScaleScreen ();
#if UNITY_EDITOR
UICamera.onScreenResize += ScaleScreen;
#endif
    }

    void ScaleScreen()
    {
        if ((float)Screen.width / (float)Screen.height < (float)SCREEN_WIDTH/(float)SCREEN_HEIGHT)
        {
            root.manualHeight = SCREEN_WIDTH * Screen.height / Screen.width;
        }
        else
        {
            root.manualHeight = (int)SCREEN_HEIGHT;
        }
    }



将这个脚本挂在UIRoot所在的物体下,在游戏开始运行时回自动调整UIRoot到合适的值,在编辑器模式下,如果手动调整分辨率会调用UICamera.onScreenResize委托,此时UIRoot也会重置,便于调试。


在NGUI3.7.0版本中,NGUI的开发人员终于意识到了这种自适应方式的优势,于是在UIRoot中新增了基于宽度缩放的模式,在新版本中,ScaleStyle枚举变成了以下三个:

Flexible,

Constrained,

ConstrainedOnMobiles,

实质上跟以前的版本一个意思,只是在Constrained模式下多了两个选项:

 




ContentWidth 基于宽度缩放,ConentHeight,基于高度缩放,Fit后边的勾表示选择的模式,若只打一个勾就是基于宽度或高度缩放,若两个勾都打上,则会根据所填的960 640为基准,如果宽高比大于1.5就基于高度缩放,反之基于宽度缩放,非常之方便。

最后,关于背景图的大小,宽高比最大的分辨率应该是854*480:1.779,最小的应该是1024*768:1.33333在基于960*640为基准分辨率的模式下,那么为保证在这两者范围内的所有分辨率都能够完美显示背景,背景的大小,至少应是1.779*640 = 1138.56,960/1.333 = 720。这样,设置好UIRoot并且调整好各个组件的相对位置,你的游戏就可以在任意分辨率下完美运行了!

2017-07-31 20:49:35 BattleTiger 阅读数 4560

首先NGUI属于Unity3D的插件,需要先导入资源包,导入完成后工具栏出现NGUI选项
使用方式
第一步:创建画板
1. 点击工具栏上的NGUI选项
2. 选择Create
3. 选择2DUI
第二步:选中UIRoot
4. 在画板上右键点击
5. 选择Create
6. 常用的UI组件
第三步:查看NGUI自带的UI预设体
7. 点击NGUI
8. Open
9. PrefabToolBar

下面对NGUI的各个组件进行使用说明
1. Label:相当于UGUI中的Text

  1. Overflow:
    • shrinkContent:自动调整大小
    • clampContent:普通裁剪方式
    • ResizeFreely:自己固定大小,不可改变
    • ResizeHeight:自己固定大小,可变宽不可变高
  2. Gradient:渐变色(从上到下)
  3. Effect
    - shadow:阴影
    - outline:边框
    - MaxLine:限制最大行数

2.Invisible Widget:容器
3.Simple Texture:简单纹理(相当于UGUI的RawImage)

  1. texture:可以把图片拖到此处

4.Unity2D Sprite:2D精灵
5.Sprite:精灵

1.Atlas:需要添加图集,不能直接添加图片  制作图集的方式:NGUI--->OpenAtlas
2.Flip:翻转
    1.Horizontal:水平翻转
    2.Vertical:垂直翻转
    3.Both:同事翻转
3.Type:类型
    1.Simple:简单的
    2.Sliced:九宫格切割
    3.Tiled:平铺
    4.Filled:填充满
    5.Advanced:对个方向单独操作

6.Panel:与UIRoot一样大的容器(不可变大小)
7.Scroll View:滚动视图

1.添加碰撞体
    右键Attach--->BoxCollider
2.添加滑动脚本
    右键Attach--->DragScrollView
3.Drag Effect:拖拽效果
    1.Momentum:瞬间回弹
    2.Momentum And Spring:自然回弹
4.Scroll Wheel Factor:滚轮滚动的快慢
5.Scroll Bar:
    1.Horizontal:水平滚动条
    2.Vertical:垂直滚动条

8.Grid:格子(类似于UGUI的格子布局)

1.Arrangement:布局方式
    1.Horizontal:水平布局
    2.Vertical:垂直布局
    3.cell snap:
2.Anchors:锚点
    1.None:无
    2.Unified:常用
    3.Advanced:

9.按钮

前面的八个组件都可以设置能button
    首先右键Attach--->BoxCollider
    然后右键Attach--->ButtonScript
添加所有的脚本都是Attach

10.Tween动画

1.Alpha:透明动画
2.Cdor:颜色动画
3.Width:宽
4.Height:高
没有更多推荐了,返回首页