Godot2D入門 ~スイカゲームを作ろう~ Part1

この勉強会の目的

この勉強会では、巷で噂のGodotを使ってスイカゲームを作って、Godotの理解を深めることが目的になっている気がします(?)。
(アドベントカレンダーに書くことが思いつかなかったので、この記事を書きました🤪)

Godotとは

Wikipedia 曰く、オープンソースかつクロスプラットフォーム対応のゲームエンジンらしいですね。某Unityはライセンス云々で色々あって、大炎上しましたが、こちらのゲームエンジンは完全なOSSなので、ベンダーロックみたいなことは無さそうですね。

自分は中学生の時に某Unityに挑戦して、挫折しましたが、Godotはとても簡単にゲームが作れるので誰でも挫折せずに習得できると思います。

ちなみに、ゴドーと読むそうです。

1. 開発環境をダウンロードしよう

まず、Godotの公式ページに移動しましょう！
DownLoad Latest ボタンを押して、ダウンロードページに移動しましょう！

ダウンロードページに移動したら、上のGodot Engine 4.2 ボタンを押して、Godotをダウンロードしましょう！

ダウンロードが完了したら、圧縮ファイルを解凍してGodotを起動しましょう！実行するファイルは、Godot_v4.2-stable_win64.exe です！

2. プロジェクトを作成しよう

Godotを起動したら、プロジェクトマネージャーが表示されます。ここで、今まで作ったプロジェクトを開くことができます。今回は、新しいプロジェクトを作成しましょう！(バージョンが異なる場合は、警告マークが表示されます。)

次に、プロジェクトを作成してみましょう。左上の**+新規** ボタンを押すと、以下のようなフォームが表示されます。

プロジェクト名 には、プロジェクトの名前を入力しましょう。今回は、Watermelon_Game と入力します。プロジェクトパス には、プロジェクトを保存する場所を指定します。適当なディレクトリを選択したら、右上のフォルダーを作成ボタンを押して空のフォルダーを作成することをおすすめします。レンダラー は、今回は互換性を選択しておきましょう。

全ての準備が整ったら、作成して編集ボタンを押してみましょう！

3. Godotエディタに触れてみよう

プロジェクトの作成に成功すると、以下のような画面が登場します。これがGodot エディタです！

画面の構成要素の説明を行います。

1. シーンドック(左上)

シーンドックはノードエディタのようなもので、ここでノードやシーンの追加したり、位置関係を変更できます。Godotなどのゲームエンジンでは、1つのオブジェクトを1つのノードとして扱うので、ノードを直接操作できるシーンドックはとても重要です。

2. ファイルシステムドック(左下)

ファイルシステムドックは言わずもがな。エクスプローラーのようなものです(これ説明する必要ないだろ‼️‼)。

3. メニューバー(中央上)

ここで、プロジェクトの設定を行ったり、編集画面の切り替えや実行ができます。
詳しくは後ほど紹介します。

4. インスペクタ(右上)

インスペクタはノードのプロパティの編集が行えます。例えば、衝突判定の設定をしたり、反発係数を設定したり～などできます。他にも、シグナルやグループの設定ができます。これらの説明も後々すると思います。

5. 2D/3Dビューポート(中央/メニューバー切り替え)

ここでは、2D/3Dのオブジェクトを表示したり、操作することができます。Unityと言えばこの画面ですね。

6. スクリプトエディタ(中央/メニューバー切り替え)

スクリプトエディタも言わずもがな。各ノードにスクリプトを割り当てて、動きをプログラムすることができます。

他にも色々ありますが、ここでは割愛します。

4. 本編: スイカゲームを作ろう 土台作り編

ここからがマグマなんです(?)
Godotエディタのインターフェースの説明をしてもつまらないので、早速ゲーム本編を作っていきましょう！今回制作するものは、スイカゲームです。
スイカゲームの最小の構成要素は

• n種のフルーツ
• 入れ物
  です。

5. ルートノードとシーンを追加してみよう

では、ゲームを作っていきます。
まずは、入れ物を作っていきましょう！

シーンドックのルートノードを作成という箇所を見てください。ルートノードは全てのノードの親であり、1つしか作ることができません。

色々とボタンがありますが、今回は2Dゲームですので、青色の2Dシーン を押してください。すると、シーンドックが以下の画面に更新されます。青色のNode2Dというルートノードが生成されました。このルートノードの配下に様々なオブジェクトを設置していきます。

ここまでできたら、一旦保存しましょう。状況をCtrl+Sで保存できます。

すると、名前を付けてシーンを保存というダイアログが出現すると思います。名前は何でもいいですが、今回はmain.tscnにして保存しましょう！

そういえば、シーンの説明をしていませんでした。シーンはノードの集合体と思ってください。シーンはインスタンス化と言って、別のシーン内のノードにそのシーンのノードを生成し、くっつけることができます。詳しいくはPart2でやると思います。

この状態で実行ボタンを押して、ゲームを起動してみましょう！
実行ボタンはメニューバーの右の再生ボタンです。

実行ボタンを押すと、シーンを選択してくださいというポップアップが出ると思います。
ここは、現在のものを選択を押下してください。

ボタンを押下後、すぐにゲームが起動します。ですが、グレーの背景が表示されるだけで、何も映っていません。というのも、何もオブジェクトを追加していないからです。では、ゲームの画面を閉じて次のステップに移りましょう。

6. カメラを追加しよう

ここで一旦、カメラを追加します。カメラは、2Dビューポートのどこからどこまでを表示するのかを設定することができます。今回の場合はいらない気がしますが、一応追加しておきましょう。
シーンドックの左上に+ボタンがあるので、押下してください。ここを押すと、ルートノードの配下にノードを追加することができます。

次に、Camera2Dを選択し、下の作成ボタンを押してください。

作成できたら、シーンドックを見てみてください。確かにルートノードの下にCamera2Dノードが追加されています。

7. 衝突判定がある入れ物を作ろう

追加を確認できたら、入れ物をいよいよ作っていきます。まずは、入れ物をまとめるノードを作ります。

ルートノードを選択した状態で、+ボタンを押してノードを追加しましょう。

今回選択するのは、Node2Dです。

追加できたら、シーンドックを確認し、ルートノードのじゃない方のNode2Dの名前をBottleに変更しましょう。該当ノードをダブルクリックすると変更できます。この時、ノード配置が以下の画像のようになっていることを確認してください。

次に、入れ物の縁を作っていきます。シーンドックのBottleノードを選択した状態で+ボタンを押して、ノードを追加します。今回追加するノードはStaticBody 2Dです。

StaticBody 2Dのような特殊(?)なノードの詳しい解説は次回行うと思いますが、今ここで簡単な説明をすると、このノードは静止したオブジェクトで当たり判定が必要な物を定義する時に使います。実は、このノードだけでは機能せず。当たり判定を設定するCollisionShape2Dと画面に表示させるノードが配下に必要になります。

このノードを追加して、シーンドックを見ると、警告マークが出ています。このノードは上記のようなノードが子に必要なので、存在していないと警告がでます。

ということで、StaticBody2Dの配下に以下の画像のようなノードを追加してみてください。CollisionShape2DとColorRectです。

どうやら、再び警告が出てしまいましたが、一旦無視します。
ColorRectノードは画面に四角形を描画できます。
シーンドックでColorRectを選択した状態で、右のインスペクタを見ると、様々なプロパティが表示されます。サイズを変更したいので、Layout->Transformを選択し、Sizeを(600, 20)に設定してください。

次に、Transformの上にあるAnchors Presetを中央に変更してください。原点が中央になります。

プロパティの設定が終わったら、以下のような画面になっていると思います。

では、CollisionShape2Dに付いている警告を外したいと思います。シーンドックのCollisionShape2Dノードを選択し、右のインスペクタのShapeの<空>と書いてあるボタンを押下し、新規 RectangleShape2Dを選択してください。

これを押すと、警告が消えたと思います。実はこのノードは当たり判定の設定を手動で行う必要があり、それをしないと警告が消滅しません。Shape RectangleShape2Dを押下し、プロパティを表示します。そして、Sizeの設定を(600, 20)にし、謎のバーと同じ大きさの当たり判定を作成します。

最後に、シーンドックから親のStaticBody2Dのノードを選択し、右のインスペクタからNode2D->Transform->Positionを(0, 300)に設定すればOKです。すると、謎のバーが画面の下に配置されます。

8. 課題！？

では、次回までの課題(?)です。StaticBody2Dノードを設定し、バーを作りましたが、それと同じ要領でStaticBody2Dノードを2つ追加で作成し、以下の画像のような入れ物を完成させてください。

この時のシーンドックは以下のようになっています。

次回は、各種ノードの解説とフルーツを追加する予定です。
では😙