RawImageとは？

RawImageは、uGUIでテクスチャを直接表示するためのコンポーネントです。

よく似たコンポーネントにImageがありますが、2つには以下の違いがあります。

コンポーネント表示できるもの主な用途
ImageSprite通常のUI画像、ボタンの背景など
RawImageTexture全般RenderTexture、ダウンロードした画像、動画など

RawImageはSpriteへの変換が不要なため、RenderTextureやTexture2Dをそのまま表示できます。

カメラ映像をミニマップとしてUIに出したり、動画プレイヤーを組んだりするときによく使うコンポーネントです。

https://docs.unity3d.com/ja/current/Manual/script-RawImage.html

基本的な使い方

コンポーネントの設定

Hierarchyウィンドウで右クリックし、UI > Raw Image を選択するとGameObjectが作成されます。

InspectorでRawImageコンポーネントの各プロパティを設定します。

プロパティ説明
Texture表示するテクスチャ
Colorテクスチャに乗算する色
Material使用するマテリアル
UV Rectテクスチャのどの範囲を表示するか

ProjectウィンドウのテクスチャをTextureフィールドにドラッグ＆ドロップするだけで表示できます。

スクリプトからテクスチャを変更する

RawImageコンポーネントのtextureプロパティに代入すれば、スクリプトから動的に切り替えられます。

using UnityEngine;
using UnityEngine.UI;

public class RawImageSample : MonoBehaviour
{
    [SerializeField] private RawImage _rawImage;
    [SerializeField] private Texture _texture;

    private void Start()
    {
        // テクスチャを設定する
        _rawImage.texture = _texture;
    }
}

UV Rectの活用

UV Rectはテクスチャのどの範囲を表示するかを指定するプロパティです。

パラメータ説明
X, Y表示開始位置のオフセット（0〜1）
W, H表示範囲のスケール（1で全体）

テクスチャのスクロールアニメーション

UV RectのXやYを毎フレーム動かすと、テクスチャをスクロールさせられます。水面や雲、ベルトコンベアの演出に便利。

using UnityEngine;
using UnityEngine.UI;

public class TextureScroller : MonoBehaviour
{
    [SerializeField] private RawImage _rawImage;

    // スクロール速度
    [SerializeField] private float _scrollSpeedX = 0.5f;
    [SerializeField] private float _scrollSpeedY = 0f;

    private void Update()
    {
        var uvRect = _rawImage.uvRect;

        // UV RectのX・Yを毎フレーム加算してスクロールさせる
        uvRect.x += _scrollSpeedX * Time.deltaTime;
        uvRect.y += _scrollSpeedY * Time.deltaTime;

        _rawImage.uvRect = uvRect;
    }
}

テクスチャのWrap ModeをRepeatに設定しておくと、端まで到達したときに繰り返し表示されます。

VideoPlayerとの組み合わせ

VideoPlayerの出力先をRenderTextureにして、それをRawImageに渡せば、UI上で動画を再生できます。手順は次の通り。

  1. RenderTextureを作成する 動画の解像度に合わせたサイズのRenderTextureを作成します。

  2. VideoPlayerのRender ModeをRenderTextureに変更するVideoPlayerコンポーネントのRender ModeをRender Textureに設定し、Target Textureに作成したRenderTextureを割り当てます。

  3. RawImageにRenderTextureを設定する UIのRawImageのTextureに同じRenderTextureを設定します。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Video;

public class VideoUI : MonoBehaviour
{
    [SerializeField] private RawImage _rawImage;
    [SerializeField] private VideoPlayer _videoPlayer;
    [SerializeField] private RenderTexture _renderTexture;

    private void Start()
    {
        // VideoPlayerの出力先をRenderTextureに設定する
        _videoPlayer.targetTexture = _renderTexture;

        // RenderTextureをRawImageに表示する
        _rawImage.texture = _renderTexture;

        // 動画を再生する
        _videoPlayer.Play();
    }
}

VideoPlayerの詳しい使い方はこちらの記事も参考にしてください。

【Unity】VideoPlayerで動画を再生する - GARNET LOG
GARNET LOG

まとめ

RawImageはTextureを直接扱えるuGUIコンポーネントです。

  • ImageはSpriteのみだけど、RawImageはTextureならなんでも入る
  • UV Rectを動かせばテクスチャをスクロールさせられる
  • VideoPlayerとRenderTextureを組み合わせればUI上で動画も再生できる

Spriteに変換できないテクスチャを扱うときは、まずRawImageを試してみましょう。