Amazonで商品を見るセール会場へ

UnityでUI画像を読み込む方法|Image・Resources・RawImageの使い分け

uGUIの画像を差し替えるときは、画像をどこから用意するかで方法を選びます。プロジェクト内のSpriteはImageへ、ネットワークから取得したTextureはRawImageへ割り当てると、型を変換する処理を減らせます。

この記事はUnity 6.3のAPIとuGUI 2.0の資料を参照した実装例です。掲載コードのUnityでのコンパイル・表示・通信テストは未実施です。既存の画像は旧記事のもので、正確なEditor版は未確認です。各方式は別のGameObjectで試し、同じImageに複数の例を同時に付けないでください。

目次

画像の用意方法と表示コンポーネント

目的・症状設定・確認先
決まったSpriteを差し替えるImageとInspectorのSprite参照。方法1を使用
Resources内のSpriteをパスで読むImageとResources.Load<Sprite>。方法2を使用
HTTPSのPNG/JPGを取得するRawImageとUnityWebRequestTexture。方法3を使用
ImageとRawImageの違いImage.spriteはSprite、RawImage.textureはTexture。RawImageだけがネットワーク専用という意味ではない

Canvas内に表示対象を置き、色のAlpha、RectTransformの位置・寸法、親の有効状態を確認します。配置で困った場合はuGUIの基本設定へ進んでください。今回の例は画像の取得と割り当てが目的で、描画負荷の測定例ではありません。ImageとRawImageの性能を一律に順位付けしません。

方法1:Inspectorで指定したSpriteをImageへ割り当てる

  1. 画像をAssetsへ配置し、Texture TypeをSprite (2D and UI)、Sprite ModeをSingleにしてApplyします。Multipleの画像は分割されたSpriteを選ぶ別条件として扱います。
  2. Canvas内にUIのImageを作り、ファイル名ChangeSprite.csで下のコードを保存します。
  3. Imageと同じGameObjectにChangeSpriteを追加し、New SpriteへProject内のSpriteをドラッグします。コンポーネントにスクリプトを「アタッチする」のではなく、同じGameObjectへ追加します。
  4. 再生時にNew SpriteがImage.spriteへ割り当てられることを確認します。未設定なら警告を出し、現在の画像を保持する想定です。

次の画像は旧記事のInspector例です。下の修正コードを今回実行した画面ではありません。

InspectorのSpriteフィールドに画像をアサインし、再生時にImageの画像が変更される様子を示す画面。
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class ChangeSprite : MonoBehaviour
{
    [SerializeField] private Sprite newSprite;

    void Start()
    {
        Image target = GetComponent<Image>();
        if (target == null || newSprite == null)
        {
            Debug.LogWarning("ImageまたはNew Spriteを確認してください。", this);
            return;
        }
        target.sprite = newSprite;
    }
}

このコードはStartで一度だけ割り当てます。Inspectorの参照を再生中に変えただけでは自動的に再実行しません。画像の比率を保つ場合はPreserve AspectとAspect Ratio Fitterの使い分けを確認してください。

方法2:ResourcesのSpriteを相対パスで読み込む

  1. 最小例ではAssets/Resources/profile.pngを用意します。方法1と同じくSprite (2D and UI)、Singleでインポートします。
  2. 別のImageにLoadSpriteFromResources.csを追加します。Resource Pathはprofileに設定します。
  3. 再生し、取得できた場合だけImage.spriteを更新する想定です。警告が出たらフォルダー・パス・型の順で確認します。
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class LoadSpriteFromResources : MonoBehaviour
{
    [SerializeField] private string resourcePath = "profile";

    void Start()
    {
        Image target = GetComponent<Image>();
        if (target == null || string.IsNullOrWhiteSpace(resourcePath))
        {
            Debug.LogWarning("ImageとResource Pathを確認してください。", this);
            return;
        }

        Sprite loadedSprite = Resources.Load<Sprite>(resourcePath);
        if (loadedSprite == null)
        {
            Debug.LogWarning("Resources内のパスとSpriteの型を確認してください。", this);
            return;
        }
        target.sprite = loadedSprite;
    }
}
目的・症状設定・確認先
Assets/Resources/profile.pngResource Pathはprofile。Assets/Resources/や.pngを含めない
Assets/Resources/Icons/profile.pngResource PathはIcons/profile。区切りは / を使う
見つからない・型が違うResources.Load<Sprite>はnullを返す。Texture Type、Single、パスを確認
Assets直下の通常フォルダーResources.Loadの探索対象ではない。Inspector参照か別の読み込み方式を選ぶ

ResourcesフォルダーはAssets直下に限定されませんが、同じ相対パスの重複を避けてください。多数の素材や配信・解放の管理が目的なら、Resourcesを増やす前にAddressablesの説明を確認します。

方法3:HTTPS画像をRawImageに表示する

次の例は公開HTTPSのPNG/JPGを一枚取得します。自分が利用できる画像の直URLを用意し、記事ページやログイン画面のURLを指定しないでください。URL欄は空なので、設定前の再生では警告で終了します。追加パッケージの導入は不要です。

  1. Canvas内にUIのRaw Imageを作り、位置と表示枠を先に決めます。色は不透明な白、UV Rectは全体を表示する0,0,1,1から始めます。
  2. GetNetworkImage.csを同じGameObjectへ追加し、Urlへ画像のHTTPS直URLを指定します。
  3. Use Native SizeはまずOFFのままにします。ONにするとRectTransform.sizeDeltaがTexture寸法へ変わり、画面に収まる保証はありません。
  4. 有効化すると取得を開始し、成功時にRawImage.textureへ割り当てる想定です。Consoleには失敗時のHTTPコードとエラーを出します。

次の小さな画像は旧記事のRawImage例です。現在のネットワーク成功や修正コードの再現を示す証拠にはしていません。

スクリプトをRawImageにアタッチして再生し、URLから画像を取得して表示させた実行結果を示す画面。
using System;
using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;

[RequireComponent(typeof(RawImage))]
public class GetNetworkImage : MonoBehaviour
{
    [SerializeField] private string url = "";
    [SerializeField] private bool useNativeSize = false;
    private RawImage target;
    private UnityWebRequest activeRequest;
    private Texture2D ownedTexture;

    void Awake() { target = GetComponent<RawImage>(); }
    void OnEnable() { StartCoroutine(Load()); }

    IEnumerator Load()
    {
        Uri uri;
        if (target == null || !Uri.TryCreate(url, UriKind.Absolute, out uri)
            || uri.Scheme != Uri.UriSchemeHttps)
        {
            Debug.LogWarning("RawImageとHTTPS画像URLを確認してください。", this);
            yield break;
        }

        activeRequest = UnityWebRequestTexture.GetTexture(uri.AbsoluteUri, true);
        activeRequest.timeout = 15;
        try
        {
            yield return activeRequest.SendWebRequest();
            if (activeRequest.result != UnityWebRequest.Result.Success)
            {
                Debug.LogWarning("画像取得に失敗。HTTP="
                    + activeRequest.responseCode + " / " + activeRequest.error, this);
                yield break;
            }

            ownedTexture = DownloadHandlerTexture.GetContent(activeRequest);
            if (ownedTexture == null) yield break;
            if (target == null)
            {
                Destroy(ownedTexture);
                ownedTexture = null;
                yield break;
            }
            target.texture = ownedTexture;
            if (useNativeSize) target.SetNativeSize();
        }
        finally { ReleaseRequest(); }
    }

    void ReleaseRequest()
    {
        if (activeRequest == null) return;
        if (!activeRequest.isDone) activeRequest.Abort();
        activeRequest.Dispose();
        activeRequest = null;
    }

    void OnDisable()
    {
        StopAllCoroutines();
        ReleaseRequest();
        if (ownedTexture == null) return;
        if (target != null && target.texture == ownedTexture) target.texture = null;
        Destroy(ownedTexture);
        ownedTexture = null;
    }
}

取得中の無効化とTextureの後片付け

サンプルはOnEnableごとに取得し、OnDisableでこのコンポーネントのコルーチンを止め、未完了リクエストをAbortしてDisposeします。成功して作成したTextureも、表示先から外してDestroyします。Inspector参照のSpriteや他の場所で共有しているTextureを破棄する例ではありません。

このコードの取得画像はこの一つのRawImage専用です。他のUIへ共有する場合は所有者と破棄時期を別に設計します。URLを有効化中に変更しても、その場で新しい取得は始まりません。一度無効化して再度有効化すると、その時点のURLで取得します。キャッシュ、連続リクエスト、認証付き通信の実装は含めていません。

GetTextureのnonReadableをtrueにして、スクリプトからピクセルを読む処理を使わない条件にしています。ピクセル加工やPNGへの再保存が必要な場合は条件を変えてください。タイムアウトはこの例で15秒にしていますが、実環境で15秒以内に画像が必ず表示されるという測定値ではありません。

画像が出ない・変形する場合の確認順

目的・症状設定・確認先
Consoleに参照やパスの警告方法1のNew Sprite、方法2のResources内の相対パスとSprite型を確認
HTTP失敗や取得エラー直URL、PNG/JPG、応答コード、通信環境を確認。WebP/SVG等をGetTextureのPNG/JPG対応と同一視しない
Editorでは出るがWebでは失敗Unity Webはブラウザーの制約を受ける。別オリジンの画像配信サーバーでCORSの許可が必要
取得成功なのに見えないRawImage.texture、ColorのAlpha、RectTransform、親のactiveInHierarchy、Maskの範囲を確認
画像が伸びる・大きすぎるUse Native Sizeと親レイアウトを確認。固定枠に収める場合は原寸へ変更せず比率を制御する
無効化すると画像が消えるこのサンプルはOnDisableで所有Textureを破棄する。保持・共有・キャッシュをしたい場合は別の設計が必要

単体でのImage/RawImage表示→同じ配信元からの取得→必要ならWebの別オリジンという順で条件を増やします。WebのCORS失敗を証明書検証の無効化で解決する説明にはしていません。

公式資料と関連記事

Resources.Load、UnityWebRequestTexture.GetTexture、RawImage、Abort、Dispose、Unity Webの通信を2026年10月3日に参照しました。通信・無効化・再有効化と各コードのUnity実行は未検証です。

uGUIでのUI制作は、ほかにも書いています。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Unityのおすすめ書籍

開発PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次