【Unity基礎8】スクリプトを使って特定の画像を表示させる方法

Unity基礎

ゲームではエネミーのエンカウントをはじめ、特定のタイミングである画像を表示させるといった処理が必要になる場合が多々あります。そこで今回はスクリプトを使って特定の画像を表示させる方法について説明します。

準備

 

イメージ

今回はエネミーとエンカウントした時、指定したエネミーを表示させる処理を想定します。実際にはエンカウントに関する確率処理等が必要になりますが、今回は簡単のため、下図のように「スライム」ボタン、「ゴブリン」ボタンおよび「ドラゴン」ボタンを用意し、ボタンを押した時にそのボタンに対応するエネミーを表示させることとします。

各オブジェクトの配置

イメージが掴めたところで、実際にボタンオブジェクトとイメージオブジェクトを配置してみましょう。詳細は省略しますが、私は以下のようにボタンとイメージを配置しました。

各オブジェクトの名前と役割
EnemyImage:ボタンが押された時にそれに対応する画像を表示させる
SlimeButton:スライムを表示させるためのボタン
GoblinButton:ゴブリンを表示させるためのボタン
DragonButton:ドラゴンを表示させるためのボタン

 

スクリプトを使って特定の画像を表示させる方法

 

必要な準備が整ったので、続いてスクリプトを使って特定の画像を表示させる方法について説明していきます。

STEP1:画像の用意

先ずは表示させるエネミーの画像を用意します。今回は下記サイト様の無料素材を使用させていただきます。

素材提供元:ぴぽや倉庫様
URL:https://pipoya.net/sozai/
使用させて頂いた素材:ポップモンスター46セット
URL:https://pipoya.net/sozai/assets/enemyillust/enemy-image/

素材がダウンロードできたら下図を参考にプロジェクトウィンドウのAssetsフォルダ直下にResourcesフォルダを作り、さらにその直下にImageフォルダを作って画像をドラッグ&ドロップします。

Imageを作るかはお好みに任せますが、使用する画像の保存先はResourcessフォルダの内部にしてください。今回ご紹介する方法ではResourcesフォルダ内に画像があることが重要です。

STEP2:画像表示処理を実装するためのスクリプト作成する

次に画像表示処理を実装するためのスクリプト作成します。今回は下図のようにButtonControllerという名前でスクリプトを作成しました。

STEP3:操作対象とするオブジェクトをスクリプトに認識させる

続いて操作対象とするオブジェクトを先ほど作成したスクリプトに認識させます。ここで言う操作対象とは今回の例ではエネミーの画像を表示するEnemyImageオブジェクトです。これによりEnemyImageオブジェクトを上で作成したスクリプトButtonControllerを使って操作できるようになります。具体的な方法は前回のUnity基礎7にてご紹介した方法を使いますので、必要に応じてご参照ください。

【Unity基礎7】オブジェクトから別オブジェクトを操作する方法〜SerializedField〜
ゲーム製作の際、あるオブジェクトから別のオブジェクトを操作したい場面は多々発生します。この記事ではその方法の一つについて説明します。

実際のスクリプトを示すと下記となります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//Image型を扱うために導入
public class ButtonController : MonoBehaviour
{
    [SerializeField] Image EnemyImage = null;//エネミー画像を表示させるImageオブジェクトとの連携のために導入
}

上記スクリプトに関しての説明は下記の通りです。

4行目:Image型を使用するために導入が必要。(Imageオブジェクトを操作するために必要)
7行目:ButtonControllerクラスに、エネミー画像を表示させるImageオブジェクトを認識させるための構文。「EnemyImage」と記述した部分は任意の名前でOK。
Unity基礎7でも同様の説明をしましたが、この状態ではまだ、EnemyImageというものが何を指すのかはUnityは認識できていません。ですが、[SerializedFiled]を上記スクリプトのように記述することで、オブジェクトのドラッグ&ドロップを使って容易に変数EnemyImageとエネミー画像を表示させるImageオブジェクトを連携させることがきます。

STEP4:スクリプトをオブジェクトへアタッチする

上記STEP3で記述したスクリプトではまだ処理としては未完成ですが、説明のため、先ずは作成したスクリプトをボタンオブジェクトにアタッチします。今回のオブジェクトにアタッチするButtonControllerスクリプトは3つのボタンそれぞれがクリックされた時の操作をまとめて記述したいので、アタッチ先のオブジェクトとして空オブジェクトを作成し、その名前をButtonControllerObjectとしました。そしてこのButtonControllerObjectにButtonControllerスクリプトをアタッチします。(下図参照)

STEP5:スクリプトに操作したいオブジェクトを認識させる

STEP4でButtonControllerObjectにスクリプトをアタッチすると下図のように、インスペクターウィンドウ上でEnemyImageという箱ができます。そこにエネミー画像を表示させたいImageブジェクトをドラッグ&ドロップします。

この作業により、先ほどスクリプトで宣言した変数EnemyImageとエネミー画像を表示させるImageオブジェクトが結びつきます。結果として変数EnemyImageをスクリプトで操作することにより、そのImageオブジェクトに表示させる画像を操作できるというわけです。

STEP6:スクリプトを編集し、表示処理を実装する

操作対象となるオブジェクトをスクリプトが認識できたので、続いて実際に操作したい内容をスクリプトに記述します。今回は下記のような内容となります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//Image型を扱うために導入
public class ButtonController : MonoBehaviour
{
    [SerializeField] Image EnemyImage = null;//エネミー画像を表示させるImageオブジェクトとの連携のために導入
    //「スライム」ボタンが押された時の動作。Imageオブジェクトにスライムの画像を表示させる
    public void ClickSlimeButton()
    {
        //Assets直下のResourcesフォルダ直下にあるImage/pipo-enemy009と言うパスで表されるファイルを、変数EnemyImageと結び付けられたオブジェクトに表示させる処理。.pngなどの拡張子は不要
        EnemyImage.sprite = Resources.Load<Sprite>("Image/pipo-enemy009");
    }
    //「ゴブリン」ボタンが押された時の動作。Imageオブジェクトにゴブリンの画像を表示させる
    public void ClickGoblinButton()
    {
        //Assets直下のResourcesフォルダ直下にあるImage/pipo-enemy011と言うパスで表されるファイルを、変数EnemyImageと結び付けられたオブジェクトに表示させる処理。.pngなどの拡張子は不要
        EnemyImage.sprite = Resources.Load<Sprite>("Image/pipo-enemy011");
    }
    //「ドラゴン」ボタンが押された時の動作。Imageオブジェクトにドラゴンの画像を表示させる
    public void ClickDragonButton()
    {
        //Assets直下のResourcesフォルダ直下にあるImage/pipo-enemy021と言うパスで表されるファイルを、変数EnemyImageと結び付けられたオブジェクトに表示させる処理。.pngなどの拡張子は不要
        EnemyImage.sprite = Resources.Load<Sprite>("Image/pipo-enemy021");
    }
}

上記スクリプトに関しての説明は下記の通りです。ただし、4,7行目は前述と変わりありませんので、説明は省略しています。また、14行目~25行目も8行目~13行目とほぼ同様の内容ですのでそちらについても省略します。

8行目~13行目:「スライム」ボタンが押された時の動作。Imageオブジェクトにスライムの画像を表示させるメソッド
12行目:Assets直下のResourcesフォルダ直下にあるImage/pipo-enemy009と言うパスで表されるファイルを、変数EnemyImageと結び付けられたオブジェクトに表示させる処理。.
上記12行目で記述しているパスは下図のようにプロジェクトウィンドウで画像を選択した状態で右クリックを押し、CopyPathをすることで容易にコピーできます。ただし、スクリプトで記述する際は「Assts/Resources/」部分および拡張子である「.png」部分は不要です。

実際にゲームを制作する場合、私はSTEP3と一緒にSTEP6を行うことが多いです。今回は説明をわかりやすくする目的であえてステップを分けましたが、実際のゲーム制作の際は皆さんもお好みに合わせてください。

STEP7:ボタンオブジェクトのクリック時動作を設定する

最後にボタンクリック時の動作をボタンオブジェクトに認識させます。説明の重複を避けるため、ここでは「スライム」ボタンをクリックした時の動作設定のみ説明します。設定を行うには具体的には下図のように「スライム」ボタンオブジェクトのOnClick()に先に実装したClickSlimeButtonメソッドを設定します。他のボタンについても同様です。

ボタンクリック時の動作実装方法については「Unity基礎3」の「6.ボタンクリック時の機能実装」で詳しく説明していますので、必要に応じてご参照ください。

機能テスト

 

ここまでできたらPlayボタンを押してゲームを起動させ、処理が想定どおりに行われているか確認しましょう。実際に起動させてみた結果、下図のようにクリックしたボタンに応じてImageオブジェクトに表示されるエネミーの画像が変更されました。

今回はスクリプトを使って特定の画像を表示させる方法について説明しましたがいかがだったでしょうか。今回は押されたボタンに応じて表示させる画像を変更させる処理でしたが、エンカウント処理結果に応じたエネミーを表示させたり、選択されたマップの画像を表示させたりとゲーム制作では様々な場面で利用できる内容だと思います。ぜひ皆さんのゲーム制作でも参考にしていただければと思います。

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity基礎
ソフィーのUnity講座

コメント