Godot4 ビッグカツブロック崩し3 壁用の画像をタイル状に並べて表示する

※この連載の全ての記事は、タグ「ビッグカツ」の検索一覧から探すことができます。
※この連載で作ったゲームは「BigBreakOut（ゲームの作り方の記事付き） | フリーゲーム投稿サイト GodotPlayer」でプレイできます。

昔から人気の駄菓子「ビッグカツ」のフリー素材画像が公開されたので、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 を使って、ビッグカツ画像を使ったブロック崩しを作成します。

使いどころは思いつきませんが、フリー素材としてどうぞご自由にお使いくださいませ！ pic.twitter.com/8F9q3hS02b
— ビッグカツといか姿フライのすぐる【公式】 (@SUGURU_BIGKATSU) December 2, 2024

「ビッグカツブロック崩し」作成の第３回では、ボールを外に出さないための左右と上に配置する壁に表示するビッグカツのフリー素材画像をタイル状に並べて配置できる TextureRect ノードを作成して、その設定を行います。

※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。

前回の記事
ステージシーンの作成
左側の壁のノード群の作成
まとめ
参照サイト Thank You!

前回の記事

前回は、第２回では、「ビッグカツブロック崩し」のパドル（バー）を←→キーで左右に移動させる GD スクリプトを作成して実行して動作をテストしました。

ステージシーンの作成

ブロックや壁、前回作成した左右に動くパドル（バー）を配置するステージというシーンをメニュー「シーン」→「新規シーン」で新規作成します。

Godot4 ビッグカツブロック崩し壁を上右左に配置したステージのシーンの作成１

ルートノードは「2D シーン」を選んだので、そのクラスは Node2D になります。

Godot4 ビッグカツブロック崩し壁を上右左に配置したステージのシーンの作成２

Node2D ルートノードを Stage という名前に変更します。
※名前の変更は右クリックメニュー「名前を変更」などで行います。

Godot4 ビッグカツブロック崩し壁を上右左に配置したステージのシーンの作成３

左側の壁のノード群の作成

左右と上にあるボールを画面外に出さないための壁は、以下のような構成のノード群で実装します。

StaticBody2D (動かない剛体を表現するノード）
- TextureRect（絵をタイル状に並べたりして表示するノード）
- CollisionShape2D（衝突する領域を図形で定義するノード）

今回は、 StaticBody2D を作り、その下位に TextureRect を作って、画像をタイル状に表示する設定までを行います。

壁を作るために、最初に、動かない剛体を表現する StaticBody2D ノードを Stage ルートノードの下位に追加します。
※シーンドックの Stage ルートノードを右クリックして表示されるメニュー「子ノードを追加」で表示されるダイアログで StaticBody2D を選択・作成します。

Godot4 ビッグカツブロック崩し壁を上右左に配置したステージのシーンの作成４

作成した StaticBody2D は WallLeft (左側の壁) という名前に変更します。

その WallLeft ノードにさらに下位のノードとして TextureRect ノードと CollsionShape2D ノードを追加します。
※ WallLeft ノードをシーンドックで右クリックして表示されるメニュー「子ノードを追加」を選択して表示されるダイアログで各クラスを選択して作成します。

Godot4 ビッグカツブロック崩し壁を上右左に配置したステージのシーンの作成5

画像を表示するだけなら Sprite2D で十分ですが、 TextureRect を使うと、サイズに応じて画像を引き延ばしたり、タイル状に並べて表示することができます。

Godot4 ビッグカツブロック崩し壁を上右左に配置したステージのシーンの作成6

作成した TextureRect ノードをシーンドックで選択してから、インスペクタードックの Texture プロパティに、ファイルシステムドックのビッグカツのフリー素材画像をドラッグ＆ドロップして設定します。
※ビッグカツのフリー素材画像は、ファイルシステムドックに画像ファイルをドラッグ＆ドロップしてあらかじめプロジェクトに追加しておきます。