【Unity】RawImageの使い方

RawImageとは？

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

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

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

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

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

基本的な使い方

コンポーネントの設定

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上で動画を再生できます。手順は次の通り。

RenderTextureを作成する 動画の解像度に合わせたサイズのRenderTextureを作成します。
VideoPlayerのRender ModeをRenderTextureに変更するVideoPlayerコンポーネントのRender ModeをRender Textureに設定し、Target Textureに作成したRenderTextureを割り当てます。
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();
    }
}