Unity UGUI的RawImage(原始图片)组件的介绍及使用

Unity UGUI的RawImage(原始图片)组件的介绍及使用

1. 什么是RawImage组件?

RawImage是Unity UGUI中的一个组件,用于显示原始图片。与Image组件不同,RawImage可以直接显示原始图片的像素数据,而不需要经过额外的处理。

2. RawImage组件的工作原理

RawImage组件通过将原始图片的像素数据直接传递给显卡进行渲染,从而实现显示原始图片的功能。它可以显示各种格式的图片,包括常见的PNG、JPG等格式。

3. RawImage组件的常用属性

  • Texture:用于指定要显示的原始图片的纹理。
  • Color:用于指定图片的颜色,可以通过调整透明度来实现图片的淡入淡出效果。
  • Material:用于指定图片的材质,可以通过更换材质来实现不同的渲染效果。
  • UV Rect:用于指定图片在纹理中的位置和大小。

4. RawImage组件的常用函数

  • SetNativeSize():根据原始图片的大小自动调整RawImage的大小,使其与图片保持一致。
  • SetMaterialDirty():标记材质为脏,使其在下一帧重新渲染。
  • SetVerticesDirty():标记顶点为脏,使其在下一帧重新计算顶点位置。

5. 示例代码

示例1:显示一张图片

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;

    void Start()
    {
        rawImage.texture = texture;
    }
}

操作步骤:

  1. 创建一个空物体,并将RawImage组件添加到该物体上。
  2. 将要显示的图片拖拽到RawImage组件的Texture属性上。
  3. 将上述示例代码添加到一个脚本中,并将该脚本挂载到空物体上。
  4. 运行游戏,可以看到图片被显示在RawImage组件中。

注意事项:

  • 确保要显示的图片已经导入到Unity项目中。

示例2:调整图片的颜色

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    public Color color;

    void Start()
    {
        rawImage.texture = texture;
        rawImage.color = color;
    }
}

操作步骤:

  1. 创建一个空物体,并将RawImage组件添加到该物体上。
  2. 将要显示的图片拖拽到RawImage组件的Texture属性上。
  3. 将上述示例代码添加到一个脚本中,并将该脚本挂载到空物体上。
  4. 在Inspector面板中,调整RawImage组件的Color属性,改变图片的颜色。
  5. 运行游戏,可以看到图片的颜色被改变。

注意事项:

  • Color属性的透明度可以通过调整Alpha值来实现淡入淡出效果。

示例3:调整图片的大小

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;

    void Start()
    {
        rawImage.texture = texture;
        rawImage.SetNativeSize();
    }
}

操作步骤:

  1. 创建一个空物体,并将RawImage组件添加到该物体上。
  2. 将要显示的图片拖拽到RawImage组件的Texture属性上。
  3. 将上述示例代码添加到一个脚本中,并将该脚本挂载到空物体上。
  4. 运行游戏,可以看到RawImage的大小自动调整为与图片一致。

注意事项:

  • 在调用SetNativeSize()函数之前,确保RawImage的Texture属性已经被赋值。

示例4:更换图片

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture1;
    public Texture texture2;

    void Start()
    {
        rawImage.texture = texture1;
    }

    public void ChangeTexture()
    {
        rawImage.texture = texture2;
    }
}

操作步骤:

  1. 创建一个空物体,并将RawImage组件添加到该物体上。
  2. 将要显示的图片1和图片2拖拽到RawImage组件的Texture属性上。
  3. 创建一个按钮,并将上述示例代码添加到一个脚本中,并将该脚本挂载到按钮上。
  4. 将按钮的OnClick事件关联到ChangeTexture()函数。
  5. 运行游戏,点击按钮,可以看到图片被更换为图片2。

注意事项:

  • 确保按钮的OnClick事件已经正确关联到ChangeTexture()函数。

示例5:更换材质

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    public Material material;

    void Start()
    {
        rawImage.texture = texture;
        rawImage.material = material;
    }
}

操作步骤:

  1. 创建一个空物体,并将RawImage组件添加到该物体上。
  2. 将要显示的图片拖拽到RawImage组件的Texture属性上。
  3. 将要使用的材质拖拽到RawImage组件的Material属性上。
  4. 将上述示例代码添加到一个脚本中,并将该脚本挂载到空物体上。
  5. 运行游戏,可以看到图片的渲染效果被更换为材质所定义的效果。

注意事项:

  • 确保要使用的材质已经导入到Unity项目中。

参考资料

posted @ 2023-07-24 19:48  AlianBlank  阅读(488)  评论(0编辑  收藏  举报