[Unity] uGUIのRaw 画像(Raw Image)の使い方

2025年5月21日

当ページのリンクには広告が含まれています。

Raw 画像(Raw Image)とは

uGUIにおける画像表示コンポーネントの1つです。
Texture 型の画像をそのまま表示することができます。

主な用途

使用例	説明
動画プレイヤー	VideoPlayer.renderMode = RenderTexture → Raw Imageで表示
Webカメラ映像	WebCamTexture をそのまま表示
カスタムレンダリング結果	RenderTexture に描画した内容を UI 上に表示
外部読み込み画像の表示	Texture2D.LoadImage() → Raw Imageに適用

Image コンポーネントと似ていますが、主に以下のような違いがあります。

画像 (Image)との違い

用途の違い

項目	Image	Raw Image
主な用途	UI画像・アイコン・ボタン背景など	動画・Webカメラ・特殊なテクスチャ表示
対応テクスチャ	Sprite（スプライト）専用	Texture（テクスチャ）全般
機能性	スライスやフィル表示、レイキャストなどに対応	表示のみ（機能は最低限）
パフォーマンス	軽量かつ最適化されている	高度なテクスチャ処理に向くがやや重いことも

UI機能の対応の違い

機能	Image	Raw Image
スライス表示（9-slice）	✅ 可能	❌ 不可
塗りつぶし（Fill）	✅ 可能（時計型やバー表示）	❌ 不可
ボタン背景	✅ 適している	❌ 向かない
イベントとの連携	✅ フルサポート	⭕（制限あり）

Raw 画像(Raw Image)を構成するコンポーネント

コンポーネント名	説明
Rect Transform	・UI全般で使われる 2Dレイアウト用の Transform ・配置・サイズ・アンカーの設定に使用・他の UI と同様に Canvas の中で制御される
Canvas Renderer	・Unity の UI描画用内部コンポーネント・通常は開発者が直接操作しない・Graphic（Raw Image など）と Canvas をつなぐ描画バックエンド
Raw Image	・Texture（テクスチャ）型の画像をそのまま uGUI 上に表示するためのUIコンポーネント・Texture2D や RenderTexture を直接表示可能・Image コンポーネントとは異なり Sprite ではなく Texture を扱う・UV矩形（uvRect）で画像の表示範囲を細かく制御できる・動画・Webカメラ・カスタム描画結果の表示に最適

Raw 画像(Raw Image)の基本的な使い方

Raw 画像(Raw Image)を使用するには、UI要素を配置するためのCanvasが必要です。
もし、シーンにCanvasが無い場合は、Canvasを作成してください。

キャンバス(Canvas)の作成：
「ヒエラルキー(Hierarchy)」ウィンドウを右クリック⇒UI⇒キャンバス(Canvas)
を選択してCanvasを作成します。

Raw 画像(Raw Image)の作成：
「ヒエラルキー」ウィンドウのCanvasオブジェクトを右クリック⇒UI⇒Raw 画像(Raw Image)
を選択してRawImageをCanvasに追加します。

Raw Imageコンポーネントでは以下の項目を設定できます。

テクスチャ (Texture)
色 (Color)
マテリアル (Material)
レイキャストターゲット (Raycast Target)
レイキャストパディング (Raycast Padding)
- Left
- Bottom
- Right
- Top
マスク可能 (Maskable)
UV 矩形 (UV Rect)
- X
- Y
- W
- H

順番に解説していきます。

テクスチャ (Texture)

表示対象となる「画像のデータ本体（= Texture型）」を指定するためのプロパティです。

使用できる Texture の型

UnityEngine.Texture 型を継承した以下のような型を扱えます。

型名	説明
Texture2D	最も基本的な静的画像。PNG/JPGなどの画像ファイルをロードして使う
RenderTexture	カメラやポストプロセスなどの描画結果をリアルタイムで格納する特殊なテクスチャ
WebCamTexture	Webカメラやスマホカメラからの入力映像を表す
MovieTexture（旧）	動画再生用（※非推奨、古いUnity限定）

色 (Color)

テクスチャに対して乗算（Multiply）される色を指定するためのプロパティです。
「元の画像にこの色を掛け算することで、見た目を変える」ためのパラメータです。

設定例

設定値（R, G, B, A）	表示結果
color = (1, 1, 1, 1)	元の画像そのまま表示
color = (1, 0, 0, 1)	赤みだけを残して表示（青・緑を消す）
color = (1, 1, 1, 0.5)	半透明になる
color = (0.5, 0.5, 0.5, 1)	暗くグレーがかった見た目になる

主な用途

用途	解説
表示・非表示を切り替えたい	color.a = 0（透明） or 1（不透明）で制御
フェードイン・フェードアウト	color.a を時間経過で変化させる
色調を変えたい	RGB成分を変更する（例：暗くする、グレーアウトなど）
選択状態や操作可否を表現したい	アクティブな時は白、不活性な時は薄灰色など

マテリアル (Material)

Raw Image の描画処理に使用される「マテリアル（Material）」を指定するためのプロパティです。
マテリアルとは、見た目をカスタマイズするための描画ルールです。

主な用途

用途	マテリアルの効果
白黒・セピア表示にしたい	グレースケール用シェーダーを持つマテリアルを指定
アルファマスクで切り抜きたい	アルファテスト／マスク処理付きのシェーダーを使用
ブラー／発光などの視覚効果を付けたい	カスタムポストエフェクトシェーダーで演出
UIでノイズや揺れなどを表現したい	シェーダーアニメーションを持つマテリアルを適用
複数テクスチャを合成したい	mainTex と maskTex などを合成するカスタムマテリアル

Unity標準のマテリアル

Raw Image にマテリアルを指定しない場合、デフォルトで UI/Default シェーダーが使用されます。
これにより、以下のような標準機能が提供されます。

色（color）との乗算描画
テクスチャの uvRect による部分表示
マスク (Mask, RectMask2D) 対応

レイキャストターゲット (Raycast Target)

マウスやタッチなどの入力イベントの「当たり判定」として反応するかどうかを決めるフラグです。

以下の入力イベントに対して反応するためには、Raycast Target = true にする必要があります。

マウスクリック
タッチ操作
ドラッグ
スクロールホイールなどの UIイベント

レイキャストパディング (Raycast Padding)

「レイキャストの当たり判定エリア」を拡張または縮小するための設定です。
四方向を数値(ピクセル)で設定します。
左(Left)、上(Top)、右(Right)、下(Bottom)
正の値で判定エリアが広がり、負の値で狭くなります。

主な用途

UIが小さくて押しにくい／タップしにくいときに、判定エリアを広げる
見た目と実際のクリック可能領域をズラしたい／制御したいとき
複数UIが近接していて誤タップを防止したいとき

設定例

設定値	レイキャストエリアの変化
(10, 10, 10, 10)	四方に10px広げる（押しやすくなる）
(-5, -5, -5, -5)	四方に5px狭める（厳密な判定にする）
(0, 20, 0, 0)	上方向だけ20px拡張（縦長UIなどに対応）

マスク可能 (Maskable)

Mask や RectMask2D の影響を受けるかどうかを制御するフラグです。
Mask や RectMask2D は、UI の一部を指定領域内だけ表示し、それ以外を隠す仕組みです。

主な用途

シーン例	マスク可能の役割
スクロールビューの中の画像	RawImage.maskable = true → 領域外の画像は隠れる
マスクでくり抜いた円形UI	Mask コンポーネント + RawImage.maskable = true
UI画像をマスク無視で常に表示したい	RawImage.maskable = false にする → マスク領域を無視して描画

UV 矩形 (UV Rect)

テクスチャ画像のどの範囲を UI 上に表示するかを制御するための矩形（Rect）を指定するプロパティです。
これは 0.0〜1.0 の UV座標（テクスチャ空間の座標系）を使って範囲を定義します。

UV座標は、左下が(0, 0)、右上が(1, 1)です。
テクスチャ全体を表示する場合は、(X:0, Y:0, W:1, H:1)となります。

フィールド

フィールド名	意味	単位
X	横方向の表示開始位置	0〜1
Y	縦方向の表示開始位置	0〜1
W (width)	横方向の表示サイズ	0〜1（1以上も可）
H (height)	縦方向の表示サイズ	0〜1（1以上も可）