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

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

準備

イメージ

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

各オブジェクトの配置

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

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

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

STEP1：画像の用意

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

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

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

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

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

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

【Unity基礎7】オブジェクトから別オブジェクトを操作する方法〜SerializedField〜

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

wisteria-sophy.com

2021.04.14

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

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

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

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

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

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

STEP4でButtonControllerObjectにスクリプトをアタッチすると下図のように、インスペクターウィンドウ上で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行目とほぼ同様の内容ですのでそちらについても省略します。

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

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

機能テスト

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

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

以上。