Unity NGUI
一. NGUI基础
1.1 导入NGUI插件
- 参考文章: NGUI下载与导入 [文章附带NGUI插件下载]
1.2 基本UI资源
1）UI图集(Atlas)
2）UI贴图(Texture)
3） UI标签(Lable)
4）UI字体(Font)
1.3 制作UI图集
1）解析UI资源结构
- 看设计图,从相关设计文档了解该UI的功能
- 观察UI的设计图,判断哪些字是程序可以写,哪些字是程序写不了的
- 通过设计图判断哪些是 Sprite ,充分考虑复用性
- 通过设计图判断出按钮资源的制作方式
- 通过设计图判断其它控件
- 尽量保证还原设计图的效果
- 尽量发现重复的原件,而且重复的原件只需要一份就够
- 尽量分割得零碎一点,避免多个原件合并在一起出图
- 尽量使用九宫格来制作比较大的底板,底框等
- UI切图全部让美术人员以PNG格式导出
2）导入切好的美术资源
- 在Assets文件夹下创建名为Resources 文件夹
1.表示这个项目的资源都放在这个文件夹下面,UI资源也不例外(这个文件夹名字必须设定为Resources,不能改动)
2.Unity开发中,涉及动态加载的情况,会用资源加载方法:Resources.Load();这个方法要求动态加载资源放在Resources文件夹中
3.为了减小安装包体积,只有需要动态加载的资源才放到Resources文件夹中,因为打包时考虑到资源需要动态加载,会将该文件夹下全部资源打包,对于文件夹外的,只会打包场景中用到的资源
3）用 Atlas Maker 制作图集
- 打开方式: NGUI 菜单 -> Open Atlas Maker
1.4 制作UI字体
1）静态字体和动态字体
- 静态字体中,如果需要用到的文字不多,打成图集后资源量往往比动态字体小
- 静态字体可以通过提供一张自定义的含有所需文字的图片和一个配置文件来完成,动态字体只能通过导入整个TTF格式的字体文件完成
- 静态字体中的字一般非常有限,只有极少数的字(否则图片资源会非常大),所以应用范围非常小,几乎很少用到静态字体。而动态字体几乎包含所有的文字,被广泛运用
2）静态字体介绍
- 制作静态字体需要将字筛选出来打成一个图集
- 打开方式: NGUI 菜单 -> Open -> Font Maker
3）动态字体介绍
- 直接将下载好的TTF格式字库导入Unity中即可,一般字体文件大小为3-6MB
1.5 UIRoot、UIPanel 和 UICamera 组件
1）UIRoot 组件 [缩放]
- Type[缩放类型]： PixelPerfect、FixedSize、FixedSizeOnMobiles
- Pixel Perfect[完美缩放]：像素大小永远保持不变
- Fixed Size[固定缩放]：根据参数进行缩放，保证UI和屏幕的分辨率比例固定
- FixedSizeOnMobiles[高级缩放]：上述两种类型的结合体，UI会在PC下自动采用PixelPerfect，在移动设备上自动采用FixedSize
2）UIPanel 组件 [渲染]
- Alpha [透明度]
- Depth [深度] 深度值越高，显示在视野的上层
- Clipping [剪辑视窗]
- Render Q [渲染顺序,默认自动设置]
3）UICamera 组件 [接收NGUI事件]
- EventMask [事件接收层]
1.6 Depth (深度)
1）深度的理解
- 每一个 UIPanel 和每一个 UI 空间都一定有一个 Depth, 深度值大代表显示的优先级高
- Depth 决定的是 UI 的显示层级关系,一个 UI 控件是否显示在最上层是由它所属的 Panel 的空间的 Depth 和它本身的 Depth 决定
- 尽量不要让 Panel 之间共享同一个 Depth, 这样会导致性能消耗增加
- 制作 Panel 和 UI 控件时,记得考虑一下它所属的 Panel 和它自身的 Depth 是否能够让它显示在正确的层次关系上
2）相机深度
- 相机的 Depth 永远是最高级
- Clear Flags [清除标志] 设置相机视觉穿透效果
- 所有相机都受到 Depth 影响
- 创建 NGUI 时, UIRoot 下生成的相机默认深度比场景中的相机深度高
- 当场景中有多个摄像机时,一定要检查摄像机的 Culling Mask [清除遮罩] ,避免重复渲染 Layer [图层]
二. 核心组件
2.1 UISprite (精灵)
1）创建 Sprite (精灵)
- NGUI 菜单-> Creat -> Sprite
2）UISprite 设置
- Atlas [图集] 选择图集,如果面板上没有需要添加的图集,点击 ShowAll 按钮
- 点击 Sprite 按钮,添加精灵
- Type
- Simple[普通类型] 原图不变
- Flip [翻转]
- Nothing [不翻转]
- Horizontally [水平翻转]
- Vertically [垂直翻转]
- Both [既水平又垂直翻转]
- Flip [翻转]
- Sliced [切片类型] 无论如何拉伸都不会显示在Panel外
- Tiled [平铺类型] 原尺寸铺满拉伸后的尺寸
- Filled [填满类型] 设置图片填充一块区域(例如技能CD)
- Advanced [高级类型]
- Simple[普通类型] 原图不变
- Widget [部件设置]
- Color [颜色]
- Pivot [中心点]
- Depth [深度]
- Dimensions [尺寸]
- Snap [还原原始尺寸]
- Aspect Ratio [宽高比]
2.2 UILabel (标签)
1）创建 Label (标签)
- NGUI 菜单-> Creat -> Label
2）UILabel 文字的设置
- 设置字体
- 静态字体使用NGUI,动态字体使用Unity
- Font 选择字体文件
- FontSize [字体大小]
- Text [文字显示]
- Overflow [充满设置]
- Shrink Content [收缩内容] 字体不可超出控件尺寸
- Clamp Content [控制内容] 仅显示控件内字体
- Resize Freely [自由调整] 根据字号调整控件大小
- ResizeHeight [高度调整] 根据字体高度调整控件高度,宽度不变
- Alignment [对齐方式]
- Auto [自动对齐]
- Left [左对齐]
- Right [右对齐]
- Center [居中]
- Justfied [自动变换]
- Keep Crisp [保持清晰度]
- Gradient [字体渐变]
- Effect [特效]
- Spacing [间距]
- Maxlines [最大行数]
- Widget [部件设置]
- Anchors [锚点]
2.3 UITexture (纹理)
1）创建 UITexture (纹理)
- NGUI 菜单-> Creat -> UITexture
2）UITexture (纹理) 纹理的设置
- Texture [纹理设置]
- Material [材质设置]
- Shader [着色器]
- UV Rect [矩形设置]
- Type/Flip [平铺类型和翻转]
- Widget/Anchors [部件设置和锚点]
2.4 UIButton (按钮)
1）创建 Button (按钮)
- 创建一个 Sprite ,设置图集,添加按钮图片,Transform 组件 Reset 一下
- 为 Sprite 添加碰撞器: NGUI 菜单 -> Attach -> Collider
- 为 Sprite 添加 ButtonScript 脚本: NGUI 菜单 -> Attach -> ButtonScript
2）BoxCollider 设置
- Is Trigger [触发器开关]
- Material [材质]
- Center [中心位置]
- Size [尺寸设置]
3）UIButton 设置
- TweenTarget [动画目标]
- Drag Over [拖动结束事件]
- Transition [过渡时间]
- Colors [颜色设置]
- Sprites [精灵设置]
- OnClick [响应事件]
4）按钮的缩放动画 ButtonScale 脚本
- 创建: Inspector面板 -> AddCompent菜单 -> 搜索ButtonScale
- Script [脚本]
- TweenTarget [动画目标]
- Hover [鼠标滑过时控件大小变化]
- Pressed [点击按钮时控件大小变化]
- Duration [完成缩放动画的时间]
5）按钮的偏移动画 ButtonOffset 脚本
- 创建: Inspector面板 -> AddCompent菜单 -> 搜索ButtonOffset
- 内容同上
6）按钮的旋转动画 ButtonRotation 脚本
- 创建: Inspector面板 -> AddCompent菜单 -> 搜索ButtonRotation
- 内容同上
7）按钮的单击音效 PlaySound 脚本
- 创建: Inspector面板 -> AddCompent菜单 -> 搜索ButtonRotation
- AudioClip [音频源]
- Trigger [触发模式]
- OnClick [单击触发]
- OnMouseOver [鼠标进入]
- OnMouseOut [鼠标离开]
- OnPress [按下触发]
- OnRelease [释放触发]
- Custom [自定义触发]
- Volume [音量]
- Pitch [音调]
2.5 UISlider (进度条)
1）创建进度条:
- 新建 Sprite_1
- 给 Sprite_1 添加 UISlider 组件
- NGUI 菜单 -> Attach -> Slider Script [脚本]
- 给 Sprite_1 添加子物体 Sprite_2 ,调整好尺寸和 Sprite_1 保持一致
- 给 Sprite_1 添加子物体 Sprite_3 ,调整大小,作为滑块,Depth值设置比前两者高,让其显示在最前面,为 Sprite_3 添加 BoxCollider
- 将 Sprite_1 拖动到 UISlider 组件的 Foreground [表层进度条]中,将 Sprite_2 拖动到 UISlider 组件的 Background [背景进度条]中,将 Sprite_3 拖动到 UISlider 组件的 Thumb [滑块]中
- 根据需求设置三个 Sprite 的颜色
2）UISlider 设置
- Value [进度值]
- Alpha [透明度]
- Steps [每次变动步伐大小]
- Appearance [添加进度条显示组件]
- Foreground [表层进度条]
- Background [背景进度条]
- Thumb [滑块]
- Direction [进度条方向]
- On Value Change [响应事件]
2.6 UIInput (输入框)
1）创建输入框:
- 创建一个Sprite作为输入框底板
- 为输入框的地板添加UIInut组件: NGUI 菜单 -> Attach -> Input Field Script [脚本]
- 未输入框添加BoxCollider
- 添加子物体Label并拖到Input组件的第一个选项[Label]中
2）UIInput 设置:
- Lable [输入设置] 将要用于输入文字信息的Label拖到到这个框中
- Starting Value [默认输入文字]
- 默认输入文本和初始化显示文本是两个概念,默认输入的文本是有效文本,初始化显示文本是提示用户输入用的文本
- Saved As [设置输入的内容在PlayerPref中哪个字段保存] 这里通常不用设置,它会自动保存
- Active Text Color [输入文本颜色设置]
- Inactive Color [非活动文字颜色设置]
- Caret Color [设定插入符的颜色]
- Selection Color [设置选中文字的颜色]
- InputType [输入类型设定]
- Standard [标准输入类型]
- AutoCorrect [自动调整模式]
- Passwrod [密码模式]
- KeyboardType [文本输入时键盘类型设定]
- Default [默认类型]
- ASCCaable [任何格式都允许]
- NumbersAndPunctuation [数字和标点符号]
- URL [网络地址]
- NumberPad [数字]
- PhonePad [电话号码]
- EmailAddress [邮箱地址]
- HiddenInput [隐藏输入]
- Validation [验证输入类型] 只能验证指定输入类型,通过下拉框选择
- Character Limit [输入最大数限制]
- On Submit [提交输入内容时触发事件函数设定]
- OnChange [当输入内容改变时触发事件函数设定]
2.7 UIScrollView (滚动视图)
1）创建滚动视图:
- NGUI 菜单 -> Attach -> ScrollView 组件
- UIPanel
- Clipping [面板剪辑设置]
- None [无剪辑模式] 内容可被拖到窗口外
- SoftClip [柔和剪辑模式相当于窗口模式] Panel会剪辑出一块可视区域,超出可视区域的部分将无法显示
- Offset [设置视窗偏移]
- Center [设置视窗中心点]
- Size [设置视窗大小]
- Softness [剪辑边缘的柔和度]
- Constrain but dont Clip [屏幕范围显示]
- Clipping [面板剪辑设置]
2）UIScrollView 设置
- Content Origin [内容起点] 默认设置为左上角
- Movement [滚动视图的滚动方向]
- Horizontal [水平]
- Vertical [垂直]
- Unrestricted [不受限制]
- Custom [自定义]
- Drag Effect [拖动效果]
- None [无效果] 视窗拖动到哪里就是哪里
- Momentum [惯性拖动] 松开拖动后会根据惯性动能继续拖动
- MomentumAndSpring [弹性拖动] 内容被拖到边界外时会自动回弹为正常视窗界面
- Scroll Wheel Factor [滚轮设定] 值越大,鼠标滚轮滚动越灵敏
- Momentum Amount [动能设定] 值越大,惯性动能越大
- Restrict Within Panel [Panel内显示] 勾选后,视窗内容不可超过Panel的范围
- Constrain On Drag [拖动限制]
- Cancel Drag If Fits [适合视窗] 勾选后当它刚好适合视窗内时,则自动退出拖动
- Smooth Drag Start [平滑拖动]
- IOS Drag Emulation [模拟IOS系统拖动效果]
- ScrollBars [为滚动视窗指定拖动条]
- Show Condition [拖动条出现规则设置]
- Always [总是出现]
- Only If Need [需要时出现]
- When Dragging [拖动时出现]
- Show Condition [拖动条出现规则设置]
3）创建拖动条:
- NGUI 菜单 -> Open -> WidgetWizard 组件
4）让视窗内图片可拖动:
- 为图片添加Collider
- 为图片添加Drag ScrollView 脚本
2.8 UIToggle (复选框)
1）创建复选框:
- 新建Sprite1 -> 添加Collider -> AddComponent -> UIToggle 脚本
- 在Sprite1下创建Sprite2作为选中状态标志,例如一个勾
- 将Sprite2拖动到UIToggle脚本下StateTransition下Sprite选项中
2）UIToggle 设置
- Group [开关组设置] 默认为0,表示没有开关组,当有多个复选框时,该值控制相同数字的复选框组合
- Staring State [初始选中设置] 勾选后初始状态为选中状态
- State None [单选设置] 处于分组中时,可以设置单选,可以单独控制取消或者勾选
- State Transition 模块 [设置关联UI]
- Sprite [设置选中图案] 选中状态下显示出来的图案
- Invert Sprite [???]
- Animation [初始动画] 初始状态切换时的动画
- Transition [开关平滑效果]
- Smooth [平滑切换]
- Instant [瞬间切换]
- On Value Change [触发事件]
2.9 UIPopupList (下拉菜单)
1）创建下拉菜单:
- 新建Sprite -> AddComponent -> PopupList 脚本 -> 添加Collider
- 显示当前选中项:
- 新建Label,设置Label中的各项,如不设置,将无法显示任何内容
- 将Label拖动到PopupList的OnValueChange选项中
- PopupList的Method选择调用SetCurrentSelection方法
2）UIPopupList 设置
- Options [下拉选项]
- Position [菜单位置]
- Auto [自动]
- Above [上方]
- Blow [下方]
- Alignment [对齐方式]
- Open on [菜单打开方式]
- ClickOrTap [单击]
- RightClick [右键单击]
- DoubleClick [双击]
- Manual [手动] 代码控制出现
- Localized [文本本地化]
- 勾选后下拉菜单内容将显示为本地语言,不会被转化为异地语言,例如游戏中的语言切换选项(个人测试发现该选项无效)
- Atlas [图集]
- Atlas [选择图集]
- Background [下拉背景] 下拉菜单背景
- Highlight [高亮图片] 鼠标移动到菜单中时,高亮显示图片或者颜色
- Font [菜单字体]
- On Value Change [触发事件]
三. UI动画
3.1 渐隐渐现动画 (透明度动画)
1）创建TweenAlpha动画:
- NGUI 菜单 -> Tween -> Alpha 脚本
2）TweenAlpha 设置
- From 和 To [开始和结束] Tween动画核心设置,起始点的设置
- PlayStyle [循环模式]
- Once [单次播放]
- Loop [循环播放] 播放完毕后,瞬间回到起点重新播放
- PingPong [乒乓模式] 播放完毕后,从终点倒着播放回到起点
- Animation Curve [动画曲线编辑] 通过编辑曲线可以调整动画播放的快慢
- Duration [时长] 单位为秒
- Start Delay [播放延迟] 单位为秒
- Tween Group [动画组] 相同数字的动画为同一个分组动画,可以整体进行控制
- Tgnore TimeScale [忽略时间缩放] 默认为是
- On Finished [触发事件]
3.2 颜色变化动画 (变色动画)
1）创建TweenColor动画:
- NGUI 菜单 -> Tween -> Color 脚本
2）TweenColor 设置
- 内容同上
3.3 位置变换动画 (位移动画)
1）创建TweenPosition动画:
- NGUI 菜单 -> Tween -> Position 脚本
2）TweenPosition 设置
- 内容同上
3.4 旋转变化动画 (旋转动画)
1）创建TweenRotation动画:
- NGUI 菜单 -> Tween -> Rotation 脚本
2）TweenRotation 设置
- 内容同上
3.5 大小变化动画 (缩放动画)
1）创建TweenScale动画:
- NGUI 菜单 -> Tween -> Scale 脚本
2）TweenScale 设置
- 内容同上
3.6 动画控制组件 (UIPlayTween)
1）创建UIPlayTween:
- 1.1 NGUI 菜单 -> Attach -> PlayTween 脚本
- 1.2 UIPlayTween需要接收外部点击事件,所以我们会将它放在带有Collider的组件上
2）UIPlayTween 设置
- Tween Target [动画播放目标物体] 默认是自身,也可以控制其它物体,设置该项时,目标物体的动画组件需要取消激活状态,否则运行时自动会激活动画,否则这个设置就没有意义
- Include Children [是否包含子物体]
- Tween Group [动画组] 设定控制目标物体身上的动组,某些物体身上有多个动画组件,如果设置了分组,就能通过分组来进行分开激活控制
- Trigger condition [触发条件]
- Play direction [播放方向]
- Forward [正向播放] 从From播放到To
- Toggle [开关播放] 第一次点击从从From播放到To,再次点击从To播放到From
- Reverse [方向播放] 从To播放到From
- If target is disabled [未激活处理] 当目标物体处于禁用状态时
- DoNothing [不做处理]
- Enable Then Play [强制激活]
- If already playing [进行时处理] 当目标物体正在播放自身动画时
- Continue [继续播放]
- Restart [重新播放]
- Restart If Not Playing [等当前播放完毕再重新播放]
- When finished [结束时处理] 当目标物体播放动画结束时
- Do Not Disable [不做处理]
- Disable After Forward [正向播放完毕后禁用]
- Disable After Reverse [反向播放完毕后禁用]
- On Finished [触发事件]
3.7 动画控制组件 (UIPlayAnimation)
1）创建UIPlayAnimation:
- 1.1 为目标物体添加Animation组件: AddComponent -> Animation 脚本 (注意:这里的Animation并不是UIPlayAnimation)
- 1.2 为目标物体添加动画: Animation组件 -> Animation选项 -> AnimationClip动画
- 1.3 为本体添加UIPlayAnimation: NGUI 菜单 -> Attach -> PlayAnimation 脚本
- 1.4 为本体添加目标物体: 拖动目标物体 -> PlayAnimation脚本 -> Animation选项
2）UIPlayAnimation 设置
- Animation [动画] 无法设置
- StateName [目标物体动画名称] 当目标物体有多个动画时,填入目标物体的动画名称,可以播放指定动画,不填写默认播放目标物体最后添加的动画
- 其他内容同上
四. 其他组件
4.1 拖动摄像机浏览大界面
1）UIDraggableCamera 组件
1.1 给摄像机添加UIDraggableCamera组件 :
- AddComponent -> DraggableCamera 脚本
1.2 UIDraggableCamera 设置
- Root For Bounds [边界范围] 设置时需要将背景图所在的根物体(父物体)拖进去
- Scale [拖动速度]
- ScorllWheelFactor [鼠标滚轮影响系数]
- 其余的和ScrollView的一样,直接省略
2）UIDragCamera 组件
1.1 给背景图添加 UIDragCamera 组件:
- AddComponent -> DragCamera 脚本 -> 添加Collider
1.2 UIDragCamera 设置
- DraggableCamera [可拖动摄像机] 此处将带有DraggableCamera脚本的摄像机拖入即可
4.2 UIGrid 自动排列UI组件
1.创建 UIGrid:
- NGUI菜单 -> Great -> Grid 组件
- 将所有需要排列的元素设置为Grid物体下,作为子物体存在
2）Grid 设置
- Arrangement [排列方向]
- CellWidth [宽度]
- CellHeight [高度]
- ColumnLimit [数量限制]
- Pivot [锚点]
4.3 UIDragObject 直接拖动物体
1）创建 UIDragObject:
- AddComponent -> DragObject 脚本 -> 添加Collider
2）DragObject 设置
- Target [目标物体] 可用来拖动的物体
- Movement [灵敏度]
- 其余的和ScrollView的一样,直接省略
4.4 UIDragResize 通过拖动自由改变控件大小
1）创建 UIDragResize:
- AddComponent -> DragResize 脚本 -> 添加Collider
2）DragResize 设置
- Target [目标物体]
- Pivot [锚点] 拖动物体时,目标尺寸改变是以哪个锚点开始改变
- Min/Max Width/Height [最大/最小 宽度/高度]
4.5 UISpriteAnimation 序列帧精灵动画
所谓的序列帧精灵动画,是指将一系列序列帧当成Sprite放置到一个图集内,通过让这个Sprite依次替换来达到播放的效果。
制作精灵动画,必须确保这个物体上有Sprite组件,也就是说必须在Sprite控件上制作精灵动画
1）创建 UISpriteAnimation:
- AddComponent -> SpriteAnimation 脚本
2）SpriteAnimation 设置
- Framerate [帧率设置]
- NamePrefix [名称前缀] 限定该图集中带有该前缀名称的精灵制作成精灵动画播放,其他不是这个名称的不会被播放
- Loop [是否循环]
- PixelShap [是否保持原像素]
五. 实战
5.1 屏幕自动适应
1） 主流分辨率
2）Anchor 组件(多个物体设置锚点)
- 创建Anchor组件
- Anchor设置
- 需要注意的是,必须得将需要自动适应屏幕的UI放在Anchor的下面,设置为子物体
3）Anchors (单个物体设置锚点)
- 无需添加,物体自带
5.2 多相机协作
1）创建多个UI相机
- 关闭现有相机,即可添加新的UI相机
5.3 巧用九宫格减少UI资源
1）通过单击Sprite的Edit可以进行设置,Border选项为九宫格的4条切线设置
5.4 去掉Mipmap降低资源包大小
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
