1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Unity
  6. »
  7. 【Unity】Addressableを使って画像をスクリプトから表示する方法

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。
私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。
まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

さて、Unityでゲーム開発をしていると、画像をスクリプトで読み込んだり、切り替えたりしたいときがあります。
そんなときは、「Addressable Assets System」を使ってみましょう。

今回はAddressable Assets Systemを使って、画像などのアセットを読み込む方法、そしてPCやMac、AndroidiPhoneなど用にビルドしたとき、うまく読み込まれない場合の対処法を紹介します。

目次
  1. Addressableパッケージのインストール
  2. アセットをUnityに読み込む
  3. Addressableを使うための設定
  4. 画像を表示するためのパネル(Panel)を追加
  5. スクリプトから画像を読み込む
  6. ビルドすると画像が表示されない現象の解決方法
  7. まとめ

Addressableパッケージのインストール

Addressable Assets Systemを使うには、「Addressables」というパッケージをインストールする必要があります。

ではまず、パッケージマネージャを開きましょう。
パッケージマネージャを開くには、「ウィンドウ(Window)」→「パッケージマネージャー(Package Manager)」をクリックします。

「パッケージ: プロジェクト内(Packages: In Project)」をクリックして、「Unity レジストリ(Unity Registry)」を選択します。

「Addressables」で検索します。

Addressablesが見つかったら、「インストール(Install)」をクリックします。

インストールが完了したら、パッケージマネージャは閉じてしまっても構いません。

アセットをUnityに読み込む

続いて、アセット(今回は画像)をUnityに読み込みます。
まずは画像を入れておくためのフォルダを作成しましょう。

Projectの「Assets」を選択します。

下の画像のように「+」をクリックし、「フォルダー(Folder)」を選びます。

フォルダ名は「Images」にしました。

作成したImagesフォルダをダブルクリックして開いたあと、使いたい画像をProjectにドラッグ&ドロップします。

これでUnityに画像を読み込むことができました。

Addressableを使うための設定

画像を、Addressable Assets Systemで扱うには、Unity上での設定が必要になります。

まず、さきほど読み込んだ画像を選択します。
するとインスペクター(Inspector)にさまざまな情報が表示されます。

「Addressable」にチェックを入れます。するとその画像までのパスが表示されます。

また、下の画像のように警告が表示される場合がありますが、Addressable Assets Systemの使い方とはちょっと違う話になってしまうので、今回は気にせずに進めていきます。

画像を表示するためのパネル(Panel)を追加

まず、画像を表示するために、今回はパネル(Panel)を作成しておきます。

ヒエラルキー(Hierarchy)の「+」をクリックし、「UI」→「パネル(Panel)」を選択します。

作ったパネル(Panel)の名前は「EventCG」にしました。Canvas、EventSystemは自動的に作成されます。

Canvasを選択すると、インスペクター(Inspector)にさまざまな情報が表示されます。

レンダーモード(Render Mode)を「スクリーンスペース – カメラ(Screen Space – Camera)」に、
レンダーカメラ(Render Camera)を「Main carera(Camera)」に、
UI Scale Mode(UI スケールモード)を「Scale With Screen Size(画面サイズに拡大)」に変更します。

スクリプトから画像を読み込む

続いて、スクリプトから画像を読み込みましょう。
まず、Assetsに「Scripts」フォルダーを作成します。

Scriptsフォルダをダブルクリックして開き、「+」をクリックして、「C# スクリプト(C# Script)」を選択します。

ファイル名は「EventCGManager」としました。

作成したEventCGManagerは、ヒエラルキー(Hierarchy)のEventCGにドラッグ&ドロップします。

EventCGManagerをダブルクリックし、エディタを開いたら、コードを以下のようにします。

using System.Collections;   //削除
using System.Collections.Generic;  //削除
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.AddressableAssets;

public class EventCGManager : MonoBehaviour
{
    Image _eventCG;
    // Start is called before the first frame update
    void Start()
    {
        Addressables.LoadAssetAsync<Sprite>( "Assets/Images/elena.jpg" ).Completed += sprite =>
        {
            _eventCG = GetComponent<Image>();
            _eventCG.sprite = Instantiate( sprite.Result );
        };
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

あとはEventCGのインスペクター(Inspector)でお好みの設定をし、再生ボタンをクリックします。
これで、とりあえずUnity上の画面には、画像を表示することができます。

ビルドすると画像が表示されない現象の解決方法

さて、これでUnity上で画像が表示されるようになったのですが、実はこの状態で、PCやMac、AndroidiPhoneなど用にビルドすると、画像が表示されません。
というのもAddressables Asset Systemでは、アプリをビルドする前に、コンテンツを手動でビルドしなければならないのです。

では、「ウィンドウ(Window)」→「アセット管理(Asset Management)」→「Addressables」→「グループ(Groups)」を開きます。

さらに「Build」→「New Build」→「Default Build Script」をクリックします。

もしUnsaved Scenesというアラートが表示されたら、「Save and Continue」をクリックします。

これで、ゲームをビルドして動かしたときも、画像がちゃんと読み込まれるようになります。

まとめ

Unityでのゲームを開発で、画像などのアセットをスクリプトから読み込みたいと思ったときは、Addressable Assets Systemを使ってみましょう。
しかし、コンテンツを手動でビルドしないと、PC、Macスマホ用などにビルドしたときにうまく読み込まれませんので、注意が必要です。

そんなわけで、今回はAddressable Assets Systemの使い方を紹介しました。
参考になれば幸いです。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

さて、今日《きょう》も楽《たの》しくプログラミングを学《まな》んでいきましょう。 今回《こんかい》はPython《パイソン》のtkinterを使《つか》って、本格的《ほんかくてき》なおみくじゲ

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げ

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利にする方

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

MacにPythonをインストールしてみよう!小学生からのPython入門

さて、今回《こんかい》もプログラミングを学んでいきましょう! 前回はWindows《ウィンドウズ》にPython《パイソン》をインストールする方法《ほうほう》を紹介《しょうかい》しました。今回

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。