渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

【失敗しない】Unityで画像を差し替える方法

【失敗しない】Unityで画像を差し替える方法

こんにちは、Unityエンジニアのオオバです。

お悩みさん
お悩みさん
  • Unityで画像を差し替える方法がわからない
  • 失敗しない画像の差し替え方が知りたい
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

    Unityで開発中、画像の差し替えはよく発生する作業です。適当な画像で序盤は進めて、後半デザインを差し替えるとなどです。

    画像の差し替えと聞くと一見簡単そうですが、やり方間違えると事故の元です。過去にオオバも何回かやらかしています。そこで本記事ではUnity歴11年の経験から送る 「画像差し替えのベストプラクティス」 をお送りいたします。

    画像差し替えは、やろうと思えば 誰でもできる比較的簡単な作業 です。Unityエンジニアだけでなく、UIデザイナー、クリエーター、プランナーと 職種問わず必要なスキル です。ぜひこの記事を通してUnityでの画像差し替えをマスターしてみましょう。

    画像差し替えに不安を持っている方はぜひ最後まで読んでみてください。

    おすすめ→ 初心者が気をつけるべきUnity開発11のポイント

    画像はUnity外で差し替える

    最初に結論を話しますと、 画像の差し替えは「Unityの外で行う」のが正しいやり方です。 後で詳しく解説しますがUnityプロジェクトに画像ファイルを追加しても上書きできません。

    1. Unityプロジェクトのフォルダを開く
    2. フォルダに画像を追加して直接上書きする

    これが正しいやり方です。よくUnity初心者は Unityプロジェクトに直接ファイル追加して失敗 します。正直それが感覚的で正しそうな方法だと思いますが「Unityエディタの仕様」なのです。それでは詳しい解説に入ります。

    👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

    Unityプロジェクト内のファイルを安全に上書きする方法

    さっそく、Unityプロジェクト内のファイルを安全に上書きする方法を解説します。以下の画像をサンプルとして用意しました。

    ファイル名unity_chan.pngunty_chan_smile.png
    画像
    【失敗しない】Unityで画像を差し替える方法_0
    【失敗しない】Unityで画像を差し替える方法_0

    2枚の画像を用意しました。どちらもファイル幅と高さは同じです。

    👉 【無料】Unityちゃんをダウンロードして動かす方法

    【失敗しない】Unityで画像を差し替える方法_1

    今回は unity_chan.png をImageコンポーネントでUI上に8つ表示させました。

    【失敗しない】Unityで画像を差し替える方法_2

    8箇所で使われた画像を、↑上の笑ったUnityちゃん画像(unty_chan_smile.png)に差し替えてみたいと思います。

    👉 【Unity基礎】スマホ向けゲームUIの作り方!基本的なUI配置から複数解像度対応まで解説

    正しい画像の差し替え方法はUnityの外側でファイルを上書きする

    正しい画像の差し替え方法は Unityの外でファイルを上書き することです。つまりMacなら 「Finder」 Windowsなら 「エクスプローラー」 を使います。 Finder、またはエクスプローラーでUnityプロジェクトのフォルダを開き、ファイルを上書きするのです。

    【失敗しない】Unityで画像を差し替える方法_3

    オオバはMacユーザー Finder で上書きします。

    【失敗しない】Unityで画像を差し替える方法_4

    すると全てのUnityちゃんの画像を置き換えることができました。

    ちなみに、このテクニックは画像の差し替えだけではなく サウンドファイル、動画といったアセットの差し替えにも使える ため、ぜひ覚えておきましょう。

    Projectウィンドウに直接追加すると画像を差し替えできない

    画像差し替えのよくある失敗も紹介します。結論から話すと、 Projectウィンドウに上書きしたいファイルを追加するのは禁止 です。実際にやってみると分かるのですが、上書きしようとしたファイル名に数字が付いてしまいます。結果的に ファイルを上書きできません。

    【失敗しない】Unityで画像を差し替える方法_5

    ↑上のようにファイルに数字が追加されて混在することになるのです。

    Unity初心者がよくやってしまう失敗です。

    Projectウィンドウ内のファイルを爆速で開く方法

    画像を差し替える際に画像が格納されたフォルダをすぐに開きたくなります。指定のフォルダをUnityから爆速で開く方法を紹介します。手順は次の2つです。

    1. 上書きしたいファイルを右クリック
    2. 「(Mac)Reveal in Finder」「(Windows)Show in Explorer」 をクリック

    すると、そのファイルが格納されたフォルダが開きます。

    【失敗しない】Unityで画像を差し替える方法_6

    画像ファイルを上書きしたいときに重宝するテクニック です。画像差し替え作業の効率が上がるためぜひ覚えて起きましょう。

    Unity初心者が知っておくべきUnity操作をまとめました。Projectウィンドウの他にも知っておくべきウィンドウはたくさんあります。次の記事で 優先度順に詳しく解説していますのでぜひ読んでみてください。

    失敗しないUnityで画像を差し替える方法のまとめ

    Unity初心者向けに画像の差し替え方法を紹介してきました。簡単にまとめるとこんな感じです。

    Unity画像を差し替える方法まとめ

    ①画像の差し替えはUnityの外でおこなう

    ②UnityのProjectウィンドウ内で上書きはできない

    ③ファイルを右クリックして「Reveal in Finder」または「Show in Explorer」で爆速オープン

    画像差し替えは 日常的に発生する作業 です。Unityの仕事を始めるとUnityに慣れるための簡単な作業として画像差し替えをお願いされることがあります。だからこそ、確実に素早く終わらせたいですよね。ただし、本記事で紹介したとおり、 簡単とはいえ正しい画像の差し替え方法を知らないと落とし穴にハマるので注意しましょう。

    「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
    ぜひチャンネル登録をお願いします!

    最後まで読んでいただきありがとうございました!
    すばらしいUnityライフをお過ごしください。

    オススメ記事