一、Image
Image 是图像组件,是 UGUI 中用于显示精灵图片的关键组件
除了背景图等大图,一般都使用 Image 来显示 UI 中的图片元素
(一)参数介绍
-
Source Image:图片来源
图片类型必须是“精灵 Sprite”类型
-
Color:图像的颜色
-
Matreial:图像的材质
一般不修改,会使用 UI 的默认材质
-
Raycast Target:是否作为射线检测的目标
-
Maskable:是否能被遮罩
-
Image Type:图片类型
-
Simple:普通模式,均匀缩放整个图片
-
Sliced:切片模式,9 宫格拉伸,只拉伸中央十字区域
- Pixels Per UnitMultiplier:每单位像素乘数
- Fill Center:中心填充
点击 Sprite,点击 Inspector 面板上的 Sprite Editor
-
Tiled:平铺模式,重复平铺中央部分
-
Filled:填充模式
- Fill Method:填充方式
- Fill Origin:填充原点
- Fill Amount:填充量
- Clockwise:顺时针方向
-
-
Use Sprite Mesh:使用精灵网格
勾选的话 Unity 会帮我门生成图片网格
-
Preserve Aspect:确保图像保持其现有尺寸
-
Set Native Size:设置为图片资源的原始大小
(二)代码示例
Image img = this.GetComponent<Image>();
img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");((RectTransform)transform).sizeDelta = new Vector2(200, 200);
img.raycastTarget = false;img.color = Color.red;
二、Text
(一)参数介绍
-
Text:文本显示内容
-
Font:字体
-
FontStyle:字体样式
- Normal:普通
- Bold:加粗
- Italic:斜体
- Bold And Italic:加粗 + 斜体
-
Font Size:字体大小
-
Line Spacing:行之间的垂直间距
-
Rich Text:是否开启富文本
加粗:
<b>文本内容</b>
斜体:
<i>文本内容</i>
大小:
<size=10>文本内容</size>
颜色:
<color=red>文本内容</color>
或<color=#00ff00ff>文本内容</color>
-
Alignment:对齐方式
-
Align By Geometry:使用字形集合形状范围进行水平对齐,而不是字形指标
-
Horizontal Overflow:处理文本太宽无法放入矩形范围内时的处理方式
- Wrap:包裹模式——字体始终在矩形范围内,会自动换行
- Overflow:溢出模式——字体可以溢出矩形框
-
Vertial Overflow:处理文本太高无法放入矩形范围内时的处理方式
- Truncate:截断模式——字体始终在矩形范围内,超出部分裁剪
- Overflow:溢出模式——字体可以溢出矩形框
-
Best Fit:自动适应
忽略字体大小,始终把内容完全显示在矩形框中,会自动调整大小
- MinSize:最小字体大小
- MaxSize:最大字体大小
-
Color:文字的颜色
-
Matreial:图像的材质
一般不修改,会使用 UI 的默认材质
-
Raycast Target:是否作为射线检测的目标
-
Maskable:是否能被遮罩
(二)边缘和阴影效果
为 Text 添加边缘线组件 outline 和 阴影组件 Shadow 设置效果
- Effect Color:效果颜色
- Effect Distance:生效位置
- Use Graphic Alpha:是否启用透明通道
(三)代码示例
Text txt = this.GetComponent<Text>();
txt.text = "哈哈哈哈哈";
三、RawImage
RawImage 是原始图像组件,是 UGUI 中用于显示任何纹理图片的关键组件
它和 Image 的区别是,一般 RawImage 用于显示大图(背景图,不需要打入图集的图片,网络下载的图等等)
(一)参数介绍
-
Texture:图像纹理
可以是任意类型的图片,不必一定是 Sprite
-
Color:图像的颜色
-
Matreial:图像的材质
一般不修改,会使用 UI 的默认材质
-
Raycast Target:是否作为射线检测的目标
-
Maskable:是否能被遮罩
-
UV Rect:图像在 UI 矩形内的偏移和大小
改变它们,图像边缘将进行平铺拉伸来填充 UV 矩形周围的空间
(二)代码示例
RawImage raw = this.GetComponent<RawImage>();
raw.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");
raw.uvRect = new Rect(0, 0, 1, 1);