ゲーム実行中にスプライトの画像を変更する
検証環境
- Windows
-
- Windows 11
- Unity エディター
-
- 2020.3.25f1
- 入力システムパッケージ
-
- 1.2.0
この Tips の前提設定
この Tips の説明の前提として以下の設定を事前に行っています。
スプライトの画像変更について
2D ゲームをプレイしていると分かりますがスプライトとして設定している画像が途中で切り替わる場面をよく見かけると思います。 例えば最初はドアが閉まっていたけど、開ける操作をすることによって開いたドアとして表示されるなどです。
これを実現するには閉じたドアと開いているドアの２つのオブジェクトを用意して表示非表示を切り替えるという方法もありますが、 ここではスプライトの画像を切り替えるという方法を使って実現してみます。
プロジェクトへの画像追加と配置
今回変更前の画像と変更後の画像が必要なので２つ用意してください。
ここではそれぞれ UnityTips, UnityTipsChange というファイル名にしています。
画像変更前のスプライトをプロジェクトからドロップして配置します。 ボタンをクリックしたときに画像を変更させるので UI からボタンを配置しておきます。
画像変更スクリプトの作成
スクリプトを作成します。名前は任意ですがここでは SpriteChange とします。
今回はボタンをクリックしタイミングでスプライトの画像が変わるようにします。 また、変更先のスプライトは事前に設定する形にしますが、 作りを変えれば動的にスプライトを作成して設定することも可能です。 変更の仕方は基本的に同じです。
スクリプトは以下のようにします。
using UnityEngine;
public class SpriteChange : MonoBehaviour
{
<summary>画像を変更するスプライトオブジェクト。</summary>
[SerializeField] private GameObject TargetSprite;
<summary>変更後の画像を持つスプライト。</summary>
[SerializeField] private Sprite NextSprite;
<summary>ボタンをクリックしたときに呼ばれます。</summary>
public void OnClick()
{
if (TargetSprite == null)
{
Debug.Log($"{nameof(TargetSprite)} が null です。");
return;
}
if (NextSprite == null)
{
Debug.Log($"{nameof(NextSprite)} が null です。");
return;
}
// 変更対象のオブジェクトが持つ SpriteRenderer を取得
var spriteRenderer = TargetSprite.GetComponent<SpriteRenderer>();
if (spriteRenderer == null)
{
Debug.Log($"{nameof(TargetSprite)} に {nameof(SpriteRenderer)} コンポーネントがありません。");
return;
}
// SpriteRenderer の sprite に変更後のスプライトをセット
spriteRenderer.sprite = NextSprite;
}
}
フィールドにはスプライト変更対象となるオブジェクトと変更後の画像となるスプライトを用意します。
GameObject にはヒエラルキーから対象のオブジェクトをセットすればいいというのは分かるかと思いますが、
Sprite には何をセットすればいいのかという話になるかもしれません。
これについては、プロジェクトに追加されている画像ファイルの「テクスチャータイプ」がデフォルトで「スプライト (2D と UI)」になっていると思いますので自動的にスプライトとして扱うことができるようになっています。 なので画像ファイルをセットするだけでスプライトとして扱うことができます。
<summary>画像を変更するスプライトオブジェクト。</summary>
[SerializeField] private GameObject TargetSprite;
<summary>変更後の画像を持つスプライト。</summary>
[SerializeField] private Sprite NextSprite;
OnClick メソッドはボタンをクリックしたときに呼ばれる想定としています。メソッド名は任意です。
OnClick メソッドの中で画像の切り替え処理を行っています。
画像情報を持っているのは SpriteRenderer であるため、ゲームオブジェクトから SpriteRenderer コンポーネントを取得します。
SpriteRenderer クラスには sprite プロパティがあり、そこに新しい画像を持っているスプライトをセットすることによって画像を差し替えることができます。
// 変更対象のオブジェクトが持つ SpriteRenderer を取得
var spriteRenderer = TargetSprite.GetComponent<SpriteRenderer>();
// 省略
// SpriteRenderer の sprite に変更後のスプライトをセット
spriteRenderer.sprite = NextSprite;
スクリプトを保存したらオブジェクトにアタッチします。アタッチ対象のオブジェクトは任意ですがここでは EventSystem にアタッチします。
パラメータとして「Target Sprite」と「Next Sprite」があるので「Target Sprite」にはヒエラルキーからスプライトオブジェクト、
「Next Sprite」にはプロジェクトから変更後の画像ファイルをセットします。
ボタンのクリックイベントに EventSystem にアタッチしたスクリプトから OnClick メソッドを指定します。
ゲームを実行してボタンを押してみてください。画像が変更されれば成功です。