ども！カトサンラボのかとこうです。
今回の記事では、障害物のトゲを作ろう
ということで、
Unityで2Dアクションゲームを作る際の
定番ギミックである「トゲ」の画像を配置し、
当たり判定を設定する手順について解説していきます！
▼ 動画での解説はこちら（1時間7分16秒くらいから）
1. トゲの画像を配置しよう
まずは、トゲの画像をシーンビューに配置していきましょう。
完成図
トゲを配置する手順
- Projectウィンドウで
Images > thornフォルダを開く - トゲ画像（ドット絵 or イラスト）を選択する
- シーンビューまたはヒエラルキーにドラッグ&ドロップをする
※ ヒエラルキーに追加すると、シーンビューにも自動的に反映されます。
2. 画像の大きさを調整しよう
次はトゲを床に合わせて横長に表示しましょう。
完成図
トゲを横長にするための手順
▶︎ スプライト設定の変更
- Projectウィンドウでトゲ画像を選択する
- インスペクター > Sprite Mode の中の
「Mesh Type」をFull Rectに変更する Applyをクリックして保存する
▶︎ 描画モードの変更
- ヒエラルキーのトゲオブジェクトを選択する
- インスペクターの
Sprite Renderer→「Draw Mode」をTiledに変更する
以上の設定により、トゲ画像を引き伸ばすの
ではなく、タイル状に繰り返して表示できます。
※ 今回は床とバランスを取って、トゲのサイズを
Draw ModeからWidthを120程度に設定します（後で微調整も可能です）
3. トゲの位置を調整して床の中央に配置しよう
次はトゲの位置を調整していきましょう。
完成図
トゲの位置を調整する手順
位置の調整には、Unityの ムーブツール（移動ツール） を使います。
- ムーブツールでトゲを床の中央に配置する
- トゲが床の後ろに表示される場合にはPositionのZを−0.5に変更する
- 必要に応じて、インスペクターの
Transform > Positionで数値の微調整を行う
4. 当たり判定（コライダー）をつけよう
トゲに当たり判定（コライダー）を追加しましょう。
完成図
▶︎ Box Collider 2D の追加手順
- ヒエラルキーのトゲを選択する
- インスペクター下部の
Add Componentをクリックする - 「Box Collider 2D」と検索して出てきた候補から選んでクリックする
▶︎ BoxCollider2Dのサイズを調整する手順
- Box Collider2DのインスペクターのSizeを見る
- SzeのXに120と入力をする
これで、トゲとプレイヤーが衝突した時の
判定ができるようになりました。
トゲの全体に当たり判定がつきました。
5. 当たり判定の範囲を調整しよう
今の状態だと、トゲの一番上まで
当たり判定があるので、見た目上
「トゲに乗れる」
ようになってしまいます。
これを防ぐために、当たり判定の範囲を
下にずらす調整を行いましょう。
完成図
▶︎ コライダー範囲の編集をする手順
- インスペクターの「Box Collider 2D」内にある
Edit Colliderをクリック - シーンビューで、緑の枠をドラッグして下方向に調整する
- 再度
Edit Colliderをクリックして確定する
※このように調整することで、「トゲに触れると刺さる」自然な演出が可能になります。
６、 まとめ
今回は、以下の作業を行いました。
- トゲ画像の配置
- トゲの大きさの調整（タイル状に伸ばす設定）
- トゲの位置の調整
- トゲの当たり判定の追加と編集
これらの手順はUnityの基本的な
作業の流れでもあり、
床や他のオブジェクトにも
応用ができます。
次のステップでは、プレイヤーが
トゲにくっついてしまう不具合の
修正をする予定です。
ここまで読んでいただき
ありがとうございました！
🔧 補足：プレイヤーがトゲに「くっつく」現象について
現時点では、プレイヤーがトゲにぶつかった後に
「くっついたまま動けない」
という状態になることがあります。
この現象の原因と解決方法については、
次の記事で詳しく解説しますね。
▼ 次の記事はこちら
→ 近日アップ予定