插件：NGUI

一、版本

安装完毕后重启一下即可，否则可能创建的UI元素不生效

二、使用

Label文字

1、创建Canvs

2、只有根节点的这些脚本全部展开才能鼠标右键创建UI元素

3、选择字体

 Label添加打字效果

TextList文本列表

Input输入框

Sprite图片

1、选择图集

2、选择图集中的精灵

InvisibleWidget容器

用来装UI的容器，“容器小组长”，一般用来把控件放到里面去，然后再把该容器放到面板中

 Slider滑动条

把子物体赋值给父物体的前景色属性和背景属性，即可把前景图充当拖动条

让右边显示百分比

添加游标

Panel面板

用来装UI的容器，一般UI Root下装多个Panel来把不同功能的控件或“容器小组长”放到里面

1、创建

2、设置面板位置

Button按钮

1、创建Label控件，给控件加碰撞器

2、给Label控件加脚本，就拥有了点击功能，同理其它控件如精灵也可以这样操作，此类按键的命名可以在后缀加个button

控件被点击时会触发这个方法，自己挂脚本即可获取事件信息

3、创建一个带有背景的按钮

Button添加声音

 Widget属性

Anchor锚点

用于设置控件的自适应

上下左右均会适应屏幕大小

小地图一直位于右上角

Tween动画

创建一个透明度的缓动动画

颜色、宽度、高度、位置

旋转、缩放、从一个ui位置到达另一个ui位置

ProgressBae进度条

 创建Sprite

创建血条

创建进度条

去掉碰撞器，因为碰撞器是用来交互的，而这里不需要交互，只需要展示血条

ScrollBar滚动条

Checkbox单选框

再创建一个Sprite用于显示状态改变的标志

保存为预制体

 PopupList下拉列表

创建Label用于显示选中选项的值

将候选项字体设置和已选中的字体一致

NGUI内置了一个可以直接拖来使用

创建图集Atlas

图集的作用是提高性能，使用Sprite时就可以在图集中选择对应的精灵图

将下面的图片制作成图集

使用图集的精灵

删除-图集中的图片

修改-图集中的图片

九宫切图SlicedSprite

切图解决的是边框被拉伸问题，切完后就不会被拉伸了

下面精灵的边框很模糊，点击编辑精灵进行切图处理使其边框不被拉伸

这样设置目的是除了中间那1个格子会被拉伸外，其余8个格子不会被拉伸，因此叫做九宫切图

动态字体制作与显示

静态字体就是将文字写道图片上，使得文字就以图片的显示展示，优点是速度快；

在系统中去拷贝一个可商用的TTF字体

使用动态字体

按钮预制体

方便后续使用，使用时只需要把名字改了即可

优雅的创建脚本

控件拖拽与调节大小

控件拖拽到对应UI上

创建格子

删除系统拖拽脚本，自定义一个拖拽脚本继承它

给三个格子加碰撞器用于检测碰撞

三、实战

案例一：面板切换与设置

创建Lable，添加两个动画组件，改名为仙剑奇侠传

创建Sprite，添加碰撞器进而添加按钮脚本

创建一个Label，用于展示该按钮作用

创建InvisibleWidget容器装title、startGameButton、Label；最后复制2份startGameButton，并改名为选项和退出

分别给三个按钮加声音，有自带的脚本和默认个音源，添加选择即可

创建Label，添加打字效果的脚本

开发设置面板并绑定脚本

将按钮做成预制体，方便后续使用，使用时只需要把名字改了即可

使用NGUI自带的滑块

上面4个控件都有change事件，因此可以绑定脚本的4个函数监听控件数值变化

界面切换动画，点击选项则自己移出去，另一个面板移进来；反之，点击完成设置亦如此

案例二：设计冷却效果

案例三：聊天页面

创建可拖拽的面板和聊天背景图

创建滚动条

创建滑块

添加脚本

创建展示文字的Label

添加脚本

添加输入框

创建脚本

给聊天加上发送者

案例四：背包页面

1、背包物品拖拽功能

创建Sprit背景和子元素格子

做成预制体，创建16个格子

创建用于展示物品的Sprit

创建触发器和Label显示物品数量

创建脚本并将物品做成预制体

 

给Cell添加触发器，只要拖动物体到Cell处就会触发上图代码中surface处的函数

新建脚本持有容器的引用

给格子添加Tag

给物品添加Tag

2、背包捡起物品功能

背景图挂Knapsack脚本用于按X键，实现背包物品新增，如果出现相同的物品则数量叠加

给之前的物品KnapsackItem脚本添加显示信息并暴露出数量新增的方法给外界Knapsack脚本使用

初始化设置

给物品加拖拽功能

效果

案例五：开发血条并跟随角色

创建Sprite

创建血条

创建进度条

去掉碰撞器，因为碰撞器是用来交互的，而这里不需要交互，只需要展示血条

创建Label显示血量

做成预制体

使用该插件协助NGUI实现“血条跟随角色”的功能

案例六：伤害和治疗效果

使用该插件协助NGUI实现“伤害和治疗效果”的功能

添加自带的HUD Text脚本，并创建一个Test HUD Text脚本

一定要在ROOT下面的Hud控件上添加脚本，因为这边测试时创建的加血减血物体是动态创建在Hud下面的

案例七：解析HUDText脚本参数

该插件安装详见“案例六：伤害和治疗效果”

渐变

影子

外边框

缩放：先变大再变小

透明度变化

动画：向上移动一段距离再回来

案例八：伤害和治疗效果跟随

“案例六：伤害和治疗效果”的Demo如下图

创建空物体，移动到上边，用来显示伤害

给伤害和治疗物体添加跟随脚本

优化

最后的说明