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;
    }
}

操作步驟：

建立一個空物體，並將RawImage元件新增到該物體上。
將要顯示的圖片拖拽到RawImage元件的Texture屬性上。
將上述範例程式碼新增到一個指令碼中，並將該指令碼掛載到空物體上。
執行遊戲，可以看到圖片被顯示在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;
    }
}

操作步驟：

建立一個空物體，並將RawImage元件新增到該物體上。
將要顯示的圖片拖拽到RawImage元件的Texture屬性上。
將上述範例程式碼新增到一個指令碼中，並將該指令碼掛載到空物體上。
在Inspector面板中，調整RawImage元件的Color屬性，改變圖片的顏色。
執行遊戲，可以看到圖片的顏色被改變。

注意事項：

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();
    }
}

操作步驟：

建立一個空物體，並將RawImage元件新增到該物體上。
將要顯示的圖片拖拽到RawImage元件的Texture屬性上。
將上述範例程式碼新增到一個指令碼中，並將該指令碼掛載到空物體上。
執行遊戲，可以看到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;
    }
}

操作步驟：

建立一個空物體，並將RawImage元件新增到該物體上。
將要顯示的圖片1和圖片2拖拽到RawImage元件的Texture屬性上。
建立一個按鈕，並將上述範例程式碼新增到一個指令碼中，並將該指令碼掛載到按鈕上。
將按鈕的OnClick事件關聯到ChangeTexture()函數。
執行遊戲，點選按鈕，可以看到圖片被更換為圖片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;
    }
}

操作步驟：

建立一個空物體，並將RawImage元件新增到該物體上。
將要顯示的圖片拖拽到RawImage元件的Texture屬性上。
將要使用的材質拖拽到RawImage元件的Material屬性上。
將上述範例程式碼新增到一個指令碼中，並將該指令碼掛載到空物體上。
執行遊戲，可以看到圖片的渲染效果被更換為材質所定義的效果。

注意事項：

確保要使用的材質已經匯入到Unity專案中。

參考資料

Unity官方檔案：RawImage
Unity官方教學：Working with Raw Images