はじめに
Unityを使った2Dゲーム制作で、クリック操作によって画像(スプライト)を切り替える仕組みを作りたい方におすすめの記事です。この記事では、色違いの2つの画像(PNGファイル)を使って、マウスクリックでスプライトを切り替えるシンプルなスクリプトを作る手順を解説します。
この方法は、ボタンを使った操作やキャラクターの見た目を変える仕組みにも応用できます! 初心者の方でもわかりやすいように、ひとつひとつ丁寧に説明していきますね。
Unityを触ったことがないという方はコチラの記事から見てみてください!
完成イメージ
- ゲームシーンに画像Aが表示されます。
- クリックすると画像Bに切り替わります。
手順
1. 必要な画像(PNGファイル)を用意する
まず、色違いのPNGファイルを2つ用意してください(例: red.png と blue.png)。
- Unityにインポートします。
Unityのプロジェクトウィンドウに画像ファイルをドラッグ&ドロップすればOKです。 - インポートした画像を選択し、インスペクターで
TextureType
を Sprite(2D and UI) に設定して「Apply」ボタンを押します。 - この記事では、こちらのサイトの画像を使用させていただきました。
2. スプライトをヒエラルキーに配置する
- 画像A(初期表示させたい画像)をヒエラルキーにドラッグ&ドロップして配置します。
- 同じように画像Bもヒエラルキーに配置してください。
- Prefab化:
- プロジェクトビューで新しいフォルダを作成し、名前を「Prefab」とします。
- ヒエラルキーに配置した画像Aと画像Bを、それぞれフォルダ内にドラッグしてPrefab化します。

ポイント: 初期表示で使う画像Aを残し、画像Bはヒエラルキーから削除します。これで、ゲーム開始時には画像Aだけが表示されます。
3. スクリプトを作成する
- プロジェクトウィンドウで右クリック → 「Create」→「C# Script」を選択。
- スクリプトの名前を ChangeSprite としてください。
- スクリプトを開き、以下のコードを記述します。
1. 変数の宣言部分
public SpriteRenderer gazou1; // 現在のスプライト
public SpriteRenderer gazou2; // 差し替えるスプライト
SpriteRenderer
Unityのオブジェクトに画像(スプライト)を表示するための仕組みです。gazou1
は、今表示しているスプライトを操作するための変数です。gazou2
は、新しく切り替えたいスプライトを指定する変数です。
2. Start
メソッド
void Start()
{
gazou1 = GetComponent<SpriteRenderer>();
}
Start
メソッド
ゲームが始まった瞬間(シーンがロードされたとき)に一度だけ実行される部分です。GetComponent<SpriteRenderer>()
このスクリプトがアタッチされているゲームオブジェクトについている「SpriteRenderer
コンポーネント」を取得して、gazou1
に代入しています。- これで、現在のスプライトを操作できるようになります!
3. Update
メソッド
void Update()
{
if (Input.GetMouseButtonDown(0)) // マウス左クリック
{
gazou1.sprite = gazou2.sprite; // スプライトを切り替え
}
}
Update
メソッド
毎フレーム(1秒間に何十回も)実行される処理をここに書きます。Input.GetMouseButtonDown(0)
マウスの左ボタンが押された瞬間をチェックします。gazou1.sprite = gazou2.sprite;
押されたら、gazou1
(現在表示されているスプライト)の画像を、gazou2
の画像に切り替えています。
全体の動き
- スクリプトがアタッチされているオブジェクトが持つスプライト(
gazou1
)を取得。 - プレイヤーがマウス左クリックをしたら、現在のスプライト(
gazou1.sprite
)を、新しいスプライト(gazou2.sprite
)に変更する。 - 見た目が切り替わったように見える!
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ChangeSprite : MonoBehaviour
{
public SpriteRenderer gazou1; // 現在のスプライト
public SpriteRenderer gazou2; // 差し替えるスプライト
void Start()
{
gazou1 = GetComponent<SpriteRenderer>();
}
void Update()
{
if (Input.GetMouseButtonDown(0)) // マウス左クリック
{
gazou1.sprite = gazou2.sprite; // スプライトを切り替え
}
}
}
4. スクリプトをオブジェクトに追加する
- ヒエラルキーで、画像A(初期表示するオブジェクト)を選択します。
- スクリプトをドラッグ&ドロップして、オブジェクトに追加します。
差し替えたいスプライトを設定
- ヒエラルキーにPrefabフォルダ内の画像Bを再びドラッグして一時的に配置します。
- 画像Bをスクリプトの「gazou2」フィールドにドラッグ&ドロップして設定します。
- 画像Bは再度削除してOKです。

5. 動作確認
ゲームを実行(再生ボタンをクリック)してみましょう。
画面上に画像Aが表示されている状態で、マウス左クリックすると、画像Bに切り替わるはずです!
まとめ
今回は、Unityでクリック操作によってスプライトを切り替える仕組みを作りました。この仕組みを応用すれば、キャラクターの見た目を変えたり、ゲーム内でアイテムを表示したりすることができます。
ぜひ、いろいろな場面で活用してみてください!
よくある質問(Q&A)
- Qスプライトが切り替わらない場合はどうすればいいですか?
- A
- 画像のインポート設定: TextureTypeが「Sprite(2D and UI)」になっているか確認してください。
- スクリプトの設定: スクリプトの
gazou2
フィールドに正しいPrefabが設定されているかチェックしましょう。
- Q他のキーで切り替えたい場合は?
- A
スクリプトの
Input.GetMouseButtonDown(0)
を以下のように変更します。
例: スペースキーの場合if (Input.GetKeyDown(KeyCode.Space))
{
gazou1.sprite = gazou2.sprite;
}
- Q切り替えた後、また元に戻したい場合は?
- A
スクリプトを少し変更して、クリックのたびに画像を交互に切り替えるようにできます。必要であれば、さらに詳細をお伝えしますのでコメントしてください!
アセットストアでさらにクオリティアップ!
Unityのアセットストアでは、プロのデザイナーが作った高品質なキャラクター素材やエフェクトが豊富にそろっています。今回の方法を使えば、アセットストアのスプライトを簡単に切り替えることが可能です!
- キャラクターの服装を変えるシステム: 複数の衣装データをアセットストアで購入して、クリックで切り替える仕組みを作成。
- 高品質な背景やエフェクト素材: ゲームのクオリティを一気にアップさせる豪華な背景やアニメーションエフェクトも利用できます。
おすすめアセット
「Super Mega Pack Effect Sprite Sheet」は、ゲームやアプリに多彩なエフェクトを追加できる便利な素材集です。爆発やスラッシュなど、さまざまなアニメーションが含まれており、プロジェクトの魅力を高めるのに役立ちます。
「2D ULTIMATE BUNDLE」は、ゲームやアプリに使える多彩な2Dキャラクターをまとめた便利なセットです。このバンドルを使えば、さまざまなキャラクターを簡単にプロジェクトに取り入れることができます。
これらを組み合わせれば、短時間で魅力的なゲームが完成します!