Unity 4.6 推出了全新的UI系统,称为UGUI。
配合UI还提供了强大的EventSystem 事件系统来管理UI元素。
从Unity 2017开始还引入了图集的概念。
//--Text
在 Hierarchy 中创建文本组件。 Create → UI →Text 。
Rect Transform:用于控制UI物体的基本属性,Canvas Renderer:画板UI渲染器,必备且不可编辑。
- Text : 要显示的文本。
- Font : 字体(TTF格式)可以用 FontCreator 软件来精简一下字体库。
- FontStyle : 字体风格(粗体,斜体,正常和粗体加斜体)。
- FontSize : 字体大小。
- LineSpacing : 行间距。
- RichText : 富文本(这里的富文本的意思是在Text输入的内容里面用Html的一些字体修饰符来改变字体。例如<b>字体</b>意思是加粗。color为颜色,fontsize为大小等。)
- Alignment : 对齐方式(第一行里面的是段落对齐,第二行是靠顶中间或者靠底)。
- Align By Geometry : 几何对齐(使用区段的字形几何执行水平对齐,可以导致更好的拟合左和右对齐,但可能会导致不正确的定位)。
- Horizontal Overflow : 水平溢出(Wrap:文本将自动换行,当达到水平边界,Overflow:文本可以超出水平边界,继续显示)。
- Vertical Overflow : 垂直溢出(Truncate:文本不显示超出垂直边界的部分,Overflow:文本可以超出垂直边界,继续显示)。
- Best Fit : 最佳适应(Min Size:最小大小Max Size:最大大小)就是让当前输入的文字默认的变为适应当前的输入框。
- Color :字体颜色,不会影响到富文本颜色。
- Material :材质球,一般不用。
- Raycast Target : 是否作为射线投射目标,关闭之后忽略UGUI的射线检测。
Text 组件提供了横向 纵向自动换行的功能。
Raycast Target ,如果UI元素不需要点击事件,一定不要勾选。因为UGUI的事件系统会遍历所有带有Raycast Target 的组件,这会带来一些不必要的开销。
UGUI默认材质无法修改,可以重写它,即拖入新的材质。
//--描边和阴影
在Text游戏对象上添加Outline 和 Shadow ,即表示支持文本的描边和阴影。可以设置它们的颜色以及距离。
描边的原理就是在原有Text组件的基础上在上 下 左 右 各多画了一遍,所以它的效率是很低的。
阴影会比描边好很多,因为它只需要多画一遍,所以能用阴影就不要用描边。
//--动态字体
有时间的同学可以看一下这个:Unity3D中的动态字体和静态字体
UGUI动态字体的原理是根据传入的字体以及字体的大小生成一张纹理,最终将纹理上的字体显示出来。
这就带来一个问题:相同字体只是字体大小不同会在纹理中生成多份(此处两个text所以两份)。
所以不太建议使用动态字体。(除了聊天和起名等)
//--字体花屏
UGUI的动态字体会动态生成材质,它开始是256X256(像素)然后根据使用字体的情况慢慢扩大,直到4096X4096(像素)。
当文字太多不够放的时候,会触发UGUI内部重建字体贴图命令,接着就可能造成文字花屏。若要解决这个问题,就要监听它内部重建的事件,然后整理刷新一下当前场景的所有字体即可。
using UnityEngine;
using UnityEngine.UI;
public class ZiTiHuaPingMyTools : MonoBehaviour
{
private Font m_NeedRebuildFont = null;
private void Start()
{
Font.textureRebuilt += (Font font) =>
{
m_NeedRebuildFont = font;
};
}
private void Update()
{
if (m_NeedRebuildFont)
{
Text[] texts = FindObjectsOfType<Text>();
if (texts != null)
{
foreach (Text text in texts)
{
if (text.font == m_NeedRebuildFont)
{
text.FontTextureChanged();
}
}
}
m_NeedRebuildFont = null;
}
}
}
//--Image组件
导入 Unity 内的图片资源,如果是用于 UI 显示的,需要手动将这些图片的类型修改为“Sprite(2D and UI)。
Source Image :设置用于显示的图片。
Color :设置用于显示的颜色。
Material : 渲染图像的材质。
Raycast Target : 能否接收到射线检测,不需要点击事件不勾选。
Preserve Aspect (Simple 和 Filled Image Types 时有效) : 图像的高度和宽度保持原始比例, 勾选后图片会等比例进行缩放,不会变形。
Image Type : 图片显示方式。
1 简单Simple
2 九宫格/片Sliced
注意:默认的图片是不支持该模式的,需要编辑图片,设置图片的九宫边框。
设置边框的步骤:
①Project面板选中图片资源文件->属性区域点击“Sprite Editor”;
②在编辑面板,设置图片的 Border 边框数值;
③设置完毕后,不要忘记点击 Apply 保存操作。
设置完毕边框后,对图片进行横向或者纵向拉伸,这个时候图片就会以图片的中心区域进行拉伸,不会拉伸图片的边框效果。
Fill Center 勾选后九宫格中间的区域会显示,不勾选不显示。
3 平铺Tiled
开发中很少用到,如果设置过九宫格,则只会平铺中间的区域。
4 填充Filled
Fill Method 指定图像在动画中填充空间的方式
选项是Horizontal水平方向, Vertical垂直方向、 Radial90度、 Radial180度 Radial360度
Fill Origin 填充的起点。依各选项有所不同
选项是各种组合的底部、顶部、左,右,取决于哪个 Fill方法是选定的。
Fill Amount
当前填充的图像(范围从 0.0到 1.0)的分数。
Clockwise (Filled Image Type only)填充应按顺时针方向。
Set Native Size : 按钮图像框的尺寸大小设置为原始像素的纹理。
//--Raw Image组件
Image 组件只能显示 Sprite,Raw Image 组件既可以显示任意Texture 也可以使用 Sprite ,不过它还是以 Texture 方式显示的。
Image 组件使用Sprite时,可以使用Atlas来合并批次,但是Raw Image 组件缺不能,每个Raw Image 就占一次 DrawCall 。
有时候不得不使用Raw Image ,比如 Render Texture ,需要将摄像机渲染到纹理中,就必须用它。
但是它无法合并DrawCall ,所以不建议使用。
//--Button组件
Interactable : 是否禁用按钮,如果禁用,按钮界面将会产生Dissable的效果。
Transition : 可以设置按钮再不同状态下的表现形式,有None、Color Tint、Sprite Swap、Animation四种选项。
- None--没有任何效果,点击按钮不会产生界面上的变化。
- Color Tint--颜色过度模式。
Target Graphic--图片组件
Normal Color--正常按钮颜色
Highlighted Color--高亮颜色,鼠标经过时会显示的颜色
Pressd Color--按下的颜色
Disable Color--禁用时的颜色
Color Multiplier--颜色切换系数,颜色切换速度,越大则颜色在几种状态间变化速度越快。
Fade Duration--衰落时间,颜色变化的延时时间,越大则变化越不明显
- Sprite Swap--图片切换模式。
- Animation : 动画过渡。
Navigation : 导航模式
- None(关闭):关闭导航。
- Automatic(自动导航):自动识别并导航到下一个控件。
- Horizontal(水平导航):水平方向导航到下一个控件。
- Vertical(垂直导航):垂直方向导航到下一个控件。
- Explicit(指定导航):特别指定在按下特定方向键时从此按钮导航到哪一个控件
Visualize:可视化,把按键能够导航到的路径可视化,高亮的黄色箭头为当前按钮可导航到的目标。
OnClick事件列表 :可以拖拽物体或脚本,指定方法。(不建议)
建议用代码赋值方式:
using UnityEngine;
using UnityEngine.UI;
public class BindButtonOnClickEvenetMyTools : MonoBehaviour
{
public Button button;
private void Start()
{
button.onClick.AddListener(OnClickMyButton);
}
private void OnClickMyButton()
{
Debug.Log("OnClickMyButton");
}
}
//--Toggle组件
和Button 差不多。
using UnityEngine;
using UnityEngine.UI;
public class BingToggleEventMyTools : MonoBehaviour
{
public Toggle toggle;
private void Start()
{
toggle.onValueChanged.AddListener(OnClickMyToggle);
}
private void OnClickMyToggle(bool isOn)
{
Debug.Log("OnClickMyToggle + " + isOn.ToString());
}
}
多个Toggle 可以设置同一个 Toggle Group 这样这几个Toogle 就只能有一个是选中状态了。
//--Slider 组件
using UnityEngine;
using UnityEngine.UI;
public class BindSliderEventMyTools : MonoBehaviour
{
public Slider myslider;
private void Start()
{
//--设置取值范围最小值/最大值
myslider.minValue = 0;
myslider.maxValue = 100;
myslider.onValueChanged.AddListener(OnMySliderValueChange);
}
private void OnMySliderValueChange(float value)
{
Debug.Log("value :" + value);
}
}
//--Scrollbar 和 ScrollView 组件
参见这里