Unity 2Dでパズルゲームを作りたい。
でも、どこから手をつけていいか分からない。
クリック判定や座標計算で、つまずいてしまう。
Unity 2Dなら、Sprite RendererとOnMouseDownを使えば、パズルゲームを簡単に実装できます。
この記事では、スプライトの配置からクリック判定、完成判定まで、実装の流れを解説していきます。
- Sprite RendererとOnMouseDownを使ったクリック判定の実装
- パズルピースのPrefab化とGrid Layout Groupでの自動配置
- Transform.positionを使ったピースの移動処理
- 配列チェックによる完成判定の実装
- 座標系の扱いとRaycastの活用方法、デバッグ時のLog出力ポイント
＼パズルの次は！頭を使うゲームを自分で作ってみよう／
最初の1本目に最適
Unity タワーディフェンス
ゲームの作り方講座
敵の侵攻を防ぐ配置戦略がパズル脳に直結！全10回のコンパクトな構成で、初心者でもゲーム開発の全体像をつかめます。
スマホアプリを作りたい方へ
Unity 放置インフレ型
クリッカーゲームの作り方講座
数値が積み上がる快感はパズル好きに刺さる！スマホ対応・リリースレベルの放置系クリッカーを全12回で完成させられます。
思考系ゲームに挑戦
Unity ノンフィールドRPG
＋スレスパ風JRPG講座
カードを選んで戦略を組み立てるデッキ構築はパズル脳との相性抜群。Unity6対応・スマホ化対応の最新カリキュラムで挑戦できます。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
Unity 2Dパズルゲームの基本構造
Unity 2Dのパズルゲームは、3つの要素で構成されています。
スプライトを配置してピースを作る処理、クリックでピースを選択・移動させる処理、全ピースが正しい位置にあるかを判定する処理。
これらの要素が組み合わさることで、ゲームとして成立するんです。
まずは、それぞれの要素がどのような役割を担っているか、理解しておきましょう。
| 要素 | 役割 | 実装方法 |
|---|---|---|
| スプライト配置 | 2D画像を使ってピースを作成 | Sprite Rendererコンポーネント |
| クリック判定 | マウスクリックでピースを選択 | OnMouseDownイベント |
| 移動処理 | ピースを目標位置に移動 | Transform.positionの変更 |
| 完成判定 | 全ピースが正しい位置にあるかチェック | 配列の比較チェック |
この4つの要素を順番に実装していけば、パズルゲームが完成します。
それぞれの実装方法を、詳しく見ていきましょう。
スプライトの準備とPrefab化
パズルのピースは、Sprite Rendererコンポーネントを使って表示します。
まずは、ピース用の画像をスプライトとしてインポート。
その後、GameObjectにSprite Rendererを追加して、ピースの見た目を設定します。
複数のピースを作る場合、最初に1つのピースを作ってPrefab化しておくと便利。
Prefab化しておけば、同じピースを何度でも使い回せます。
- 同じピースを簡単に複製できる
- 1つのPrefabを修正すれば、全てのピースに反映される
- コードからInstantiateで生成しやすい
Prefab化が完了したら、次のステップに進みましょう。
Grid Layout Groupで自動配置する
パズルのピースを規則正しく配置したい時、Grid Layout Groupが便利。
Grid Layout Groupは、UI要素を自動的にグリッド状に配置してくれるコンポーネント。
Canvas内に空のGameObjectを作り、Grid Layout Groupを追加。
Cell SizeやSpacingを調整すれば、ピース同士の間隔を自由に設定できます。
ここで注意すべきポイントは、Grid Layout GroupはUI要素（RectTransform）にのみ使用できること。
通常のGameObject（Transform）には使えないので、UIシステムを使うか、自分で配置スクリプトを書く必要があります。
配置方法を決めたら、クリック判定の実装に進みます。
OnMouseDownでクリック判定を実装する
ピースをクリックした時に反応させるには、OnMouseDownメソッドを使います。
OnMouseDownは、マウスボタンが押された瞬間に自動的に呼び出されるイベント。
スクリプトにOnMouseDownメソッドを定義すれば、クリック時に処理を実行できます。
ただし、OnMouseDownを使うには、オブジェクトにColliderコンポーネントが必要。
Colliderがないと、クリック判定が効きません。
まずは、基本的なクリック判定のコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
using UnityEngine; public class PuzzlePiece : MonoBehaviour { private bool isSelected = false; void OnMouseDown() { isSelected = !isSelected; Debug.Log("ピースがクリックされました"); if (isSelected) { // 選択時の処理 GetComponent<SpriteRenderer>().color = Color.yellow; } else { // 選択解除時の処理 GetComponent<SpriteRenderer>().color = Color.white; } } } |
OnMouseDownメソッドは、void型で定義するのが基本。
引数は不要で、クリック時に自動的に呼び出されます。
このコードでは、クリックのたびに選択状態を切り替え、色を変更しています。
実際のパズルゲームでは、選択されたピースを移動させる処理を追加します。
Transform.positionでピースを移動させる
ピースを移動させるには、Transform.positionを変更します。
Transform.positionは、オブジェクトの3D座標を表すVector3型のプロパティ。
この値を直接変更すれば、オブジェクトの位置を変えられます。
2Dゲームでも、Z座標を0に固定すれば問題なく動作します。
クリックされたピースを、目標位置に移動させる処理を実装してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public class PuzzlePiece : MonoBehaviour { public Vector2 targetPosition; // 目標位置 private bool isPlaced = false; void OnMouseDown() { if (isPlaced) return; // すでに配置済みなら処理しない // 目標位置に移動 transform.position = new Vector3(targetPosition.x, targetPosition.y, 0); isPlaced = true; // 配置完了の視覚的フィードバック GetComponent<SpriteRenderer>().color = Color.green; } } |
transform.positionへの直接代入で、即座に位置が変更されます。
アニメーションが必要な場合は、CoroutineやDOTweenなどを使って、徐々に移動させる処理を追加しましょう。
位置が変更されたら、完成判定のチェックも実行します。
完成判定の実装方法
全ピースが正しい位置に配置されたかを判定するには、配列チェックを使います。
各ピースの現在位置と目標位置を比較し、全て一致しているかを確認。
完成判定は、ピースが移動される度に実行するのが一般的。
全てのピースが正しい位置にあれば、パズルクリアの処理を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
public class PuzzleManager : MonoBehaviour { public PuzzlePiece[] pieces; // 全ピースの配列 public void CheckCompletion() { bool allPlaced = true; foreach (PuzzlePiece piece in pieces) { Vector2 currentPos = piece.transform.position; Vector2 targetPos = piece.targetPosition; // 位置が一致しているかチェック（小さな誤差は許容） float distance = Vector2.Distance(currentPos, targetPos); if (distance > 0.1f) { allPlaced = false; break; } } if (allPlaced) { Debug.Log("パズル完成！"); OnPuzzleComplete(); } } void OnPuzzleComplete() { // 完成時の処理（エフェクト表示など） } } |
Vector2.Distanceで2点間の距離を計算し、閾値以内なら配置済みと判断。
完全一致ではなく、少しの誤差を許容することで、判定が安定します。
完成判定が正しく動作すれば、基本的なパズルゲームは完成です。
実装手順の全体像
ここまで説明した内容を、実装手順として整理しましょう。
- STEP1スプライトの準備
パズルピース用の画像をスプライトとしてインポートし、GameObjectにSprite Rendererを追加します。最初の1つを作成したら、Prefab化しておくと便利です。
- STEP2Prefabの作成
ピースのGameObjectをPrefab化し、コードからInstantiateで生成できるようにします。複数のピースを作る際は、このPrefabを使い回します。
- STEP3クリック判定の実装
PuzzlePieceスクリプトを作成し、OnMouseDownメソッドでクリック判定を実装します。オブジェクトにColliderコンポーネントを追加するのを忘れずに。
- STEP4移動処理の実装
Transform.positionを変更して、ピースを目標位置に移動させます。アニメーションが必要な場合は、Coroutineを使って徐々に移動させる処理を追加します。
- STEP5完成判定の実装
PuzzleManagerスクリプトを作成し、全ピースの位置をチェックする完成判定を実装します。ピースが移動される度に、この判定を実行します。
- STEP6動作確認と調整
実際にゲームを動かして、クリック判定や移動処理が正しく動作するか確認します。必要に応じて、パラメータを調整します。
この順番で実装すれば、Unity 2Dのパズルゲームが完成します。
順番を間違えると、後で大幅な修正が必要になるので注意。
座標系の扱いとRaycastの活用
Unityでは、複数の座標系が存在します。
ワールド座標、ローカル座標、スクリーン座標、UI座標など、用途によって使い分ける必要があります。
パズルゲームでは、ワールド座標とスクリーン座標の変換が重要。
マウス位置はスクリーン座標で取得されるため、ワールド座標に変換する必要があります。
Camera.main.ScreenToWorldPointを使えば、変換可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
void Update() { if (Input.GetMouseButtonDown(0)) { Vector3 mousePos = Input.mousePosition; mousePos.z = 10f; // カメラからの距離を設定 Vector3 worldPos = Camera.main.ScreenToWorldPoint(mousePos); // ワールド座標での処理 Debug.Log("ワールド座標: " + worldPos); } } |
OnMouseDownが使えない場合や、より細かい制御が必要な時は、Raycastを使う方法もあります。
Physics2D.Raycastを使えば、2D空間でマウス位置にあるオブジェクトを検出できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
void Update() { if (Input.GetMouseButtonDown(0)) { Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition); Vector2 mousePos2D = new Vector2(mousePos.x, mousePos.y); RaycastHit2D hit = Physics2D.Raycast(mousePos2D, Vector2.zero); if (hit.collider != null) { PuzzlePiece piece = hit.collider.GetComponent<PuzzlePiece>(); if (piece != null) { piece.OnMouseDown(); // クリック処理を実行 } } } } |
Raycastを使えば、OnMouseDownに頼らない実装も可能。
より柔軟な判定ができるので、複雑なパズルゲームでは重宝します。
デバッグ時のLog出力ポイント
パズルゲームの実装中、動作がおかしい時はデバッグが重要。
Debug.Logを使って、重要な情報を出力しましょう。
特に、以下のポイントでLogを出力すると、問題を特定しやすくなります。
| デバッグポイント | 出力する内容 |
|---|---|
| OnMouseDown実行時 | どのピースがクリックされたか |
| 位置変更時 | 移動前後の座標値 |
| 完成判定時 | 各ピースの配置状態 |
| 座標変換時 | 変換前後の座標値 |
デバッグ用のフラグを用意しておけば、本番ビルド時に簡単に無効化できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
public class PuzzlePiece : MonoBehaviour { public bool debugMode = false; void OnMouseDown() { if (debugMode) { Debug.Log("クリック: " + gameObject.name); Debug.Log("現在位置: " + transform.position); Debug.Log("目標位置: " + targetPosition); } // 通常の処理... } } |
デバッグ用のLogを適切に配置すれば、問題の原因を素早く見つけられます。
実装中は、積極的にLogを活用しましょう。
初心者がつまずきやすいポイント
Unity 2Dでパズルゲームを作る際、いくつか注意すべき点があります。
Colliderの設定忘れ
OnMouseDownを使うには、オブジェクトにColliderが必要。
Colliderがないと、クリック判定が一切効きません。
2Dゲームの場合は、BoxCollider2DやCircleCollider2Dを追加しましょう。
座標系の混乱
ワールド座標とスクリーン座標を混同すると、座標計算がずれます。
マウス位置は必ずScreenToWorldPointで変換してから使う。
この変換を忘れると、ピースが意図しない位置に移動してしまいます。
Z軸の扱い
2Dゲームでも、Z軸の値を適切に設定する必要があります。
特に、カメラからの距離（Z値）を正しく設定しないと、ScreenToWorldPointが正しく動作しません。
- Colliderを追加せずにOnMouseDownを使おうとして、クリック判定が効かない
- 座標変換を忘れて、マウス位置とピースの位置がずれる
- Z軸の設定を間違えて、ScreenToWorldPointが正しく動作しない
これらのポイントに注意すれば、スムーズに実装できます。
パズルゲームが好きなら！頭を使うゲームを自分で作る楽しさを体験しよう
パズルゲームが好きな人は、ゲームの仕組みや戦略を考えるのが得意です。その思考力はゲーム開発にそのまま活かせます。配置・戦略・ロジック設計が楽しめる講座を紹介します。
Unity タワーディフェンスゲームの作り方講座【全10回！配置戦略が楽しい初心者最初の1本！】
- 敵の侵攻ルートを読んで砲台を配置する戦略性がパズル脳に直結
- 全10回のコンパクトな構成で初心者でもゲーム開発の全体像をつかめる
- 敵AI・ステージ設計・アイテムショップ・レベルデザインまで習得
- 丁寧な解説とソースコード付きでサクサク進められる
Unity タワーディフェンスゲームの作り方講座は、敵の侵攻を防ぐために砲台をどこに配置するかを考える戦略性がパズル好きの思考回路と直結するジャンルです。
全10回というコンパクトな構成で、敵AI・ステージ設計・アイテムショップ・レベルデザインまで習得できます。「最初の1本目」として最もおすすめできる入門講座です。
パズルを解く感覚でゲームを作る第一歩を踏み出したい人に、自信を持っておすすめできる一本です。
全10回・配置戦略が楽しいタワーディフェンスをゼロから作る
まず1本完成させてゲーム開発の楽しさを体験しよう
→ タワーディフェンスゲームの作り方講座を見てみる
コンパクトな10回で完成！ゲーム開発の全体像を一気につかもう！
Unity 放置インフレ型クリッカーゲームの作り方講座【全12回！スマホアプリとしてリリースできるレベルのゲームを作れる！】
- 数値が積み上がる快感と段階的な要素解放がパズル好きに刺さる
- スマホ対応・リリースレベルのクリッカーゲームを全12回で完成
- ScriptableObjectやInterfaceなど実践で使えるUnity中級スキルも習得
- セーブ・ロード機能・サウンド実装まで本格的な構成
Unity 放置インフレ型クリッカーゲームの作り方講座は、数値が積み上がる快感・段階的な要素の解放・最適化の楽しさがパズルゲームと相性抜群のジャンルです。
単純なカウンターゲームではなく、本格的な放置系クリッカーゲームをスマホ対応でリリースレベルまで作り上げます。講座専用素材付きで、ダウンロードしてすぐに開発をスタートできます。
「自分で作ったアプリをスマホでプレイしたい！」という人の夢を全12回で叶えられる講座です。
スマホ対応・リリースレベルの放置系クリッカーを完成させる
数値が積み上がる快感をゲームで自分の手で作り上げよう
→ クリッカーゲームの作り方講座を見てみる
スマホで動く自分だけのクリッカーゲームを今すぐ作り始めよう！
Unity ノンフィールドRPG＋スレスパ風JRPG講座【Unity6対応！カード戦略×JRPGで思考系ゲームを作れる！】
- カードを選んで戦略を組み立てるデッキ構築がパズル脳と相性抜群
- Unity6対応・スマホ化対応で最新環境のゲーム開発が学べる
- Slay the Spire風のゲームロジック設計を楽しみながら習得
- ノンフィールドRPGとデッキ構築JRPGの2つを合わせて学ぶのがおすすめ
Unity ノンフィールドRPGの作り方講座＋Slay the Spire風デッキ構築JRPGの作り方講座は、手札から最適なカードを選んで戦略を組み立てるデッキ構築システムを実装できる講座です。
「どのカードを引いてどう組み合わせるか」を考える思考プロセスはパズルゲームと同じ脳の使い方。Unity6対応・スマホ化対応の最新カリキュラムで、思考系ゲームの設計を楽しみながら学べます。
タワーディフェンス・クリッカーで開発に慣れたら、次のステップとして挑戦したい一本です。
カード戦略×JRPGで思考系ゲームの設計を学ぶ
トレンドのデッキ構築システムをスマホ向けに実装しよう
→ スレスパ風デッキ構築JRPG講座を見てみる
パズル脳を活かしたゲーム設計で、一歩上のゲーム開発スキルを身につけよう！
まとめ
この記事では、Unity 2Dでパズルゲームを作る方法について解説しました。
- スプライトの準備とPrefab化により、ピースを簡単に複製・管理できる
- OnMouseDownメソッドでクリック判定を実装し、Colliderコンポーネントの追加を忘れない
- Transform.positionを変更することで、ピースを目標位置に移動できる
- 配列チェックによる完成判定で、全ピースの配置状態を確認できる
- 座標系の違いを理解し、ScreenToWorldPointで座標変換を行うことが重要
まずは簡単なパズルから始めて、動作を確認しながら機能を追加していきましょう。
Unity 2Dを使えば、直感的な操作のパズルゲームを効率的に制作できます。
さらに高度な機能に挑戦する時は、専門の教材を活用するのがおすすめです。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
コメント