初めての2Dゲームを作ろう on Godot 4 レシピ

プロジェクト設定

Mon, 01 Jan 0001 00:00:00 +0000

この最初のゲームプロジェクトでは、初めてGodot Engineでゲームを作成する手順をご案内します。事前の経験は必要ありませんが、少なくともはじめてのGodotセクションに目を通していることが望ましいです。ここでは、エディターのインターフェースやGodotのUIの操作方法について学べます。

なぜ2Dから始めるべきか？

一言で言えば、3Dゲームは2Dゲームと比べて格段に複雑です。しかし、理解すべき基本エンジン機能の多くは同じものです。Godotの開発ワークフローをしっかり習得するまでは、2Dプロジェクトに専念することをオススメします。その段階までくれば、3Dへの移行はずっとスムーズに感じられるはずです。

Godotを起動して新規プロジェクトを開始します。名前は自由に決めて構いません - ここでは「クラシック・シューティング」と名付けます。これは伝統的なシューティングゲームスタイルの作品となるからです。

アートワークのダウンロード方法

ゲームで使用するアートワークは、itch.ioからダウンロードできます。 Grafxkid氏によるミニピクセルパック

アートワークパックを解凍し、プロジェクトにコピーするには、フォルダを[ファイルシステム]タブにドラッグアンドドロップしてください。

プロジェクト設定

次に必要なのは、プロジェクト全体の設定をセットアップすることです。プロジェクト設定を開き、右上にある「詳細設定」トグルを有効にしてください。

表示/ウィンドウ セクションにおいて：
- Viewport Width と Viewport Height を 240, 320 に設定。
- Window Width Override と Window Height Override を 480, 640 に設定。
- Stretch/Mode を canvas_items に指定。

これらの設定により、ゲームが適切なサイズで表示されるようになります。ピクセルアートを使用しているため、画像自体は極端に小さく、古い機種向けの解像度である240x320でも問題なく表示されます。ただし現代のモニターではこのサイズは画面に対してかなり小さいため、他の設定で比例的に拡大表示できます。1080pモニターをお使いの場合は、オーバーライド値を720x960に変更することもできます。また、ゲーム実行中にウィンドウサイズを変更することもできるようになります。

キャンバステクスチャセクションのレンダリング/テクスチャ設定で、デフォルトテクスチャフィルタを Nearest に設定してください。これにより、美しいピクセルアートが鮮明なまま保たれ、左側ではなく右側のようなきれいな表示になります。

プロジェクト設定 画面の上部にある インプットマップ タブをクリックしてください。ここではゲーム内で使用する入力設定します。「新規アクション追加」欄に以下を入力し、各入力項目を追加したら<Enter>キーを押してください。right(右)、left(左)、up(上)、down(下)、shoot(射撃)。それぞれの入力にキーボードショートカットを割り当てるには、対応する + ボタンをクリックした後、キーボードでそのキーを押してください。作業が完了したら、以下のような設定になっているはずです。

他のキー設定を使いたい場合は、自由に変更してください。

次のステップ

設定は完了しました。いよいよ開始できます！次のセクションでは、プレイヤーが操作する宇宙船を作成します。

戻る	次へ

プレイヤーシーンの設計

Mon, 01 Jan 0001 00:00:00 +0000

最後のセクションでは、プロジェクトを設定し、ゲームアートをダウンロードしました。これでコーディングを開始する準備が整いました。まずはプレイヤー操作可能な宇宙船から着手します。

船シーンの設定

Godot ワークフローにおいて共通的な作業の一つにシーンの作成があります。前述したように、Godotにおける「シーン」とは、単なる複数の「ノード」の集合体に過ぎません。ほとんどのGodotプロジェクトでは、各ゲームオブジェクトは個別のシーンとして構成され、目的に応じた機能を提供するノードと、必要に応じて動作をカスタマイズするスクリプトが組み込まれています。

ノードの選択方法

最初のステップは、どのタイプのノードから始めるかを決めることです。シーンに追加する最初のノードは「ルートノード」と呼ばれます。通常、シーンのルートノードはゲームオブジェクトの主要な動作を定義するものでなければなりません。その後、追加機能を実現するために「子ノード」を取り付けていきます。

さて、ゲームに登場する船はどんなデザインにすべきでしょうか？要件を整理し、それらを満たすために活用できそうなノードを検討してみます。

その船には以下が必要です。

2D空間での移動 : これには基本的なNode2Dノードで十分です。なぜならこのノードにはposition、rotationなどの2D関連プロパティが備わっているからです。ただし、外観に関する要素はありません。
画像を表示 : Sprite2Dはこの目的のためのノードです。これもNode2Dであるため、自由に移動させることができます。
衝突検出機能：画面内で敵キャラが射撃したり移動したりするため、自機がダメージを受けたタイミングを正確に把握する必要があります。固い物体同士の相互作用（跳ね返りや運動量伝達など）を考慮する必要はなく、単に接触を検知できれば十分です。この用途にはArea2Dコンポーネントが最適です。他オブジェクトとの接触検出機能を備え、位置関連プロパティを持っていますが、独自の視覚表現は持ちません。

このリストを見ると、Area2Dが主要な機能を提供していることがわかります。ここにSprite2Dをアタッチして宇宙船の画像を表示すれば、必要なものはすべて揃います。

シーンの構築方法

シーン タブで、＋ボタンまたはその他のノードを追加 ボタンをクリックして最初のノードを作成します。Area2D と入力し、リストから選択してください。ノードが シーン タブに追加されたら、その名前をクリックして Player に改名し、<Ctrl+S> キーを押してシーンを保存します。

船舶情報の表示

Playerノードを選択した状態で、もう1つのノードを追加してください。Sprite2D。整理しやすくするため、このノードの名前をShipに変更してください。

ファイルシステム タブから、アートパック内の Player_ship (16x16).png ファイルをドラッグし、 インスペクター の テクスチャ プロパティにドロップしてください。

最初に気づくのは、どうやら船が3隻あるように見える点です！アートパックに含まれている画像には、左右へ移動するバージョンも含まれています。これを利用してみます - ［インスペクター］の［アニメーション］セクションで、Hフレーム数を3に設定します。これでフレームプロパティを変更すると、これら3つの異なるバージョン間を切り替えられるようになります。今のところは1のままにしておいてください。

衝突形状の追加方法

また、Area2Dノードの横にある黄色の警告三角アイコンにもお気づきかもしれません。このアイコンをクリックすると、このエリアに形状が定義されていないという警告メッセージが表示されます。適切に対応するためには、Playerノードの下にCollisionShape2Dノードを追加が必要です。これにより、オブジェクト同士が衝突判定するための正確な境界を設定できます。

このノードのインスペクタウィンドウで形状プロパティを確認すると、現在は <empty> と表示されています。このボックスをクリックすると、様々な形状を選択できるドロップダウンメニューが表示されます。ここでは . New RectangleShape2D を選択して追加すると、船の上に水色の正方形が表示されるはずです。図形のサイズは、オレンジ色の円をドラッグして調整できます。または、形状プロパティ内の Shape をクリックして拡大表示し、手動で サイズ を入力することも可能です。

排気システム

アニメーションを追加すると、船の見た目がよりダイナミックになります。アートパックには「ブースター」と名付けた排気炎のアニメーションが3種類含まれています。それぞれ左舷用、前進時用、右舷用に対応しています。

これらを表示するには、Shipノードを選択し、子要素としてAnimatedSprite2Dノードを追加し、「ブースター」という名前を付けてください。

インスペクターのアニメーション セクション内にあるSprite Framesプロパティは、現在 <空> と表示されています。これをクリックすると新しい SpriteFramesが作成され、エディタウィンドウ下部にあるアニメーションパネルを開くために SpriteFrames 項目をクリックできるようになります。

プレイヤーのコーディング

Mon, 01 Jan 0001 00:00:00 +0000

スクリプトの追加方法

ゲームの動作やメカニクスを構築するには、スクリプトを記述してノードやその他のオブジェクトにアタッチします。現在のPlayerシーンでは宇宙船を表示し、その衝突判定ボックスなどを定義していますが、実際には移動できず、仮に他のものと衝突しても何の反応も生じません。この機能を追加するため、これからコードを実装していきます。

Playerノードを選択して、「スクリプトのアタッチ」ボタンをクリックします。

ノードスクリプトのアタッチ ウィンドウでオプションを変更する必要はありませんので、単に作成ボタンをクリックすると、スクリプトエディターに移動します。

スクリプトの最初の行を見てみてください。これは自動的に追加されたものです。

extends Area2D

この行はこのスクリプトをアタッチすべきオブジェクトのタイプを指定しています。つまり、スクリプトは Area2D が提供するすべての機能にアクセスできるようになります。

スクリプトが『組み込まれている』ノードの種類と、extend 文は常に一致している必要があります。

スクリプトの操作について

単独で存在するスクリプト自体には、ほとんど意味がありません。スクリプトは付加的な機能を定義するものであり、特定のオブジェクトに紐づいて初めて効果を発揮します。単に「あるスクリプト内の変数」ではなく、そのスクリプトによって定義されたオブジェクトのプロパティを参照することになる点が重要です。これは極めて重要な概念です。

移動

まず、船を画面上で移動させる機能から作成してください。以下の動作するコードから始めてみます。

プレイヤーが押している入力を検知する
その入力方向に宇宙船を移動させる

@export var speed = 150

func _process(delta):
 var input = Input.get_vector("left", "right", "up", "down")
 position += input * speed * delta

これを行ごとに分解してみます。

変数名の前に @export を付けると、インスペクター でその値を調整できるようになります。

_process() 関数はエンジンによって1フレームごとに呼び出されます。この関数内に書いたコードはすべて毎フレーム実行されます。
Input.get_vector() は、指定された4つの入力状態をチェックし、それらの方向に向くベクトルを生成します。
最後に、与えられた入力ベクトルを移動量として船の position に加算します。この時、速度値に合わせてベクトルの大きさを調整し、さらに delta でスケール処理を行います。

詳細情報へのリンク

ベクトルの基本理解：ベクトル数学
deltaとは？デルタについての解説

シーンを実行するには ［現在のシーンを実行］ ボタンをクリックしてください。その後、自由に移動してみてください。

画面表示を維持する機能

一つの問題点として、プレイヤーが動き続けると画面外へと移動してしまう点が挙げられます。この問題を解決するには、スクリプト上部でプレイヤーの position プロパティを画面矩形内に制限が必要です。以下のように追加してください。

シーンの箇条書き表示

Mon, 01 Jan 0001 00:00:00 +0000

プレイヤーが自由に画面内を移動できるようになった今、その次のステップとして「射撃」システムを実装していきます。

再利用可能なオブジェクト

プレイヤーは試合中に多数の「弾丸」を発射しますが、すべて同一仕様となります。各弾丸は以下の要件を満たす必要があります。

プレイヤーのすぐ前方に出現
画面外に到達するまで前進移動
敵キャラとの衝突を検知

すべての弾丸が同じ動作をするように設計されているため、「プロトタイプ」となる基本型を1つ作成すれば、そこから必要な数だけコピーを生成できます。Godotのシーンシステムはこの用途に最適です。

弾丸シーン

メニューからシーン→新規シーンを選択するか、ビューポート上部のタブにある**＋**アイコンをクリックすることで、新しいシーンを作成できます。

Playerシーンと同様に、弾丸を正しく機能させるために必要なノードを検討が必要です。ここでも衝突判定用の Area2D コンポーネントを使用することで、物体との接触を検出できます。このため、以下のものが必要になります。

衝突形状（コリジョンシェイプ）：弾丸が物理的に存在していることをシミュレートするため
スプライト：弾丸のビジュアル表示用
画面外検知メカニズム：弾丸が画面から外れたタイミングで自動的に除去する仕組み

以下にノードの設定を示します。

Area2D - このBulletに名前を付ける
- Sprite2D
- CollisionShape2D
- VisibleOnScreenNotifier2D

アセットパックフォルダから、Player_charged_beam (16 x 16).png画像ファイルを、Sprite2Dコンポーネントのテクスチャプロパティにドラッグ＆ドロップしてください。

船舶画像と同様に、ここにも複数のバージョンが存在するため、Hframesを2に設定し、一度に表示する画像を1つだけにしてください。

CollisionShape2D の形状を、先ほどPlayerシーンで設定した方法と同じように設定してください。

弾丸スクリプト

ノードBulletにスクリプトをアタッチし、移動の基本設定から始めてください。

extends Area2D

@export var speed = -250

func start(pos):
 position = pos

func _process(delta):
 position.y += speed * delta

このスクリプトはプレイヤー用のものと類似しているので、見覚えがあると思います。変更しているのはposition.yだけです。弾丸を垂直に真上へ発射させるためです。

定義したstart()関数に注目してください。これにより、プレイヤーが移動して異なる位置から弾丸を発射するため、弾丸の初期座標を設定することが可能になります。

シグナルの接続方法

次に、bulletノードを選択してから、インスペクターの横にあるノードタブをクリックしてください。

これはこのノードが送信可能なすべてのシグナル一覧です。シグナルはGodotで何かが発生したことを通知する仕組みです。この場合、area_entered シグナルを使用することで、この弾丸が他の Area2D ノードに接触するたびに検知できます。

area_entered シグナルを選択し、接続… ボタン（またはシグナル名をダブルクリック）をクリックしてください。表示されるダイアログでは、何も変更する必要はありません。ただ単に接続をクリックするだけで完了です。

bullet.gdを見てください。新しい関数が追加され、名前の横に緑の「接続中」アイコンが表示されます。これはシグナルがこの関数に接続されていることを示すものです。この関数はエリアが何かに接触するたびに呼び出されるため、ここにコードを追加してください。

func _on_area_entered(area):
 if area.is_in_group("enemies"):
 area.explode()
 queue_free()

ここで弾が敵に当たったかどうかを確認します（詳細は後述）。当たった場合は、敵に対して爆発処理を実行した後、弾オブジェクトを削除します。

以下の手順に従って、VisibleOnScreenNotifier2D の screen_exited シグナルも接続してください。

射撃

Mon, 01 Jan 0001 00:00:00 +0000

Bulletシーンでは、プレイヤーが射撃するたびに再利用可能なオブジェクトを生成できます。

プレイヤーへの追加方法

以下のコードをPlayerスクリプトに追加してください。

@export var cooldown = 0.25
@export var bullet_scene : PackedScene
var can_shoot = true

以下の2つの@export変数を使用すると、インスペクターで設定可能なため、クールタイムを調整できます。プロパティをクリックしてbullet.tscnファイルを選択する形でbullet_sceneを設定してください。

can_shootはプログラミング用語で言うところの「フラグ」です。これはある条件を制御するブール型変数です。この場合、プレイヤーが射撃可能かどうかを決定します。クール期間中、この変数はfalseに設定されます。

次に、Bulletと同様にstart()関数を追加してください。これにより、プレイヤーの初期値を設定できるほか、ゲームが再起動するたびにこれらの値をリセットできるようになります。

func _ready():
 start()

func start():
 position = Vector2(screensize.x / 2, screensize.y - 64)
 $GunCooldown.wait_time = cooldown

これにより、プレイヤーは画面の中央下部に配置され、最適なスタート位置となります。また、クールタイムタイマーが適切な待機時間を設定することを保証します。

shoot()関数は、『射撃』入力が押されるたびに呼び出されるようになります。

func shoot():
 if not can_shoot:
 return
 can_shoot = false
 $GunCooldown.start()
 var b = bullet_scene.instantiate()
 get_tree().root.add_child(b)
 b.start(position + Vector2(0, -8))

この関数の最初の処理は、プレイヤーが射撃可能かどうかを確認することです。もし許可されていない場合、return文によって即座に関数が終了します。

プレイヤーが射撃可能状態の場合、フラグをfalseに設定し、クールタイムタイマーを開始します。その後、新しい弾丸オブジェクトを作成しゲームに追加し、そのstart()関数を呼び出して正しい位置に配置します（プレイヤーの宇宙船すぐ上）。

この関数を呼び出せるのは、プレイヤーがキーを押している時です。_process() 関数の末尾、position.clamp() 行の後にこれを追加してください。

if Input.is_action_pressed("shoot"):
 shoot()

さらに、GunCooldown の timeout シグナルも接続する必要があります。

func _on_gun_cooldown_timeout():
 can_shoot = true

クールタイムが終了したら、再び射撃を許可できます。

シーンを実行して、射撃アクションを押してみてください。

ツリーへのインスタンス追加について

注意：新規に生成した弾丸はシーンツリーのルートノード（get_tree().root）の下に子要素として追加されたことに留意してください。プレイヤー船の子要素としては追加していません。これは重要な点です。もし弾丸を船の子要素にしていた場合、船が移動するたびにそれらが「固定」されてしまうからです。

次のステップ

シューティングゲームは撃つ対象がなければ面白くありません。敵キャラの作成に取り掛かりますが、その前にプレイヤーや敵、その他のゲーム内オブジェクトを配置するシーンを作成する必要があります。

戻る	次へ

メインシーン

Mon, 01 Jan 0001 00:00:00 +0000

ほとんどのゲームでは、これを「レベル」または「メインシーン」と呼びます。ここではそのように呼称します。

シーンを「メイン」という名前の Node2D（で表示）で開始し、保存してください。

背景の作成方法

以下の手順で操作してください。

アイコンを使用して、新しい Sprite2D 子オブジェクトを追加してください。
このスプライトに「Background」という名前を付けます。
テクスチャとして Space_BG (2 frames) (64 x 64).png を適用します。

この画像には2つのフレームがあり、それぞれ64x64ピクセルのサイズです。画面全体に画像を敷き詰めたいので、まずは以下の設定から始めてください。

Offset 設定で Centered(中央揃え) をオフにします。これにより、画像の左上隅が原点から始まるようになり、中心からは始まらなくなります。
Region 設定で Enabled をオンにし、幅を240、高さを320に指定します。これにより画像が画面サイズに合わせて拡大されます。
テクスチャ 設定で Repeat(繰り返し) を Enabled(有効) に変更してください。これにより画像が画面全体に繰り返されるようになります。

現在のシーンにプレイヤーを追加するには、Mainノードを選択して子シーンをインスタンス化ボタンをクリックします。

背景をアニメーション化する方法

背景アニメーションを追加することでシーンに動きを与えることができます。フレームごとに region_rect プロパティを変更することでコード上で実現することも可能ですが、ここでは代わりに AnimationPlayer ノードを使いましょう。Main の子要素として追加してください。

エディターウィンドウの下部にはアニメーションパネルが表示されます。ここには多くの情報が配置されていますので、その構成を確認していきます。

クリックしてください。次に［新規アニメーション］を選択します。新しいアニメーションには名前をscrollと付けてください。［長さ］の値は2に設定し、［ループ再生］と［自動再生］ボタンを有効にします。

AnimationPlayer は、制御したいプロパティを表す「トラック」を追加することで動作します。プレイヤーのタイムライン上では、「キーフレーム」を追加して特定の時点でそのプロパティに設定したい値を指定します。

アニメーションにキーフレームを追加するには、インスペクターの各プロパティ横に表示された鍵アイコンをクリックします。スライダ（タイムライン上の青いマーカー）が時間0に位置していることを確認したら、まず Background(背景) を選択し、領域/矩形の横にある鍵ボタンをクリックします。新規トラックを作成するか確認されるので、指示に従ってください。すると、追加されたキーフレームを表す小さなドットとともに、新しいトラックがアニメーションパネルに追加されます。スライダを時間2まで移動させ、最後に領域/矩形プロパティの y 値を64に設定します。別のキーフレームを追加するには、該当するキーをクリックします。

アニメーションの再生ボタンを押すと、プレイヤーの背後で背景がゆっくりとスクロール表示されるはずです。

次のステップ

メインシーンが完成し、敵キャラクターを追加する準備が整いました。次のステップでは、弾丸と同じ方法で単一の敵用シーンを作成し、その後複数回インスタンス化します。

戻る	次へ

敵兵

Mon, 01 Jan 0001 00:00:00 +0000

プレイヤーが射撃できるようになったので、今度は撃つ対象を与えます。

シーンの設定

敵キャラには Area2D を使用します。これは、プレイヤーの弾丸との重複判定や、直接衝突検出する必要があるためです。

以下に必要となるノードを列挙します。

Enemy:  Area2D
 Sprite2D
 CollisionShape2D
 AnimationPlayer
MoveTimer:  Timer
ShootTimer:  Timer

※「インスペクター」横の ノード タブをクリックします。グループ セクションに「enemies」と入力し、追加をクリックしてください。弾丸コードで指定したように、これは「enemies」グループ内のオブジェクトを探します。

スプライトのテクスチャにBon_Bon (16 x 16).pngを追加し、アニメーション/フレーム数を4に設定してください。

以前と同じように矩形の衝突形状を追加し、サイズを調整してください。タイマーノードの両方でワンショットを有効にします。

AnimationPlayer において、「バウンス」というアニメーションを追加し、ループ再生と自動再生を設定します。アニメーションパネルの下部にあるスナップ値を 0.05 に設定してください。

スプライトノードを選択し、テクスチャ と フレーム数 の横にあるキーアイコンをクリックしてトラックを作成します。これは、後でこれらのプロパティに異なる値を使用する「爆発」アニメーションを追加するためです。

次に、必要な各フレーム値を設定していきます。まずは10ミリ秒ごとに以下の順番でフレームを設定します。2, 1, 0, 3。最後にもう一度0を設定してすぐ後ろに配置します。これにより、スプライトが徐々に大きくなり、最後に少し弾むような「脈動」アニメーションが完成します。このセットアップは以下のようになるはずです。

再生ボタンを押して実際に動作を確認してみてください。必要に応じて調整していただいても結構です。

次に、「explode」というアニメーションを追加してください。長さを 0.4 秒に設定してください。

スプライトのテクスチャを Explosion (16 x 16).png に変更し、そのプロパティにキーフレームを適用します。この画像は敵キャラ画像と異なるフレーム数を持っているため、Hフレームも 6 に変更し、同様にキーフレームを設定が必要です。

現在のキーフレームを時間 0 時点で0に、時間 0.4 時点で5に設定してください。アニメーションを実行して動作を確認してください。

敵キャラ用スクリプト

敵ユニットは画面上部のグリッド状に配置されて出現します。一定時間後にプレイヤー方向へ降下を開始し、破壊されない場合は画面上部に復帰します。また、定期的にプレイヤーに対して攻撃を仕掛けてきます。

スクリプトを追加し、変数から始めてください。

extends Area2D

var start_pos = Vector2.ZERO
var speed = 0

@onready var screensize = get_viewport_rect().size

変数 start_pos は、敵の初期位置を追跡するために使用され、移動後に元の位置に復帰できるようにします。これは敵が生成される際に設定し、start() 関数を呼び出すときに行います。

敵の射撃

Mon, 01 Jan 0001 00:00:00 +0000

敵が攻撃できるようになったので、今度は彼らが撃つ対象を与えます。

敵弾シーン

以前プレイヤー用の弾丸を作成したときと同じように、新しいEnemyBulletシーンを作成してください。ここでは詳細な手順は割愛しますが、行き詰まった場合はその部分を参照してください。唯一の違いは、代わりにEnemy_projectile (16 x 16).png画像を使用できる点です。

スクリプトは少し異なります。

extends Area2D

@export var speed = 150

func start(pos):
 position = pos

func _process(delta):
 position.y += speed * delta

VisibleOnScreenNotifier2DとArea2Dの screen_exited シグナルと area_entered シグナルをそれぞれ接続してください。

func _on_visible_on_screen_notifier_2d_screen_exited():
 queue_free()

func _on_area_entered(area):
 if area.name == "Player":
 queue_free()

※プレイヤーへのヒットは検出していますが、現時点では何も処理していません。ダメージを与える仕組みを追加した時点で、この問題に対処します。

敵への射撃を追加

敵のスクリプト上部で新しい弾丸をロードします。

var bullet_scene = preload("res://enemy_bullet.tscn")

次に射撃関数を書き換えます。

func _on_shoot_timer_timeout():
 var b = bullet_scene.instantiate()
 get_tree().root.add_child(b)
 b.start(position)
 $ShootTimer.wait_time = randf_range(4, 20)
 $ShootTimer.start()

Main シーンを再生し直すと、ランダムな敵の弾丸が出現するはずです。

戻る	次へ

ユーザーインターフェースとスコア

Mon, 01 Jan 0001 00:00:00 +0000

ゲームの最後の主要コンポーネントは ユーザーインターフェース (UI) です。プレイヤーにスコアやその他の情報を表示する方法が必要になります。これを実現するために、Godotが提供する各種 Control ノードを使用します。これらはUI構築用に設計された専用ノードです。

ユーザインタフェースシーン

シーンの開始には MarginContainer を使用し、名前は UI としてください。

コンテナノード はControlノードの一種で、子要素のサイズや位置を制御するように設計されています。これを使用することで、手動で調整する手間をかけずにコントロールノードを簡単に配置・移動できます。MarginContainerを使用すると、その子要素が端に近づきすぎるのを防ぐことができます。

インスペクターのテーマオーバーライド/定数セクションで、4つのマージン値をすべて 10 に設定します。その後、ビューポート上部のメニューバーで、アンカーをトップワイドプリセットに設定してください。

次に、HBoxContainer を追加してください。このコンテナは子要素を水平方向に配置します。その上に、船のシールドレベルを表示するTextureProgressBar を追加し、「ShieldBar」と名前を付けます。

申し訳ありませんが、進捗バーとして使用できる適切な画像がアートパックにありません（1つ存在はしますが、使い勝手の良いフォーマットではありません）。代わりに以下の2つの画像を使用します。1つは緑色のプログレスバー、もう1つは白い枠線です。これらをプロジェクトフォルダに保存してください。

テクスチャ設定セクションで、背景画像のドラッグ先を「Progress」に、前景画像のドロップ先を「Under」に指定します。まず気づくのは、デフォルトサイズが非常に小さいことです。最初にレイアウト設定で「カスタム最小サイズ」を (80, 16) に設定してください。オレンジ色の選択枠は大きくなりますが、画像は変わりません。これは単に画像を延ばすと見た目が悪くなるためです。代わりに、「ナインパッチストレッチ」チェックボックスを有効にし、4つの「伸縮マージン値」をすべて 3 に設定します。

これで長くて塗りつぶされていないバーが表示されているはずです。塗りつぶされた状態でどのように見えるかを確認するには、「Range」セクションの「Value」プロパティを 0 から 100 の間の任意の値に変更してください。

右側にはスコアを表示したいです。単にLabelノードを使ってフォントを追加するだけでもできますが、それでは面白みがありません。アートパックには、代わりに使用できる美しいピクセル数字セットが含まれています。適切に表示するためには、少しコーディングして数値を切り出す必要があります。

スコアカウンター

新しいシーンを開始し、HBoxContainerを追加してください。ScoreCounter(スコアカウンター)と名前を付け、レイアウト設定をワイド・トップ配置に設定し、整列方法を「末尾」に設定してください。さらに、テーマのオーバーライド/定数/分離幅を 0 に設定します（プロパティ名の横にあるチェックボックスを必ず有効化してください）。

このコンテナでは、各数字を表示する TextureRectノードの文字列を配置します。まずは1つ追加し、それを複製する方法から始めてください。

TextureRect Digit0という名前を付けます。テクスチャセクションで「新規AtlasTexture」を選択し、ボックスをクリックして開きます。Number_font (8 x 8).pngファイルをアトラスプロパティにドラッグし、領域を (32, 8, 8, 8) に設定します。伸縮モードは「アスペクト比を維持（中心固定）」に設定してください。

Digit0ノードを選択し、Ctrl + D を7回押してノードの複製を作成します。この手順完了後に表示されるべき画面例を以下に示します。

問題が発生しました。TextureRect を8つの個別コピーに複製したにもかかわらず、すべてのインスタンスが同じ AtlasTexture をテクスチャプロパティで共有しています。つまり、領域を変更して別の数字を表示しようとすると、すべての数字が同時に変わってしまうのです。

これはなぜかというと、Resourceオブジェクト（例えばTexture）はメモリにロードされてから共有されるからです。実際には単一のテクスチャしか存在しないため、このアプローチは非常に効率的です - 同じ画像を何度も読み込んでメモリを浪費するのを防げます。ただし、特定のノードをユニークにする場合は明示的に指定します。

ゲームの開始と終了方法

Mon, 01 Jan 0001 00:00:00 +0000

最後のステップとして、ゲームにスタートボタンと「ゲームオーバー」状態を追加してください。

ゲーム開始方法

現在ゲームを実行するとすぐに開始されますが、起動用のボタンを追加してください。

MainをCanvasLayerの子要素として追加し、そこにCenterContainerを追加し、そのレイアウトをフル矩形に設定します。次に、TextureButtonをその子要素として追加してください。このボタンにStartという名前を付け、その通常状態のテクスチャとしてSTART (48 x 8).png画像を設定します。

スクリプトの上部に参照を追加：

@onready var start_button = $CanvasLayer/CenterContainer/Start

このボタンのpressedテクスチャをMainに接続し、このコードを追加してください。

func _on_start_pressed():
 start_button.hide()
 new_game()

new_game()関数はゲームの開始処理を担当するため、_ready()を変更し、敵を生成しないようにしつつ、ボタンが表示されるようにするだけです。

func _ready():
 start_button.show()
# spawn_enemies()

次に、new_game()関数を追加してください。

func new_game():
 score = 0
 $CanvasLayer/UI.update_score(score)
 $Player.start()
 spawn_enemies()

現在は、シーンを実行するとボタンが表示され、クリックするとゲームが開始されるはずです。

ゲーム終了方法

CenterContainerの子として TextureRect を追加し、ノード名を GameOver に設定します。画像には GAME_OVER (72 x 8).png を使用します。この画像はスタートボタンと重なりますが、問題ありません。ゲームでは一度に表示するのは一つだけだからです。

スクリプトの上部に別の参照を追加：

@onready var game_over = $CanvasLayer/CenterContainer/GameOver

また、_ready() に game_over.hide() を追加してください。

Main でプレイヤーの died シグナルを接続してください。

func _on_player_died():
 get_tree().call_group("enemies", "queue_free")
 game_over.show()
 await get_tree().create_timer(2).timeout
 game_over.hide()
 start_button.show()

この操作で2秒間「ゲームオーバー」画面が表示され、その後スタートボタンに戻るので、再度プレイできます。ぜひお試しいただき、何ゲームか続けて遊んでみてください。

前へ	次へ

まとめ

Mon, 01 Jan 0001 00:00:00 +0000

ここまでついてきてくださった皆さんは、Godotでゲームを構築する基本原理の多くを学べたことでしょう。基本的なゲームが完成しましたので、ここでチュートリアルは終了とします。

効果的な学習の秘訣

このようなチュートリアルや、オンラインで見つけられる他の教材を最大限に活用するためのとっておきの方法をご紹介します。作業が終わったらすぐにプロジェクトを削除し、最初からやり直してください。今度は、解説を見ずに自分で再現してみることに挑戦してみます。行き詰まった部分だけは解説を参照しても構いませんが、その後は再度閉じて進めてください。

繰り返しのように聞こえるかもしれませんが、これがまさに学ぶ方法です。何度も実践を重ねることで。ぜひこのアドバイスに従ってみてください。ゲーム開発スキルが驚くほど速く上達するのを実感できるでしょう。

ゲームへの追加方法

このゲームで使われている技術に十分慣れたと感じたら、次は新しいことに挑戦する段階です。ゲームに新しい機能を1つ追加してみます。

アイデアが浮かばないときは、これらの提案を参考にしてください。

追加の敵タイプについて - アートパックには他種の敵用アートワークも含まれています。これらの敵はどのように移動し、攻撃するのでしょうか？
ウェーブシステム - 画面をクリアするたびに新たな敵が次々に出現する仕様を追加
ボスキャラクター - 通常の敵より巨大な「ボスキャラ」が登場するようにしたら？
パワーアップ要素 - プレイヤーが収集できるアイテムとして各種パワーアップを実装。関連するグラフィックも用意済み:
- シールド回復アイテム - これを回収するとシールド効果が強化される
- 武器アップグレード - 発射弾数増加や新たな攻撃パターン追加など
効果音とBGM - サウンドエフェクトと背景音楽を導入することで、ゲーム全体にさらなる個性と臨場感を与える。

さらに詳しく学ぶ

さらに学習を進めませんか？次の学びの冒険に向けたオススメをご紹介します。

Godot入門：3D制作の始め方 - 3Dモデリングに興味がある方は、Godotの3D機能に関するこの解説をご覧ください。
このウェブサイトの他のコンテンツもご覧ください。夢のゲームを作るための様々な事例、チュートリアル、コードスニペットを豊富にご用意しています。

このプロジェクトを GitHubからダウンロード

プロジェクトコードはこちらからダウンロードしてください。

https://github.com/godotrecipes/8_direction_animation