UG2L8——Input输入框控件
UG2L8——Input输入框控件
Input
输入框,可以用来制作账号密码聊天输入框
本章代码关键字
1234UIInput //NGUI的输入框类uiInput.value //input当前的输入文字的值uiInput.onChange.Add(new EventDelegate()) //当输入文字改变时添加监听函数uiInput.onChange.Add(new EventDelegate()) //当输入完成时添加监听函数
制作Input
1个Sprite做背景,1个Label显示文字
为Sprite添加Input脚本
添加碰撞器
参数相关
Label - 关联的文本组件
Starting Value - 开始默认显示的内容
Saved As
若此处填写内容
会使用PlayerPrefs将输入内容作为
此处填写的该key的值进行存储
一般不使用
ActiveTextColor - 选 ...
UG2L7——Toggle单选多选框控件
UG2L7——Toggle单选多选框控件
Toggle
单选框 多选框都可以使用它来制作
本章代码关键字
123UIToggle //NGUI的单选多选框类uiToggle1.value //toggle当前是否被选中的属性uiToggle.onChange.Add(new EventDelegate()) //当toggle状态改变时添加监听函数
制作Toggle
2个Sprite 1父1子
为父对象添加Toggle脚本
添加碰撞器
参数相关
Group - 多选框分组
多个多选框分为一组则变为单选框
State of None - 单选框状态时 是否允许不选中
Starting State
开始默认状态 勾选为选中
Sprite - 选中用图片
Invert State - 反装状态
如果需要的是不选中才显示(或者说选中就不显示),就勾选它
Animator - 状态变化时播放动画(新动画系统)
...
UG2L6——Button按钮控件
UG2L6——Button按钮控件
所有组合控件的共同特点
1.在3个基础组件对象上添加对应组件
2.如果希望响应点击等事件 需要添加碰撞器
Button
UI界面中的按钮 当点击按钮后我们可以进行一些处理
button的制作流程
3个基础组件构成 任意一个基础组件 往上面添加Button脚本 再添加碰撞器 就可以让它变成一个按钮
事件的监听
通过 拖曳 或者 代码的形式 可以进行按钮的 点击事件 监听
本章代码关键字
12UIButton //NGUI的按钮类uiButton.onClick.Add(new EventDelegate()) //按钮添加监听函数
制作Button
一个Sprite(需要文字再加一个Label子对象)
为Sprite添加Button脚本
添加碰撞器
参数相关
Twen Target - 按钮控制的目标
一般是3个基础控件之一,会自动设置
Drag Over - 拖曳结束后做什么
一般不使用不改变
Transition - 颜色变化效果的持续时间
Co ...
UG2L5——Texture大图控件
UG2L5——Texture大图控件
Texture
Sprite只能显示 图集中的图片,一般用于显示中小图片
如果使用大尺寸图片没有必要打图集
直接使用Texture组件进行大图片显示
本章代码关键字
12UITexture //NGUI中Texture的类uiTexture.mainTexture //Texture显示的图片
参数相关
Texture - 图片资源
Material - 材质,一般不改
Shader - 着色器,一般不改
Type - 图片类型
Simple - 普通模式,缩放会拉伸
Sliced - 切片模式,可九宫格缩放
Tiled - 平铺模式,图片重复绘制
Filed - 填充模式,可以做CD,进度条等
水平
竖直
90度
180度
360度
Advanced - 高级模式
可以把图片分成5个部分分别设置模式
Flip - 翻转模式
水平翻转
竖直翻转
水平竖直都翻转
Gradient - 渐变色
勾选后
上部颜色和下部颜色
自动渐变 ...
UG2L4——Label文本控件
UG2L4——Label文本控件
Label
NGUI中所有文本显示都使用Label来显示
本章代码关键字
12UILabel //NGUI中Label的类uiLabel.text //Label的文本内容
创建Label
工具栏 - NGUI - Create - Label
选中UIRoot,在Scene窗口(开启2D模式)的红框内右键 - Label
Label参数
Label参数
Font - 使用Unity字体可以使用fft的字体文件
也可以使用NGUI字体图集(之后专门讲解)
Material - 材质,一般不会修改
FontSize - 字体大小
普通
加粗
斜体
加粗并斜体
Text - 显示内容
Modifier - 修饰方式,强制大小写字母
没有限制
大写字母
小写字母
自定义
Overflow
Shrink Content - 收缩内容
文字显示的大小与Label的大小自动适应
Label控件尺寸不足显示较大字体时
字体的尺寸会自动适应Label控件的尺寸
Clamp Content - 夹紧内容
裁减 ...
UG2L3——Sprite图片
UG2L3——Sprite图片
Sprite(NGUI)
NGUI中所有中小尺寸图片显示都用Sprite显示
使用它来显示图集中的单个图片资源
本章代码关键字
123456UISprite //NGUI中Sprite的类uiSprite.width //图片宽的属性uiSprite.height //图片高的属性uiSprite.spriteName //选用图片的名字,修改名字可以修改sprite的图片,限同图集的图片NGUIAtlas //NGUI中图集的类uiSprite.atlas //sprite目前所用的图集,只有加载了图集才能用UIsprite.spriteName修改为该图集的图片
创建Sprite
工具栏 - NGUI - Create - Sprite
选中UIRoot,在Scene窗口(开启2D模式)的红框内右键
参数相关
参数相关
Atlas - 选择使用的图集
Sprite - 选择使用图集中的精灵图片
Material - 材质,一般 ...
UG2L2——图集制作
UG2L2——图集制作
图集
NGUI中的最小图片控件sprite要使用图集中的图片进行显示
图集 就是把很多单独的小图 合并为 一张大图 合并后的大图就是图集
目的是提高渲染性能
打开图集制作工具
Project右键打开
工具栏NGUI——Open——Atlas Maker
新建图集
在图集工具中创建
图集关键文件有3种:
图集文件
图集材质
图集图片
Atlas Maker各参数
参数
Padding - 图片间像素间隔
Trim Alpha - 移除图片多余空白空间
PMA Shader - 预乘透明通道
Unity Packer -自定义打包器
Truecolor - 强制ARGB32纹理
Auto-upgrade - 自动更新,用精灵替换纹理
Force Square - 如果启用,将强制方形图集纹理,长宽都为2的n次方
Pre-processor - 预处理器
修改删除图集元素
直接在图集工具里增删改即可
UG2L1-2——EventSystem组件
UG2L1-2——EventSystem组件
EventSystem
主要作用是让摄像机渲染出来的物体
能够接收到NGUI的输入事件
大部分设置不需要我们去修改
有了它我们通过鼠标 触碰 键盘 控制器 操作UI 响应玩家的输入
EventSystem很重要,如果没有它,我们没有办法监听玩家输入
创建UI时的 2DUI 和3DUI 主要就是摄像机的模式不一样
EventSystem的2D和3D主要是 采用2D碰撞器 还是3D碰撞器 不能直接改变摄像机模式
参数相关
Event Type - 事件类型
决定了脚本如何对鼠标和触屏事件进行响应:
UI模式,那么他们处理事件的方式是根据组件的深度
world模式,那么则会根据距离离主摄像机的远近来进行响应排序
2D和3D的区别是,碰撞器是用3D碰撞器还是2D碰撞器
Events go to - 事件通过刚体还是碰撞盒传递
Process Events In - 事件更新进度在Update还是LateUpdate
一般不改,默认在Update中
Event Mask - 决定哪个游戏对象层级将会接 ...
UG2L1-2——Panel组件
UG2L1-2——Panel组件
Panel
如果没有Panel父对象 UI控件看不到
Panel一般用于管理面板 控制层级
Panel可以有多个 一般一个Panel管理一个面板
一般如果root下有Panel,root上的Panel就没必要了
主要作用
管理一个UI面板的渲染顺序
管理一个UI面板上的所有子控件
参数相关
参数相关
基础参数
Alpha - 控制所有子UI元素的透明度
Depth
控制该Panel的层级
层级高的后渲染会把层级低的先渲染的遮挡住
Clipping - 裁剪
None - 不处理
正常
Texture Mask - 根据图片信息进行遮罩
比如人物头像
Soft Clip - 自己定范围裁剪
比如拖动框
Constrain But Dont Clip - 约束但不剪裁
不裁剪画面,只限制响应范围
Sorting Layer - 排序层
Advanced Options - 渲染相关高级选项
Render Q - 渲染队列
Sort Order - 排序
Normals - 是否需要灯光着色器
UV2 - 是否 ...
UG2L1-1——Root组件
UG2L1-1——Root组件
必备概念——分辨率概念
1.分辨率
屏幕宽高两个方向的像素点
比如1920 * 1080,即宽1920个像素,高1080个像素
2.像素
像素,像素即px,是画面中最小的点(单位色块)
3.屏幕尺寸
屏幕对角线长度
4.屏幕比例
PC显示器:1920:1080 = 16:9
苹果手机
iPhone7,8:1334 * 750 = 16:9、iPhone7,8 Plus:1920 * 1080 = 16:9
iPhoneX:2436 * 1125 = 19.5:9、iPhone12: 2532 * 1170 = 19.5:9
目前市面上设备分辨率比例传统的有:
4:3(ipad)、16:10、16:9(老手机 、电脑显示器)、18:9(去掉刘海屏幕)、19.5:9( 新款手机)、19.9:9
5.dpi
像素密度:单位面积上有多少个像素点,一般指一英寸有多少个像素点
Root
Root是用于分辨率自适应的根对象
可以设置基本分辨率,相当于设置UI显示区域
并且管理所有UI控件的分辨率自适应
可以简单理解 它管理一个 UI画布 所有的UI都是显示在这个画布上 ...