【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月の初旬、遅くても７月中旬を予定しています。
お楽しみにお待ちください。

【Godotで作ろう脱衣ブロック崩し】第1回：Godot Engineの下準備

この度は、Godot Engineチュートリアル記事「Godotで作ろう脱衣ブロック崩し」にアクセスいただき、ありがとうございます。
今回は第1回として、Godotそのものの導入手順例と、プロジェクトの初期設定例をご紹介いたします。

はじめに

想定する読者

この記事は、プログラミングの経験が浅いけどゲーム作りに興味があり、Godot Engineを使いたいと思っている方に向けて書いています。
Godot公式ドキュメントの"入門"の項目を併せて読んでいくことをお勧めします。

ご注意

目次の末尾にも書きましたが、私はプログラマーとしての実務経験がないシロウトです。
私が間違っていたり、何かを誤解していたりする可能性は大いにあります。
記事の内容を鵜吞みにせず、それに加えて間違いや改善できる点を見つけたら遠慮なくお知らせください。

このチュートリアルで使用するGodot Engineのバージョンは"4.2.2"です。
また、作業するPCのOSはWindows11を使用しています。

このチュートリアルではスクリプトとしてGDScriptを使用します。
Godot自体はC#を使用してスクリプトを書くこともできますが、それをする必要があるのは別のゲームエンジンから移行を検討している上級者くらいだと思うので、省略します。

1.1：Godot Engineの導入

GodotをPCにインストールしましょう。

1. 最初に、Godot Engineの公式サイトにアクセスし、Godot Engine 4.2.2をダウンロードします。
   ファイル容量は50MB弱とすごく軽いので、すぐに終わると思います。

2. ダウンロードしたzipファイルを、任意のディレクトリに解凍してください。
   ただ、デスクトップやドキュメントなどの場所は避けたほうが無難だと思います。

3. 実行ファイルが2つ作成されますが、そのうちの"Godot_v4.2.2-stable_win64.exe"（PCの設定によっては".exe"が見えないこともあります）がGodotの本体です。
   

   
   利便性のために、ショートカットを作成してわかりやすい場所に置いておきましょう。
   ピン留めしてもいいかもしれません。

1.2：プロジェクトの新規作成および初期設定

1.2.1：プロジェクトの新規作成

1. さっそくGodotを起動すると、このような画面が出ると思います。
   

   
   ダイアログの質問にはキャンセルを選んでください（上図1番の囲い）。
   もし、言語設定を変えたいときは、右上のプルダウンから選択できます。

2. 左上の "新規"ボタンを押してください（上図2番の囲い）。
   そうすると、下図のような画面が出ます。
   

3. プロジェクト名には日本語も使えます。特に理由がない限りゲームのタイトルにしておくといいでしょう（画像1番の囲い）。
   今回は、「脱衣ブロック崩し」と入力しましょう。

4. 画像2番の囲いのボタンを押して、システムの影響を受けない場所にあるフォルダを指定してください。

5. 画像3番の囲いのボタンを押せば、指定したフォルダの中にプロジェクトと同じ名前のフォルダが作成されます。
   これで、下段左の"作成して編集"を押せば、プロジェクトが新規作成されます。

1.2.2：プロジェクトの初期設定

ここから、Godotの用語を使っていくので、わからない単語が出てきたら公式ドキュメントを参照してください。

1. 新規作成ができたら、上の画像のような画面になります。
   左上の"2Dシーン"ボタン（画像1番の囲い）を押すと、空だったシーンにNode2Dというノードがルートとして設定され、中央のプレビューが2D表示に切り替わります。
   表示の切り替えは上段中央から可能です（画像2番の囲い）。

2. "Node2D"ノードを選択してF2キーもしくはダブルクリックで名前を書き替えましょう。
   このノードは"_initial"と名付けておきましょう。

3. こうして作ったノードひとつで構成されたシーンをとりあえず保存します。
   左上の"シーン"　→　"シーンを保存"　を選択します。
   ショートカットキーはCtrl+Sです。
   ファイル名はデフォルトでルートノードと同じ名前の"_initial.tscn"となっているでしょうから、そのまま保存します。

4. 左上のメニューから、"プロジェクト" → "プロジェクト設定"を選ぶと、このような画面が出ます。

1. ”アプリケーション” → "実行"の項目（画像1番の囲い）を選択してください。

1. "メインシーン"という設定項目があるので、さっき保存したシーンを指定します。
   これによって、テストプレイするときにこのシーンから実行が始まります。

2. さらに、ゲーム画面のサイズも設定しましょう。
   "表示" → "ウィンドウ"を選択して、"ビューポートの幅"を1280、"ビューポートの高さ"を960に設定してください。

これで最低限の初期設定は終わりです。
下段中央の"閉じる"ボタンを押して設定画面を閉じましょう。

おわりに：次回予告

第2回では、様々な部品を別々に作って、仮配置するところまで説明するつもりです。
記事は早くて今月下旬、遅くても来月上旬までに公開するつもりです。
お楽しみにお待ちください。

【Godotで作ろう脱衣ブロック崩し】目次

どうも、ばんくろです。
今回の記事は、Godotで脱衣ブロック崩しを作るチュートリアル記事を書くにあたって、まず記事のシリーズ構成を目次として書いておこうという趣旨です。

なお、このチュートリアル記事の名称は、
「Godotで作ろう脱衣ブロック崩し」
といたします。

「Godotで作ろう脱衣ブロック崩し」シリーズ構成

第1回：Godot Engineの下準備をしよう

• 1.1：Godot Engineの導入
• 1.2：プロジェクトの新規作成および初期設定

第2回：壁と天井を作ろう

• 2.1：壁の作成
• 2.2：壁シーンをもとに天井シーンを作る

第3回：ボールを作ろう（準備中）

第4回：パドルを作ろう（準備中）

第5回：ブロックを作って並べよう（準備中）

• 3.1：ブロックの仮作成
• 3.2：ブロックに対するシェーダーの追加
• 3.3：スクリプトによるブロックの配置
• 3.4：不要なブロックを配置しないようにする

第6回：ゲームの進行を作ろう（準備中）

• 4.1：ゲームオーバー・ゲームクリアの処理
• 4.2：ライフ制の導入
• 4.3：複数ステージの実装

第7回：ゲームを出力してみよう（準備中）

• 5.1：エクスポートテンプレートのダウンロード
• 5.2：エクスポート
• 5.3：添付文書の整備

おわりに：ご意見お待ちしております

とりあえず、このような記事構成でいこうかと思っています。
まあ、実際にこのシリーズを書くにあたって、計画より記事が増減したり改題されることは大いにあり得ます。

また、私はプログラマーとしての実務経験がないシロウトですので、ソースコードの書き方や諸々のやり方に間違いがあるかもしれません。
記事の内容を鵜吞みにせず、ミスや改善できる点を見つけた場合は遠慮なくご指摘ください。

では、また。