1、Selection 菜单栏
(1)深度值放在最前面 Bring to Font
(2)深度值放在最后面 Push to Back
(3)深度值加1 Adjust Depth by+1
(4)深度值减1 Adjust Depth by-1
总结深度值
(1)先创建出来的图片在后面,后创建出来的物体在前面
(2)深度值越大越在前,深度值越小越在后
(3)深度值一样的时候,谁先创建谁在后,谁后创建谁在前
2、Creat 创建
(1)Sprite 创建一个精灵(图片)
(2)Label 创建一个标签(文字注释)
(3)Texture 创建一个图片(一般用于背景)
(4)Widget 创建一个挂点
(5)Anchor 创建一个锚点
(6)Panel 创建一个容器
(7)Scorll Vew 创建一个带滚动的视图
(8)Grid 自动布局(同Scroll View)
(9)2D UI 是搭建UI界面的基础
UI Root是搭建UI界面的基础,每一个场景只能出现一个UI Root。
注意:(1)在场景视图中进行操作UI的时候一定要选中工具栏第五个。
(2)如果有UI Root,但是变成灰色无法操作,选中UI Root看检视视图中UI Panel是否拉开。
Sprite学习
如果创建一个图片:选中NGUI菜单栏->创建Create->Sprite(图片)->选择检视视图UISprite->Atlas(图集)->(Show all(显示所有的图集))->选中适宜的图片即可
组件介绍:
Type 图片格式类型
默认为第一个或者
第二个:充满整个画布
第三个:Tiled 填充
第四个:Filled 可以切割动画(常用于技能释放)
Fill Dir 旋转格式
Fill Amount 面积 取值范围0-1
Color Tint 背景颜色
在场景视图中可以直接创建图片。继续创建图片的时候Child 代表作为子物体出现
Sibling 代表作为同级出现
Label:标签文字注释
如果创建一个Label
选择NGUI->Great->Label(也可以直接在Scene场景中直接创建)
NGUI类型不支持中文/Unity类型支持中文
要求:左上角 人物头像为父物体
一个MP
一个HP
右上角 小地图图片 Label子物体
左下角 摇杆图片 Label子物体
技能释放普通攻击为父物体 三个小技能为子物体
UIRoot下面有四个图片代表四个角
挂点
Widget 目的为了方便管理场景中各个模块的物体,将其统一放在同一个挂点下。一般根据屏幕分为五个挂点,分别为左上,左下,右上,右下,中间。
Left 左
Right 右
Top 上
Bottom 下
Center 中间
屏幕适配:项目开发完发布成手机版本,为了适应市场上进可能多的手机屏幕。我们要进行屏幕适配,防止界面跑出屏幕之外。
(此屏幕适配的最大值为市场上80%的手机屏幕)
锚点:Target 目标参照物
(父物体)
打图集:
意义:原有的素材无法满足我们开发UI,需要导入新的图片开发
1、将所有要添加的图片拖入到Unity工程视图当中(拖入到指定的文件夹下面(方便管理))->在工程视图中选择将要打入图集的图片->选择NGUI->Open->Atlas Maker
若打入旧图集:可直接选择图集名称->点击Add/Update
若打入新图集:可点击右上角的New 选择Create->修改图集名称保存即可。图集打包后即可跟默认图集一样正常使用。
滚轮滑动:
意义:常用于背包当中,可以查看背包外的装备等物体。
操作步骤:
NGUI->Creat->Scroll View
(滚轮滑动)->在Scroll View下创建图片Sprite->给图片添加
Box Collider和Drag Scroll View组件->复制图片即可
选择滑动方向:上下
UI Scroll View->Movement->Vietical
左右 UI Scroll View-> Movement->Horizontal
注意:****添加图片的box Collider的时候如果大小跟图片一致则在场景视图中添加,如果需要修改box Collider大小则在检视视图中添加。
Texture一般用于背景图片
血条:模拟人物攻击掉血的现象,为在项目开发中实现掉血效果做准备。
操作步骤:(1)创建两个同样大小的图片作为背景和前景
(2)在背景上挂载组件NGUI Slider->将前景拖入至Forground处->将背景拖入至Background处
***Direction 血条的运动方向
二、添加拨盘
在背景下创建一个图片(调整至合适大小)->给该图片添加Box Collider组件->将图片拖至父物体的Thump处->即可完成本功能
三、添加百分比
在背景下添加标签Label->将标签拖至背景下的On Value Change处->选择UILabel/SetCurrentPencent(百分比)
UILabel/SetCurrentProgress(小数点类型)
点击按钮
界面搭建->给图片添加Box Collider->挂载组件Button即可
按钮颜色变化:
Normal 正常默认的颜色
Hover 悬停的颜色
Pressed 按下的颜色
Disabled 松开的颜色
下拉列表
界面搭建(Label一定要选择字体(如果是中文选项的话一定要是Untiy))->给图片添加Box Collider->给图片挂载组件 Popup list(输入要进行选择的内容)->Font处选择字体->将Label拖入到选项OnValue 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、将两组图片的分组Group处设置为非0且相同的数字
7、运行即可
聊天框制作
1、界面搭建,一个父物体,一个子物体
2、在父物体上挂载组件 BoxCollider+Drag Object(在检视视图里添加)
并且将本身赋值给Target处
3、给子物体添加组件BoxCollider+Drag Resize组件
4、给子物体做屏幕适配基于父物体(一般选择右右下下)
5、将父物体赋值给子物体的Target处
注意:如果两个物体的BoxCollider有重叠,谁在前面识别谁
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、密码限制:星号代替
6、年龄限制:小于三位数
7、组件介绍
Starting Value 输入的值
Input Type 输入类型
Standard:标准
Auto Current:自动校正
Password:密码
Validation:输入限制
None:无
Integer:整数
Float:小数
Alphanumeric:字母数字混合
Username:用户名,只能英文
Name:英文
FileName:文件名
Character Limit:字符限制
输入几就限制到几位
NGUI动画学习
添加组件
NGUI->Tween->各个组件的介绍
1、Alpha 透明度
From to
从*透明度到透明度
2、Color 颜色
从***颜色到***颜色
3、Width 宽度
调节宽度
4、Heght 高
从***高度 到***高度
5、Position
从***位置***到***位置
6、Rotation 旋转
从***角度 到***角度
7、Scale 大小
从***大小 到***大小
8、Transform 包含位置,旋转,大小组件
Tweener 组件介绍
Play Style(运动状态)
Once 只执行一次
Loop 循环播放
Ping Pong 乒乓球播放形式
Animation Curve动画曲线
Duration 几秒钟执行完毕
Start Delay延迟几秒钟执行
1、界面搭建
2、给挂点1添加position动画并且设置相应的参数
3、给挂点2添加Position动画并且设置相应的参数
4、将两个挂点动画的属性设置为false(去掉对应的√)
5、创建脚本挂载到UIRoot上并且粘贴对应的脚本
6、给脚本附上对应值
7、在注册按钮上添加第一个方法
8、在取消按钮上添加第二个方法