※この連載の全ての記事は、タグ「ビッグカツ」の検索一覧から探すことができます。
※この連載で作ったゲームは「BigBreakOut（ゲームの作り方の記事付き） | フリーゲーム投稿サイト GodotPlayer」でプレイできます。
昔から人気の駄菓子「ビッグカツ」のフリー素材画像が公開されたので、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 を使って、ビッグカツ画像を使ったブロック崩しを作成します。
「ビッグカツブロック崩し」作成の第４回では、前回作った壁のノード群で、左側の壁を作成するために、画像をタイル状に並べて表示する TextureRect ノードのサイズ・角度・位置の調整を行い、その後、それに合わせて CollisionShape2D ノードの当たり判定領域を設定して、壁にぶつかったら止まる設定を行います。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
前回の記事
前回は、壁を作るために、 StaticBody2D と TextureRect ノードを作成して、タイル状に並べて表示する画像を設定しました。
後半では、以下のように StaticBody2D ノードの下位に追加した CollisionShape2D ノードの当たり判定領域を設定します。
- StaticBody2D (動かない剛体を表現するノード）
- TextureRect（絵をタイル状に並べたりして表示するノード）
- CollisionShape2D（衝突する領域を図形で定義するノード）
CollsionShape2D の衝突判定で使う領域を設定
TextureRect と同様に先ほど WallLeft (StaticBody2D) ノードの下位に追加した CollisionShape2D で、壁の当たり判定領域を設定します。
CollisionShape2D ノードをシーンドックで選択してから、インスペクタードックで Shape プロパティ（最初は空）のリストを開いて「新規 RectangleShape2D」を選択して、四角形を設定できる RectangleShape2D リソースを割り当てます。
ウィンドウ上部中央の 2D ワークスペースを選択すると画像の上に、半透明の水色（ Debug Color プロパティで設定されている色です）の四角形が表示されます。
この四角形が当たり判定領域です。
その周囲のオレンジ色の丸いハンドルをマウスドラッグして画像に合わせて当たり判定の四角形を調整できます。
※当たり判定の調整は、画像を表示する TexutureRect のサイズや角度を調整してから行います。
シーンドックの TextureRect ノード (前回タイル状に画像を表示させたノード) を選択して、2D ワークスペースで、オレンジ色の丸いハンドルをマウスドラッグして、壁のサイズに合わせてサイズを変更します。
※サイズに応じて、画像もタイル状に並べて表示されます。
今回は左側の壁を作るので、 2D ワークスペースの上側のツールボタンから「回転」ツールを選択して、2D ワークスペースでマウスドラッグすることで TextureRect ノードを回転させます。
※回転させないでサイズだけで縦長にすると、画像の一部だけがタイル状に並んで表示されます。
Ctrl キーを押しながらマウスドラッグすると 90 度など区切りの良い一定間隔の角度で回転させられます。
例では時計回りに 90 度回転させました。
「移動」ツールなどを使ってのノードの位置を微調整して、画面内の左側に一部表示されるように調整します。
画面内かどうかは、緑色と赤色の十字の線と、青色の縦と横の線で囲まれている枠線を目安にしてください。
その後、 シーンドックで CollisionShape2D ノードを選択してから、 2D ワークスペースで、画像に合わせて、半透明の水色の四角を、周囲のオレンジ色の丸いハンドルをマウスドラッグして、当たり判定領域を調整します。
以上で、画像を並べて表示して、四角形の当たり判定領域を持った動かない剛体、ブロック崩しの壁の１つを作成しました。
いったん、 Ctrl + S などで新規作成したステージのシーンを保存しましょう。
例では、シーン名は stage にしました。
以下は、作成した壁のサイズと角度を変更して、ブロック崩しの左側の壁を作成する工程の動画です。
前回作成したパドル（バー）と組み合わせる（設定は後の別記事で紹介します）と、きちんと壁にぶつかってパドル（バー）が止まりました。
まとめ
「ビッグカツブロック崩し」作成の第４回では、前回作った壁のノード群で、左側の壁を作成するために、画像をタイル状に並べて表示する TextureRect ノードのサイズ・角度・位置の調整を行い、その後、それに合わせて CollisionShape2D ノードの当たり判定領域を設定して、壁にぶつかったら止まる設定を行いました。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- Xユーザーのビッグカツといか姿フライのすぐる【公式】さん: 「使いどころは思いつきませんが、フリー素材としてどうぞご自由にお使いくださいませ！ https://t.co/8F9q3hS02b」 / X
- StaticBody2D — Godot Engine (4.x)の日本語のドキュメント
- TextureRect — Godot Engine (4.x)の日本語のドキュメント
- CollisionShape2D — Godot Engine (4.x)の日本語のドキュメント
記事一覧 → Compota-Soft-Press
コメント