Unity 6で2Dイラストをクリックしてイベントハンドラを実行する方法

2026年6月19日

Unityで2Dゲームやノベル風の画面を作っていると、「画面上のイラストをクリックしたら処理を実行したい」という場面があります。

この記事では、Unity 6で2Dイラストをクリックし、イベントハンドラを実行するシンプルな方法を紹介します。クリック対象のイラストは、Tilemapではなく個別のSprite GameObjectとして配置する前提です。

1. 作るもの
2. OnMouseDown()ではなくIPointerClickHandlerを使う
3. 1. 2Dイラストをシーンに配置する
4. 2. Collider 2Dを追加する
5. 3. CameraにPhysics 2D Raycasterを追加する
6. 4. EventSystemを用意する
7. 5. クリック処理用のスクリプトを作る
8. 6. スクリプトをイラストにアタッチする
9. 7. イベントハンドラを作る
10. 8. Inspectorでイベントを登録する
11. 動かないときの確認ポイント
12. Tilemapではなく別Spriteにする理由
13. まとめ

作るもの

今回は、2Dイラストをクリックするとイベントハンドラが実行され、Consoleにメッセージを表示する仕組みを作ります。

キャラクターをクリックして会話を始める
アイテムをクリックして取得する
看板やドアをクリックして調べる
イラストをクリックしてシーンを切り替える

OnMouseDown()ではなくIPointerClickHandlerを使う

古いUnityのチュートリアルでは、クリック処理にOnMouseDown()を使う例がよくあります。

OnMouseDown()はUnity 6でも動作しますが、Legacy扱いです。そのため、Unity 6向けに新しく実装する場合は、EventSystemとIPointerClickHandlerを使う方法がおすすめです。

1. 2Dイラストをシーンに配置する

クリック対象にしたい画像をUnityにインポートします。

操作：画像ファイルをAssetsフォルダに入れ、InspectorでTexture TypeがSprite (2D and UI)になっていることを確認します。

その後、画像をSceneビューにドラッグすると、Sprite Rendererを持つGameObjectとして配置できます。

2. Collider 2Dを追加する

クリック判定には、対象オブジェクトにCollider 2Dが必要です。

操作：クリック対象のGameObjectを選択し、InspectorでAdd Componentを押して、Box Collider 2Dを追加します。

画像の形に合わせて当たり判定を調整したい場合は、SizeやOffsetを変更します。丸いイラストならCircle Collider 2D、複雑な形ならPolygon Collider 2Dを使っても構いません。

3. CameraにPhysics 2D Raycasterを追加する

IPointerClickHandlerで2Dオブジェクトをクリック判定するには、CameraにPhysics 2D Raycasterが必要です。

操作：Main Cameraを選択し、InspectorでAdd Componentを押して、Physics 2D Raycasterを追加します。

これにより、マウスやタップ位置から2D物理判定へのRaycastが行われるようになります。

4. EventSystemを用意する

シーンにEventSystemが必要です。

操作：HierarchyにEventSystemがない場合は、UnityメニューからGameObject → UI → Event Systemを選びます。

Unity 6でInput Systemを使っている場合は、EventSystemにInput System UI Input Moduleが設定されていることを確認してください。古いInput Managerを使う場合は、Standalone Input Moduleでも動作します。

5. クリック処理用のスクリプトを作る

Assetsフォルダ内でC#スクリプトを作成し、名前をClickableIllustrationにします。

スクリプト例：

using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;

public class ClickableIllustration : MonoBehaviour, IPointerClickHandler
{
    [SerializeField]
    private UnityEvent onClicked;

    public void OnPointerClick(PointerEventData eventData)
    {
        onClicked?.Invoke();
    }
}

IPointerClickHandlerを実装すると、オブジェクトがクリックされたときにOnPointerClick()が呼ばれます。

UnityEventを使っているため、クリック時に実行する処理はInspectorから設定できます。

6. スクリプトをイラストにアタッチする

作成したClickableIllustrationスクリプトを、クリック対象の2Dイラストにアタッチします。

対象オブジェクトには、最終的に次のコンポーネントが付いていればOKです。

Sprite Renderer
Box Collider 2D
Clickable Illustration

7. イベントハンドラを作る

クリックされたときに実行する処理を別スクリプトに用意します。

スクリプト例：

using UnityEngine;

public class IllustrationEventReceiver : MonoBehaviour
{
    public void ShowMessage()
    {
        Debug.Log("2Dイラストがクリックされました！");
    }
}

このスクリプトを任意のGameObjectにアタッチします。たとえば、空のGameObjectを作成してEventReceiverという名前にし、そこにIllustrationEventReceiverを付けます。