UGUI学习笔记（二）可视组件

最新推荐文章于 2023-07-23 13:40:01 发布

夜槿笙歌

最新推荐文章于 2023-07-23 13:40:01 发布

阅读量875

点赞数 2

分类专栏： # UGUI 文章标签：学习 unity 游戏引擎

本文链接：https://blog.csdn.net/LWR_Shadow/article/details/126648071

版权

UGUI 专栏收录该内容

16 篇文章 12 订阅

订阅专栏

一、Text组件

Text：组件显示的文本内容。
Character：
- Font：文本字体
- Font Style：文本样式，包含「Normal正常」、「Bold加粗」、「Italic倾斜」、「Bold And Italic加粗并倾斜」
- Font Size：文本大小
- Line Spacing：行间距
- Rich Text：是否开启富文本
Paragraph：
- Alignment：文本的水平和垂直对齐方式。
- Align by Geometry：几何对齐（根据字的几何形状）
- Horizontal Overflow：当选择Overflow时允许水平方向超出文本框范围
- Vertical Overflow：当选择Overflow时允许垂直方向超出文本框范围
- Best Fit：自动调整字体大小以适应文本框
Color：文本颜色
Material：文本材质
Maskable：关闭后父物体的遮罩将不再对其生效

新版本Unity中已经将Text组件归为已过时，并推荐使用TMP的Text组件。可以参考这篇文章传送门

富文本

富文本类似于HTML标签的语法格式，可以灵活的调整文本样式。
Unity支持的样式标签如下：

<b></b> --粗体
<i></i> --斜体
<size=50></size> --字号
<color=red></color> --颜色
<material=2>texturally</material> --仅对Text Mesh有用，使用参数指定的材质渲染文本部分
<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5> --仅对Text Mesh有用，渲染与文本内联的图像

二、Image组件

Source Image：表示要显示的图像的纹理（必须作为精灵导入）。
Color：要应用于图像的颜色。
Material：用于渲染图像的材质。
Image Type：显示类型，下面将详细讲解。
Set Native Size：将图像框的尺寸设置为纹理的原始像素大小。

Image Type

当「Image Type」选择「Simple」选项时，如果Sprite的大小与组件的大小不同时，前者将进行拉伸处理以符合组件大小。如果此时复选了「Perserve Aspect」选项，则图片在缩放时将保持长宽比例恒定。

此外，在此模式下选中「Use Sprite Mesh」选项，Image将使用Sprite Mesh渲染图像。

当「Image Type」选择「Sliced」选项时，图片将按九宫格进行切分。
比如我对一张滑稽进行如下切分

那么此时再调整Image的大小，九宫格的四个角将保持不变，四条边只进行拉伸操作，只有中间的部分会进行缩放操作。此外，当取消「Fill Center」选项时，中间部分将不再显示

当「Image Type」选择「Tiled」选项时，图片将会像铺地砖一样不断重复，直到填满整个图片控件。需要注意填充时内部会采用九宫格中间的切片进行填充

当「Image Type」选择「Filled」选项时，与「Simple」模式相似，不同之处在于它可以表现出一种从无到有的过程。效果如下

「Fill Method」设置了填充形式
「Fill Origin」设置了填充的起始位置
「Fill Amount」设置了填充百分比
通过脚本动态控制「Fill Amount」可以实现类似技能冷却的效果。

三、Raw Image组件

Raw Image组件向用户显示非交互式图像。此图像可用于装饰或图标之类的用途，还可以从脚本更改图像以便反映其他组件的更改。该组件类似于Image组件，但为动画化图像和准确填充组件矩形提供了更多选项。Image图像组件要求其纹理为Sprite，而Raw Image可以接受任何纹理。

UV Rect

UV Rect属性可以调整图像在控件矩形内的偏移和大小，以标准化坐标（范围 0.0 到 1.0）表示。图像边缘将进行拉伸来填充 UV 矩形周围的空间。效果如下

以上面的火柴人图片举例，UV Rect会将图片坐标映射到(0,1)的范围内。即使X或Y超过1，也会重新映射到(0,1)中，类似于跑马灯的效果。

基于该特性，我们可以将多个帧组成的图片做成动画

代码如下

public class UVRectExample : MonoBehaviour
{
    private RawImage _rawImage;
    private float _offsetX;
    private float _offsetY;
    void Start()
    {
        _rawImage = GetComponent<RawImage>();
        _offsetX = 1 / 5f;
        _offsetY = 1 / 3f;
        StartCoroutine(Play());
    }

    IEnumerator Play()
    {
        float x = 0;
        float y = 0;
        while (true)
        {
            y += _offsetY;
            while (x < 1)
            {
                x += _offsetX;
                _rawImage.uvRect = new Rect(x, y, _rawImage.uvRect.width, _rawImage.uvRect.height);
                yield return new WaitForSeconds(0.1f);
            }
            x = 0;
        }
    }
}