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項目中。

參考資料

• Unity官方文檔：RawImage
• Unity官方教程：Working with Raw Images

__EOF__