📝

【Godot Engine】フラッピーバードを作るチュートリアル (Part.1)

2021/03/10に公開

概要

この記事は、Godot Engineでフラッピーバードを作成するチュートリアルとなります。

もし Godot Engineに慣れていない場合は、以下のクリックゲームの方がシンプルでわかりやすいのでおすすめです。
https://2dgames.jp/godot2d-click-game/

プロジェクトの作成

まずはプロジェクトを作成します。

ここでは「FlappyBird」という名前にしました。

Mainシーンの作成

まずはゲームのメインとなるシーンを作成します。

「2Dシーン」クリックします。

2Dシーンが作成されるので、ノード名を「Main」に変更して Ctrl+S (Cmd+S) でシーンを保存します (そのまま "Main.tscn" として保存)

保存したら、F5 (Cmd+B) または右上の「▶」をクリックしてゲームを実行します。

メインシーンが設定されていないの確認ダイアログが表示されます。「選択」をクリックします。

メインシーンに "Main.tscn" を選んで、「開く」をクリックします

するとゲームが実行できます。(何も表示されていないウィンドウが表示されます)

背景画像を配置する

以下の画像を "bg_back.png" として保存します。

そしてプロジェクトにドラッグ&ドロップで追加します。

プロジェクトに追加した "bg_back.png" をキャンバスにドラッグ&ドロップします。

"bg_back" がスプライトとして、Mainシーンに追加されました。

Spriteの位置を調整する

キャンバスで位置を調整しても良いですが、インスペクタから行うと、細かい調整が可能となります。
まずは、"bg_back" ノードを選択します。

そしてインスペクタから、Node2D > Transform > Position のところにある「回転アイコン」をクリックします。

すると位置は (0, 0) となるのですが、左上の位置をはみ出してしまっています。

実行するとわかるのですが、背景が意図した位置に表示されていません。

これは Spriteの基準座標のデフォルト値が「中央」となっているためで、Offset > Centered のチェックを外すと、左上基準の座標となります。

これで位置を調整できたのですが、実行するとウィンドウサイズと背景画像のサイズが合っていません。

ウィンドウサイズの調整

ウィンドウサイズを変更するには、メニューからプロジェクト > プロジェクト設定 を選びます。

するとプロジェクト設定が表示されるので、「一般」タブから Display > Window を選び、Size の値を Widthを「800」 Heightを「480」に変更します。

実行すると背景画像がぴったり収まりました。

次回

第二回に続きます
https://zenn.dev/syun77/articles/dcae7c4083985e

Discussion