NGUI基础

2018.11.28
MVC框架 —（Model）模型 （View）视图 （Controller）控制器
View****
UI——在游戏场景当中眼睛所及之处皆为UI
Demo***小例子
UI学习
NGUI（第三方插件）
好处：方便调用 劣势：容易丢失
UGUI：Unity自带的UI
好处：可以随时调用不用导入 劣势：操作没有NGUI方便
NGUI方便
NGUI是开源的 UGUI不是开源的
1、Selection 菜单栏
（1）深度值放在最前面 Bring to Font
（2）深度值放在最后面 Push to Back
（3）深度值加一 Adjust Depth By+1
（4）深度值减一 Adjust Depth By-1
2、Great 创建
（1）Sprite 创建一个精灵（图片）
（2）Label 创建一个标签（文字注释）
（3）Texture 创建一个图片（一般用于背景）
（4）Widget 创建一个挂点
（5）Anchor 创建一个锚点
（6）Panel 创建一个容器
（7）Scorll View 创建一个带滚动的视图
（8）Grid 自动布局（功能同Scorll View）
（9）2D UI 是搭建UI界面的基础
注意：UI Root 创建出来之后但是无法进行操作——选中UI Root 看检视视图中UI Panel 是否拉开
总结：深度值（Depth）
1、先创建的物体在后面，后创建的物体在前面
2、深度值越大越在前，深度值越小越在后
一、精灵
1、如何创建一个图片（精灵）
（1）选中NGUI菜单栏—创建Create—Sprite（图片）—选择检视面板UISprite—Atlas—（Showall（显示所有的图集））—选中适宜的图片即可
组件介绍：
*****Type 图片类型格式
默认的是第一个或者第二个
第三个：Tiled 填充
第四个：Filled 可以切割动画
Fill Dir（旋转格式）
Fill Amount 面积 取值范围 0—1
Colir Tint 背景颜色
2、如何创建一个Label（标签）
选择NGUI—Great—Label—UILabel（NGUI类型不支持中文/Unity 类型支持中文）—选择字体即可
打图集：
意义：原有的素材无法满足开发，需要导入新的图片开发
1、将所要添加的图片拖入到Unity工程视图当中（拖入到指定的文件夹下面（方便管理））—在工程视图中选择将要打入图集的图片—选择NGUI—Open—Atlas Maker
若打入旧图集，可直接选择图集名称—点击Add/Update
若打入新图集：可点击右上角的New选>点击Great按>修改图集名字保存即可。
图集打包完成后即可正常使用
2018.11.29
挂点锚点的学习
锚点：固定物体所用 Left 左 Right 右 Bottom 下 Top 上 Center 中间
左上 左左上上
左下 左左下下
右上 右右上上
右下 右右下下
中间 都是中间
挂点：目的为了方便管理场景中各个模块的物体，将其统一放在同一个挂点下。
根据屏幕将挂点分为五个区域
左上 Left Top Container
左下 Left Bottom Container
右下 Right Top Container
右上 Right Bottom Container
中间 Center Container
挂点的创建方法：NGUI->Creat->Widget（挂点）创建五个挂点并放在相应的位置
锚点：Type 选择Unified
Target 目标参照物（默认为父物体）
滚轮滑动：
意义：常用在背包当中，可以查看屏幕之外的装备等物体。
操作步骤：
NGUI—Create—Scroll View（滚轮滑动）—在Scroll View 下创建图片Sprite—给图片添加Box Collider 和Drag Scroll View 组件—复制图片即可
选择滑动方向：
上下滑动：UI Scroll View—Movement—Vietical
左右滑动：UI Scroll View—Movement—Horizontal
注意：添加图片box Collider的时候如果跟大小一致则在Scene直接右键添加（常用）
如果需要调节大小则在检视视图中添加
2、血条创建
目的：模拟人物攻击掉血的现象为在项目开发中实现掉血效果做准备
操作步骤
1）创建两个同样大小的图片作为前景和背景
2）在背景上挂载组件NGUI Slide—将前景拖至Forground—将背景拖到Background
Direction 血条方向
注意：血条重叠的图片不要复制
二、添加拨盘
在背景下创建一个图片（调整至合适大小）→给该图片添加Box Collider组件→将图片拖至父物体的Thump处→即可完成本功能
三、添加百分比
在背景下添加标签（Label）—将标签拖至背景下的On Value Change处—选择
UI Label/Set Current Pencent（百分比）
UI Label/Set Current Progress（小数点）
218.11.30
点击按钮
创建一个图片—添加Box Collider—挂载组件Button即可
按钮颜色变化：
Normal 正常默认的颜色
Hover 悬停的颜色
Pressed 按下的颜色
Disabled 松开的颜色
*下拉列表
界面搭建（Label一定要选择字体）—给图片添加Box Collider—给图片挂载组件Popuop List（输入要进行选择的内容）—Font 处选择字体—将label拖入到选项On Value Change处—选择SetCurrentSelection
注意：如果选项中有中文，则Sprite下的字体Font处一定要选择Dynamic（动态）选项
组件介绍：Default默认选项
Position选项框出现的位置
Alignment字体的位置
Open On打开方式
Click or Tap 左键 右键 中键都可以实现
Right Click 右键
Double Click 双击左键
Manual 用手点击
单选框制作流程
界面搭建—给父物体添加Box Collider组件—添加toggle组件—将子物体拖入到toggle组件下的Sprite处。
注意：默认显示 Starting State 点√
默认不显示 Starting State 不点√
多选框制作流程
1、界面搭建，制作两组图片
2、给每组图片的父物体添加Box Collider
3、给每组图片的父物体添加Toggle组件
4、分别将子物体赋值到Toggle组件处
5、将默认显示的图片Starting State点√
6、将两组图片的分组设置为非零且相同的数字
7、运行即可查看效果

2018.12.3
聊天框制作
1、界面搭建，一个父物体，一个子物体
2、在父物体挂载组件 BoxCollider+Dragject（在检视视图上添加）并且将本身赋值给Target处
3、给子物体做屏幕适配 基于父物体（右右下下）
4、给子物体添加组件Box collider+Drag Resize组件
5、5、将父物体赋值给子物体Target处
6、注意：如果Box Collider有重叠，谁在前面识别谁
7、UI Drag Resize 下的Pivot调节聊天框的变换方向
小滑块组件
1、界面搭建
2、在父物体上挂载Box Collider组件和Scroll Bar
3、给子物体做屏幕适配（上下左右都是0）
4、给Scroll Bar赋值前景和背景
5、在Scroll Bar改变Size大小
6、Direction方向（从左到右，从右到左，从下到上，从上到下）
输入框制作
1、界面搭建 一个图片+一个Label
2、在图片上加组件Box Collider+Input Field
3、用户登录限制：非法字符不能用空格
4、账号限制：必须是数字
5、密码限制：小于三位数
组件介绍：
Starting Value 输入的值
Input Type 输入类型
Standard 标准
Auto Current 自动校正
Password 密码
Validation 输入限制
None 无
Integer 整数
Float 小数
Alphanumeric 字母数字混合
Username 用户名 只能用英文
Name 英文
FileName 文件名
Character Limit 字符限制

Character Limit 字符限制
输入几就限制到最大位数

NGUI动画学习;
NGUI-Tween—各个组件的介绍
1、Alpha 透明度 From To 从透明度*到透明度
2、Color 颜色 从颜色*到颜色
3、Width 宽 从宽度*到宽度
4、Height 高 从高度*到高度
5、Position 位置 从位置*到位置
6、Rotation 旋转 从角度*到角度
7、Scale 大小 从大小*到大小
8、Transform 包含位置，旋转，大小组件
Tweener组件介绍
Play Style（运动状态）
Once 只执行一次
Loop 循环播放
Ping Pong 乒乓球播放形式
Animation Curve 动画曲线
Duration 几秒钟执行完毕
Start Delay 延迟几秒执行
界面切换
界面的意义：
步骤：
1、界面搭建，创建两个挂点（方便管理）—在挂点下分别添加两个图片并分别悬挂button按钮—给挂点添加动画position—创建脚本挂载到UIRoot上并且黏贴动画切换脚本（赋值1挂点1,3挂点2）—将UIroot拖到Button的OnClick处，并且赋值脚本中对应的方法—运行即可
发布PC
发布出来之后的产品可以让玩家进行下载体验（无需借用Unity引擎）
发布流程：
1、选中发布的场景—选中File—Bulid Settings—PC—Player Settings—修改对应的名字（Company公司的名字Product Name项目名字Default Icon项目图标）—Build（发布）常用/Build and Run（发布并运行）
退出快捷键：Alt+F4
2018.12.5
屏幕适配：为了适应市场上70%的手机屏幕，我们需要给我们的项目做屏幕适配，一般项目为横版游戏，则需要我们对宽进行限定。
标准的屏幕比例为4:3和16:9两种，16：L9对应的屏幕分辨率为1280720.为了能尽可能多的适应手机屏幕。我们默认将手机分辨率设置为1280720
发布为手机选择：UI Root下的Scaling Style—Constrained Style—Constrained On Mobile
Content Width宽度 横版游戏 宽度限定
Content Height高度 竖版游戏 高度限定
Grid同Scroll View功能类似各有优劣
为了减少任务量NGUI提供了预设体概念。
制作流程：
NGUI→Open→Prefab Toolbar→Add添加预设体即可
如果修改项目当中的鼠标图标：
File->Build Settings ->Default Cursor
粒子特效：
在一些游戏中有很多绚丽的特效，如爆炸火焰等，Unity为开发者提供了粒子系统工具便于开发者开发。
创建粒子系统步骤：
菜单栏GameObject—选择Particle System选项即可完成粒子系统的创建
粒子系统中的4个默认选项介绍
属性名：
Duration 持续时间 粒子的喷射周期
Looping 循环 是否循环喷射
Prewarm 延迟 预热
Start Delay启动延迟 粒子喷射延迟
Start Lifetime粒子的生命周期
Start Speed 速度 粒子的喷射速度
Start Size 尺寸 粒子的大小
Start Rotation 自传 粒子的旋转角
Start Color（颜色）粒子颜色
Gravity Modifier 相对于物理管理器中重力加速度
Inherit Velocity 继承速度 新生粒子的继承速度
Simulation Space 模拟空间 粒子系统的模拟空间
Play On Awake 唤醒是播放 开始时自动播放
Max Particles 最大颗粒 一个周期内发射的粒子数
2019.3.28
打图集：
意义：原有的素材无法满足我们开发UI，需要导入新的图片开发
1、将所有要添加的图片拖入到Unity工程视图当中（拖入到制定的文件夹下面（方便管理））-》在工程视图中选择将要打入的图集的图片-》选择NGUI-》Open-》Atlas Maker。
2、若打入旧图集：可点击右上角的NEW 选择Create-》修改图集名称保存即可，