有创意的网站开发/百度服务中心官网

一、版本

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

二、使用

Label文字

1、创建Canvs

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

3、选择字体

 Label添加打字效果

Sprite图片

1、选择图集

2、选择图集中的精灵

InvisibleWidget容器

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

Panel面板

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

1、创建

2、设置面板位置

Button按钮

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

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

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

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

Button添加声音

 Widget属性

Anchor锚点

用于设置控件的自适应

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

小地图一直位于右上角

Tween动画

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

颜色、宽度、高度、位置

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

Checkbox单选框

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

保存为预制体

Slider滑动

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

让右边显示百分比

添加游标

 PopupList下拉列表

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

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

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

创建图集Atlas

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

将下面的图片制作成图集

使用图集的精灵

删除-图集中的图片

修改-图集中的图片

九宫切图SlicedSprite

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

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

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

动态字体制作与显示

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

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

使用动态字体

按钮预制体

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

优雅的创建脚本

 

三、实战

案例一

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

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

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

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

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

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

开发设置面板并绑定脚本

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

使用NGUI自带的滑块

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

界面切换动画