【Godotで作ろう脱衣ブロック崩し】第2回：壁と天井を作ろう

このたびは、Godot Engineチュートリアル記事「Godotで作ろう脱衣ブロック崩し」にアクセスいただき、ありがとうございます。
目次はこちらです。
今回は、第2回として壁と天井を作っていきましょう。

はじめに

画像素材の配布

まず、この記事で使用する画像をまとめたものを配布いたします。

この画像セットを利用する際の注意点などは添付のテキストファイルに記載しています。
内容を要約しますと、

• 基本的に改変も商用利用も可能だよ！
• クレジット表記はしてもしなくてもいいけど、うそをつくのはだめだよ！
• 悪いことに使わないでね！

となります。

画像セットを解凍してできたフォルダの中の4つのフォルダを選択して、Godotウィンドウの左下にある「ファイルシステム」ペインにドラッグ＆ドロップすれば、画像をプロジェクトにインポートできます。

2.1：壁の作成

今はおそらく"_initial.tscn"が開いていると思いますが、このシーンに部品を直接追加するのではなく、新しく別のシーンに部品を作って、あとで配置するという手法をとります。

2.1.1：壁となるシーンの新規作成

メニューから"シーン"→"新規シーン"を選択（ショートカットキーはCtrl+N）するか、プレビューのタブ右側の"+"をクリックするかして、シーンを新規作成します。

ルートノードの種類を選ばないといけないので、今度は"その他のノード"を選択してください。

すると、このような画面が表示されます。

今回追加したいノードの種類は"StaticBody2D"という名前なので、上部の検索窓に入力してリストを絞り込むか、自力でツリーを探し回るかしてください。
見つかったらそれを選択して、下段左の"作成"ボタンを押してください。
これでルートノードを作成できます。

2.1.2：子ノードの作成と設定

この時点で警告が出ている通り、このノード単体では機能が発揮できません。
そこで、作成された"StaticBody2D"ノードを選択した後、ノードリストの上部にある"+"を押して、子ノードを作成します。
追加するノードの種類は"CollisionShape2D"です。

これでStaticBody2Dの警告は止まりますが、今度はCollisionShape2Dが警告を出しています。
これを止めるために、当たり判定の形状を指定しましょう。
CollisionShape2Dを選択した状態で視線を画面右側に移して、"インスペクター"から"Shape"という項目を探します。
それが"<空>"になっていると思うので、右側のプルダウンから"新規 RectangleShape2D"を選択します。

プレビューに小さな矩形が表示されるようになると思います。
この矩形の角をドラッグすれば大きさを変えられますが、今はやりません。
（動かしてしまった場合はCtrl+Zで元に戻してください）

インスペクターのShapeに設定したRectangleShape2Dを選択すれば、当たり判定の大きさを指定できる項目が表示されるので、xを40、yを960に設定しましょう。

これで、当たり判定のある縦長の壁を作ることができましたが、このままではゲーム画面で見えません。
見た目を作りましょう。
ノードリストのStaticBody2D（このシーンのルートノード）を選択した状態で"Sprite2D"ノードを作成します。
そうすれば、シーンのノード配置はこうなるはずです。
違っていたら、ノードをドラッグして順番を入れ替えたりできるので、合わせてください。

Sprite2Dノードを選択した状態でインスペクターから"Texture"という項目を設定します。
プルダウンから"読み込む.."を選択してください。
開いたダイアログで、wallフォルダの中のwall.svgというファイルを指定してください。
これで、壁に見た目ができて見えるようになります。

仕上げに、壁同士に当たり判定が発生しないように、コリジョンマスクを設定しましょう。
StaticBody2Dを選択した状態でインスペクターからCollisionの項目グループを開いて、LayerとMaskを設定します。
Layerは3番のみオンにして、Maskは1番と2番の2つのみオンにします。
いちおう、1番はボール、2番はパドル、3番は壁や天井、4番はブロックとして想定しています。

StaticBody2Dの名前をwallに書き替えて、このシーンをwall.tscnという名前でwallフォルダの中に保存してください。
これでブロック崩しの壁ができました。

2.2：壁シーンをもとに天井シーンを作る

続いて、壁シーンのパラメータをいじって天井シーンを作りましょう。
以下に示すように、各設定値を変更してください。

• ルートノードの名前："wall" → "ceiling"
• CollisionShape2Dノードを選択した状態でインスペクターからShape→RectangleShape2D→Size：x:1280, y:40
• Sprite2Dノードを選択した状態でインスペクターからTexture：ceilingフォルダ内のceiling.svgに差し替え

変更が終わったら、メニューの"シーン"→"名前を付けてシーンを保存..."（ショートカットキーはCtrl+Shift+S）でこのシーンを"ceiling.tscn"という名前でceilingフォルダ内に保存してください。

お疲れ様です。今回の記事で解説する作業はここまでです。

おわりに

記事が長すぎてしまうので、当初の予定より記事を細かく分けます。
次回の更新は、早くて7月の初旬、遅くても７月中旬を予定しています。
お楽しみにお待ちください。