【Unity】Image・Panelの使い方 | 画像変更、色変更、alpha、sprite｜Wamutai Tech

UnityのImage（画像表示） と Panel（UIコンテナ） は、ゲームのUIを作成する上で欠かせない要素です。また、各UIにImageコンポーネントは使用されています。

しかし、「画像をスクリプトで変更したい」「パネルを非表示にしたい」「アルファ値（透明度）を調整したい」 など、細かい制御が必要なこともあります！

この記事では、ImageとPanelの基本からスクリプト制御、カスタマイズ、よくあるエラーと対策まで を詳しく解説します！

この記事で学べること
UnityのImageとPanelの使い方
1. Imageの基本
2. Panelの基本
Image・Panelの設定、スクリプト制御
よくあるエラーと解決策
まとめ

この記事で学べること

UnityのImageとPanelの基本的な使い方
スクリプトで画像やパネルの表示・非表示を制御する方法
透明度や色変更を行う方法
よくあるエラーと解決策

テクスチャ、動画を使用したい方はこちらを参考にしてください。

それでは、本題に入っていきましょう。

UnityのImageとPanelの使い方

Imageの基本

Imageは、ゲーム内で画像を表示するためのUIコンポーネント。
ボタンの背景やアイコン、キャラクターのポートレートなどに使われる。

・ [Hierarchy]→[右クリック]→[UI] → [Image] で追加
・ ImageコンポーネントにはSpriteをセットして画像を表示
・ Colorで画像の色や透明度を変更可能

※ Canvasについて気になる方はこちらを参考にしてください。

Panelの基本

Panelは、UIを整理するための背景コンテナ。
メニュー画面やポップアップ、HUDの背景として使うことが多い。

・ [Hierarchy]→[右クリック]→ [UI] → [Panel] で追加
・ Imageと同じようにColorを設定可能
・ 複数のUI要素をまとめることで管理しやすくなる

Image・Panelの設定、スクリプト制御

InspectorでImage・Panelの画像を変更（静的）

ProjectビューからSprite画像をドラッグ＆ドロップをする。

スクリプトでImageの画像を変更（動的）

スクリプトのImage.spriteを変更すると画像を差し替えられる。

➡ ボタンを押したときに画像を変更する場合などに便利
➡ newSpriteにSpriteを設定すれば画像が切り替わる

using UnityEngine;
using UnityEngine.UI;

public class ImageExample : MonoBehaviour
{
    public Image myImage;
    public Sprite newSprite; // Inspectorでセット

    public void ChangeImage()
    {
        myImage.sprite = newSprite;
    }
}

スクリプトでPanel(Image)の表示・非表示

Panelをスクリプトで SetActive(true/false) すると、UI全体を非表示にしたり、ポップアップを制御 できる。

➡ ボタンを押すとパネルを開閉するUIが作れる！

using UnityEngine;

public class PanelExample : MonoBehaviour
{
    public GameObject panel; // Inspectorで設定

    public void ShowPanel()
    {
        panel.SetActive(true);
    }

    public void HidePanel()
    {
        panel.SetActive(false);
    }
}

※ GameObjectではなくPanelを使用する場合は異なります。

Inspectorで色、透明度（alpha）を変更（静的）

ImageやPanelのColor.aを変更すると、透明度を調整可能。

・ SetTransparency(0.5f); と呼び出せば50%透明になる
・ Imageを徐々にフェードさせるエフェクトにも応用可能

スクリプトで色、透明度（alpha）を変更（動的）

色を変更

myImage.color = Color.red; // 赤に変更
myImage.color = new Color(0.5f, 0.5f, 1f, 0.8f); // RGBA指定（青・80%透明）

透明度（alpha）を変更

using UnityEngine;
using UnityEngine.UI;

public class ImageExample : MonoBehaviour
{
    public Image myImage;

    public void SetTransparency(float alpha)
    {
        Color color = myImage.color;
        color.a = alpha; // 0 = 完全透明, 1 = 完全表示
        myImage.color = color;
    }
}

よくあるエラーと解決策

Image が変更されない

・ myImage.sprite = newSprite; の newSprite に Sprite をセットしているか確認
・ SetActive(false) にしていると変更が適用されないことがあるので、一度 SetActive(true) にする

Image の透明度が変わらない

・ Color.a を変更したあとに myImage.color = color; をセットしているか確認
・ CanvasGroup を使うとスムーズにフェードできる

CanvasGroup canvasGroup = myImage.GetComponent<CanvasGroup>();
canvasGroup.alpha = 0.5f; // 50% 透明

Panel の開閉が動作しない

・ Panel の SetActive(false) にしていると、スクリプトから変更できない可能性がある
・ Inspector で Panel のオブジェクトが panel に正しくセットされているか確認

まとめ

・ Image はスプライト画像を表示するためのUIコンポーネント
・ Panel はUIを整理するための背景コンテナとして使う
・ スクリプトで画像を変更するには Image.sprite = newSprite; を使う
・ パネルの表示・非表示は SetActive(true/false); で制御可能
・ 透明度を変更するには Image.color.a を変更

Image Panel

【Unity】Image・Panelの使い方 | 画像変更、色変更、alpha、sprite