2D on Godot 4 レシピ

タイルマップ：タイルを検出する

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

課題

CharacterBody2DキャラクターがTileMapと衝突しており、どのタイルに衝突したのかを確認したい場合。

解決策

オブジェクト同士が衝突した場合、衝突データは KinematicCollision2D オブジェクトとして取得されます。 TileMap は単一のコリダーとして機能するため、collider プロパティを参照すると実際にはこの TileMap ノードが返される点にご注意ください。

その後、衝突位置にあるTileMapのタイルを特定が必要です。

以下の状況を想定してください。変数 collision に KinematicCollision2D オブジェクトが格納されている場合：

# Confirm the colliding body is a TileMap
if collision.collider is TileMap:
 # Find the character's position in tile coordinates
 var tile_pos = collision.collider.world_to_map(position)
 # Find the colliding tile position
 tile_pos -= collision.normal
 # Get the tile id
 var tile_id = collision.collider.get_cellv(tile_pos)

tile_idを取得した後、TileSetリソースからタイルのプロパティを取得できます。これはTileMapオブジェクトのtile_setプロパティで参照できます。例えば、特定のタイル名を取得するには以下のようにします。

 var tile_name = collision.collider.tile_set.tile_get_name(tile_id)

また、新しいidを設定することでタイルを変更することもできます。

 collision.collider.set_cellv(tile_pos, new_id)

プラットフォームキャラクター

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

ℹ️ 留意事項

この記事は Godot 3から Godot 4 へ内容の書き換え中です。 Godot4では存在しない変数、関数が含まれている場合があります。もしその場合はリポジトリのIssuesまでご報告ください。

課題

2Dプラットフォーマースタイルのキャラクターを作成したいです。

解決策

経験が少ない開発者は、プラットフォームキャラクターをプログラミングするのがいかに複雑かを知って驚くことがよくあります。Godotには組み込みツールが用意されているものの、ゲームごとに解決策が異なるため、万能な答えはありません。このチュートリアルでは、ダブルジャンプやしゃがみ動作、ウォールジャンプ、アニメーションといった機能について詳しく掘り下げることはしません。ここではプラットフォーマー移動の基本原理に焦点を当てます。他の課題については、残りのレシピを参照してください。

ヒント

RigidBody2D を使用してプラットフォーマーキャラクターを作成することはできますが、ここでは CharacterBody2D に焦点を当てます。運動制御ボディはプラットフォームゲームに最適です。このようなゲームでは、リアルな物理挙動よりも反応の良いアーケードライクな操作感が重視されるためです。

まず CharacterBody2D ノードを作成し、その上に Sprite2D と CollisionShape2D を追加してください。

以下のスクリプトをキャラクターノードのルートに追加してください。なお、ここでは[インプットマップ]で定義した入力アクション（"walk_right"、"walk_left"、および "jump"）を使用しています。詳細は InputActions をご覧ください。

extends CharacterBody2D

@export var speed = 1200
@export var jump_speed = -1800
@export var gravity = 4000


func _physics_process(delta):
 # Add gravity every frame
 velocity.y += gravity * delta

 # Input affects x axis only
 velocity.x = Input.get_axis("walk_left", "walk_right") * speed

 move_and_slide()

 # Only allow jumping when on the ground
 if Input.is_action_just_pressed("jump") and is_on_floor():
 velocity.y = jump_speed

speed、gravity、jump_speedに用いる値は、プレイヤースプライトのサイズに大きく依存します。このサンプルではプレイヤーテクスチャが 108x208 ピクセルです。もしスプライトが小さい場合は、より小さい値を使用が必要です。また、ゲーム操作が速く反応するように、適切な高数値を設定することが重要です。重力を低く設定すると浮遊感の強いゲームプレイになり、逆に高く設定するとすぐに地面に戻って再びジャンプできる状態になります。

画面ループ

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

課題

クラシックな2Dゲーム（『パックマン』タイプの作品など）でよく使われる、プレイヤーキャラクターが画面端から反対側に移動する機能を実装したいです。

解決策

スクリーンサイズ（ビューポート）を取得します。
```
@onready var screen_size = get_viewport_rect().size
```
get_viewport_rect() は CanvasItem の派生ノードであればどれでも利用できます。

プレイヤーの座標を比較します。

if position.x > screen_size.x:
 position.x = 0
if position.x < 0:
 position.x = screen_size.x
if position.y > screen_size.y:
 position.y = 0
if position.y < 0:
 position.y = screen_size.y

注意：この処理ではノードのpositionを使用しています。これは通常、スプライトまたはボディの中心座標を指します。

wrapf() を使用して、シンプルに実装します。

上記のコードは、GDScriptのwrapf()関数を使用することで簡略化できます。この関数は指定された範囲内で値を「ループ」させます。
```
position.x = wrapf(position.x, 0, screen_size.x)
position.y = wrapf(position.y, 0, screen_size.y)
```

画面への入力／出口

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

課題

オブジェクトが画面内に表示、また非表示になるタイミングを検知したい。

解決策

この目的のためのノードが用意されています。VisibleOnScreenNotifier2D。このノードをオブジェクトにアタッチすれば、screen_enteredシグナルとscreen_exitedシグナルを利用可能になります。 *

例 1

発射後に直線軌道で移動する投射物を考えてみます。継続的に射撃を続けると、画面上から外れた物体であってもエンジンが追跡すべき対象が大量に発生し、結果的にラグの原因となる可能性があります。

以下に発射体の移動コードを示します。

extends Area2D

var velocity = Vector2(500, 0)

func _process(delta):
 position += velocity * delta

プロジェクトイルが画面外に移動した際に自動的に削除されるようにするには、VisibleOnScreenNotifier2Dを追加し、そのscreen_exitedシグナルを接続してください。

func _on_VisibleOnScreenNotifier2D_screen_exited():
 queue_free()

例2

敵キャラクターがいて、経路に沿って移動したりアニメーションを再生したりするなどの動作を行います。大規模なマップで多数の敵が存在する場合、同時に画面上に表示されるのはそのうちのわずか数人だけです。VisibleOnScreenNotifier2D を使用することで、オフスクリーン状態の間だけ敵の動作を無効化できます。

コードの一部：

var active = false

func _process(delta):
 if active:
 play_animation()
 move()

func _on_VisibleOnScreenNotifier2D_screen_entered():
 active = true

func _on_VisibleOnScreenNotifier2D_screen_exited():
 active = false

見下ろし型での移動

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

課題

2D見下ろし方式のゲームを開発しており、キャラクターの動きを制御が必要です。

解決策

ここでは、以下の入力アクションが定義されているとします。

アクション	キー
`"up"`	W,↑
`"down"`	S,↓
`"right"`	D,→
`"left"`	A,←
`"click"`	マウスボタン1

またここでは、CharacterBody2D ノードを使用していると想定します。

この問題は、求める行動の種類に応じてさまざまな方法で解決できます。

その1：8方向移動方式

このシナリオでは、プレイヤーは4方向キー（斜め移動含む）を使って操作します。

extends CharacterBody2D

var speed = 400 # speed in pixels/sec

func _physics_process(delta):
 var direction = Input.get_vector("left", "right", "up", "down")
 velocity = direction * speed

 move_and_slide()

その2: 回転と移動を組み合わせる場合

この操作方法では、左右でキャラクターを回転させ、上下で向いている方向に前進・後退します。これは「アステロイド風」と呼ばれる伝統的な操作方式です。

extends CharacterBody2D

var speed = 400 # move speed in pixels/sec
var rotation_speed = 1.5 # turning speed in radians/sec

func _physics_process(delta):
 var move_input = Input.get_axis("down", "up")
 var rotation_direction = Input.get_axis("left", "right")
 velocity = transform.x * move_input * speed
 rotation += rotation_direction * rotation_speed * delta
 move_and_slide()

メモ

Godotでは角度 0 度をx軸に沿っていることを意味します。これは、ノードの前方方向（transform.x）が右向きであることを示しています。キャラクタースプライトも同様に、右側に向かって描画されるように設定してください。

分割画面マルチプレイヤー

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

ℹ️ 留意事項

はじめに

このデモでは、見下ろし型の迷路ゲームを例に、ローカルマルチプレイヤーゲームを考えます。このゲームでは2人のプレイヤーが参加し、一方は矢印キー、もう一方はWASDキーで操作します。これは問題ありませんが、もしゲーム世界全体が1画面に収められる程度の大きさであれば、特に問題はありません。しかし、マップが非常に広い場合、両プレイヤーを個別に表示する「分割画面」ビューが必要になるでしょう。

また、ミニマップ表示をすばやく設定する方法についても解説します。

ゲーム設定

ゲーム世界のセットアップに多くの時間をかけるつもりはありません。登場する2人のキャラクターはシンプルな8方向移動を実装したCharacterBody2D オブジェクトです。

メモ

このパーツのセットアップでお困りの場合は、公式Godotドキュメントの以下のセクションをご覧ください: 2D移動の概要。

各操作は、プロジェクト設定の[インプットマップ]セクションで個別に設定されています。「right_1」は右矢印キー、「right_2」はDキーなどです。このように命名することで、コード内で以下の構文を使用でき、開発効率を大幅に向上させられます。

@export var id = 0

func get_input():
 velocity = Vector2()
 if Input.is_action_pressed('right_%s' % id):
 velocity.x += 1
 # etc.

この方法であれば、キャラクターが同じ移動スクリプトを使用できます。各プレイヤーに適切な値を id として割り当てるだけです。

以下の手順に従って、2つのプレイヤーを TileMap を含む「World」シーンに追加してください。

ご希望であれば、ワールドが既に設定済みの開始プロジェクトをこちらからダウンロードできます。

splitscreen_start.zip

このマップはゲーム画面よりもはるかに大きいことに注意してください。ただ、それ以外の点ではすべて正常に動作します。このようにゲームの「World」を個別に設定することで、ビューポートの設定が格段に容易になり、より柔軟に扱えるようになります。

ビューポート、カメラ、およびワールドについて

まず、2つのビューポートを含む新しいシーンを作成します。ルートノードとして使用するノードを作成します。通常、Nodeを使用します。このノードには独自のプロパティが何もないため（単にシーンの他の要素を保持するためのものです）、使い勝手が良いからです。

各ビューポートノード（Viewport）には位置情報が含まれません（Node3DやNode2Dを継承していません）。ここでは、各ビューポートを管理するためにViewportContainerを使用します。このコンテナはControlノードの一種です。それらを横並びに配置するためには、HBoxContainerを使います。

HBoxContainerの配置を「中央」に設定し、2つのビューポート間に小さな隙間を設けるには、_カスタム定数/間隔_に 5 を設定してください。「Layout(レイアウト)」メニューでは「Full Rect」を選択します。

次に、2つのViewportContainerを子要素として追加し、それぞれに2と1という名前を付けます（これらは表示するプレイヤーに対応するためです）。両方のコンテナについて Size Flags を「Fill, Expand」に設定してください。これにより、各コンテナが画面の半分を埋めるように拡大されます。さらに、 Stretch プロパティもチェックすることで、Viewportが自動的にコンテナのサイズに合わせて調整されるようになります。

グリッドベースの移動

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

ℹ️ 留意事項

課題

グリッド状に移動する2Dキャラクターが必要です。

解決策

グリッド制またはタイルベースの移動方式では、キャラクターの位置が制限されます。特定のタイル上にのみ立つことができ、2枚のタイルの間に立ち続けることはできません。

キャラクター設定

以下がプレイヤーで使用するノードです。

Area2D (“プレイヤー”): Area2D を使用することで、オブジェクトのピックアップや敵との衝突判定が可能になります。
- Sprite2D: ここではスプライトシートを使用できます（アニメーション設定は後述します）。
- CollisionShape2D: ヒットボックスが大きすぎないように注意してください。プレイヤーがタイルの中心に立つため、オーバーラップ判定も中央から行われます。
- RayCast2D: 指定された方向への移動が可能かどうかを確認する際に使われます。
- AnimationPlayer: キャラクターの歩行アニメーションを再生に使います。

インプットマップに操作を追加してください。この例では「上」「下」「左」「右」を使用します。

基本的な動き

まず、アニメーションや補間なしで、タイル単位の移動設定から始めてください。

extends Area2D

var tile_size = 64
var inputs = {"right": Vector2.RIGHT,
 "left": Vector2.LEFT,
 "up": Vector2.UP,
 "down": Vector2.DOWN}

tile_sizeにはタイルのサイズに合わせて適切な値を設定してください。大規模なプロジェクトでは、メインシーンからプレイヤーインスタンスを生成する際にこを設定します。以下の例では 64×64ピクセルのタイルを使用しています。

inputs Dictonaryは入力アクション名と方向ベクトルを対応付けます。ここでの名前とインプットマップでの表記が完全一致していることを確認してくください（大文字小文字の区別に注意！）。

func _ready():
 position = position.snapped(Vector2.ONE * tile_size)
 position += Vector2.ONE * tile_size/2

snapped() 関数は位置をタイルの増分に最も近い値に「丸め」ます。さらに、半タイル量を追加することで、プレイヤーが必ずタイル中心に配置されるようになります。

func _unhandled_input(event):
 for dir in inputs.keys():
 if event.is_action_pressed(dir):
 move(dir)

func move(dir):
 position += inputs[dir] * tile_size

以下が実際の移動処理コードです。入力イベントが発生すると、4方向をチェックし、該当する方向を特定した後にmove()関数に渡して位置を変更します。

投射物の発射

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

ℹ️ 留意事項

課題

プレイヤー／モブなどから投射物を発射させたい。

解決策

弾丸の設定

まず、インスタンス化可能な「弾丸」オブジェクトを設定します。使用するノードは以下の通りです。

 Area2D: Bullet
 Sprite2D
 CollisionShape2D

Sprite2Dのテクスチャは、好きな画像を使用できます。以下は例です。

ノードの設定とスプライトおよび衝突判定形状を構成します。テクスチャが上向きに配置されている場合（上記例のように）は、Sprite ノードを 90° 回転させて右方向に向け、親オブジェクトの「前方」方向に一致するように調整してください。

スクリプトを追加し、Area2Dのbody_enteredシグナルに接続してください。

extends Area2D

var speed = 750

func _physics_process(delta):
 position += transform.x * speed * delta

func _on_Bullet_body_entered(body):
 if body.is_in_group("mobs"):
 body.queue_free()
 queue_free()

この例では、オブジェクトが何かを衝突した場合、即座に弾丸を除去します。また、「mobs」グループにタグ付けされた対象物もすべて削除します。

射撃

弾丸の出現位置を設定が必要です。Marker2Dコンポーネントを追加し、弾丸を出現させたい場所に配置してください。以下は具体例で、銃身の先端に設置しています。「Muzzle」という名前を付けています。

「プレイヤーが回転するにつれ、Muzzleのtransformは銃に対して常に同じ向きを保つことに注目してください。これは弾丸をスポーンさせる際に非常に便利です。変換行列を使用することで、適切な位置と方向を簡単に取得できるからです。新しい弾丸のtransformは、単にMuzzleのものと等しく設定するだけで済みます。

ヒント

この手法は「回転・移動」スタイルに限らず、あらゆる文字タイプに適用できます。単に、弾丸を表示させたい位置に Marker2D タグを挿入するだけで済みます。

キャラクタースクリプト内で、インスタンス化用の弾丸シーンを保持する変数を追加してください。

@export var Bullet : PackedScene

入力アクションが定義されているか確認してください。

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

これでshoot()関数内では、弾丸インスタンスを生成しツリーに追加できます。よくあるミスとして、プレイヤーノードの子要素として直接追加してしまうケースがあります

func shoot():
 var b = Bullet.instantiate()
 add_child(b)
 b.transform = $Muzzle.transform

問題は、弾丸がプレイヤーの子オブジェクトであるため、プレイヤーが移動または回転した際に影響を受ける点です。

車のステアリング操作

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

課題

2D見下ろし方式カーコントローラーを作成したい。

解決策

この問題に取り組む際、初心者はしばしば実際の車とはかけ離れた挙動のゲームを作ってしまいがちです。アマチュアが作ったカーゲームでよく見られる失敗例をご紹介します。

自動車は中心軸を中心に旋回するものではありません。別の言い方をすれば、後輪が左右に滑ることはありません。（ドリフト走行時はこの限りではないが、その点については後述します）
自動車は動いている時にのみ方向転換が可能で、その場で回転することはできません。
自動車は列車ではありません。レールに縛られていません。高速で曲がる際にはある程度の横滑り（ドリフト）が伴うべきです。

2Dカー物理の実装には様々なアプローチ方法があり、主に「リアル志向」か「アーケードスタイル」かによって選択が分かれます。ここでは、リアリティよりもアクション性を優先する「アーケードレベル」の現実感を追求していきます。

メモ

以下の方法は、こちらのアルゴリズムに基づいています。 https://engineeringdotnet.blogspot.com/2010/04/simple-2d-car-physics-in-games.html

以下のレシピは5つのセクションに分かれており、それぞれが車の異なる動作要素を追加してください。必要に応じて自由に組み合わせてご使用ください。

シーン設定

以下が車シーンの設定内容です。

 CharacterBody2D
 Sprite2D
 CollisionShape2D
 Camera2D

このデモでは、Kenneyのレーシングパックのアートワークを使用します。CapsuleShape2Dは衝突判定に最適な形状です。これにより、車が障害物に引っかかるような鋭い角を防ぐことができます。

以下の4つの入力操作も使用します。「右旋回」「左旋回」「加速」「ブレーキ」。お好みのキー割り当てを設定してください。

その1：動き

最初のステップは、前述のアルゴリズムに基づいて動作をコーディングすることです。

以下の変数から始めてください。

extends CharacterBody2D

var wheel_base = 70 # Distance from front to rear wheel
var steering_angle = 15 # Amount that front wheel turns, in degrees

var steer_direction

wheelbase をスプライトに適した値に設定してください。

steer_direction には車輪の回転量が設定されます。

メモ

キーボード操作を使用している場合、ターンはオン／オフの二択になります。アナログジョイスティックを使用する場合は、代わりにスティックの移動距離に応じてこの値を調整できます。

func _physics_process(delta):
 get_input()
 calculate_steering(delta)
 move_and_slide()

各フレームでは、入力のチェックとステアリング計算が必要です。その後、算出された速度を move_and_slide() 関数に渡します。これら2つの関数については次に定義します。

func get_input():
 var turn = Input.get_axis("steer_left", "steer_right")
 steer_direction = turn * deg_to_rad(steering_angle)
 velocity = Vector2.ZERO
 if Input.is_action_pressed("accelerate"):
 velocity = transform.x * 500

ここではユーザー入力を確認し、移動速度を設定します。注意：速度500は一時的なもので、動きのテスト用です。これについては次のセクションで対処します。

8方向移動・アニメーション

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

課題

2Dキャラクターが必要です。アニメーションを含む8方向移動が可能なものが求められます。

解決策

この例では、Isometric: Mini-Crusaderを使用します。これには待機、歩行、攻撃など8方向に対応したアニメーションが含まれています。

アニメーションはフォルダ単位で整理されており、各フレームごとに個別の画像が用意されています。ここではAnimatedSprite2Dを使用し、各アニメーションにはその動作方向に基づいて名前を付けます。例えば、右向きで時計回りに移動するidle0から、同じく時計回りに動くidle7までといった具合です。

キャラクターが移動する際には、動きの方向に基づいて適切なアニメーションを選択します。

マウスを使って移動します。キャラクターは常にマウスの方向を向き、マウスボタンをクリックするとその方向に走り出します。

どのアニメーションを再生するか選択するためには、マウスの方向を取得し、それを同じ範囲（0-7）にマッピングする必要があります。get_local_mouse_position()を使用することで、キャラクターに対するマウスカーソルの位置を取得できます。次にsnappedf()関数を使用して、マウスベクトルの角度を最も近い45度間隔（PI/4ラジアン）にスナップさせると、以下の結果が得られます。

各値を 45°（PI/4 ラジアン）で除算すると、以下のようになります。

最終的には、wrapi()関数を使用して結果の範囲を0-7にマッピングする必要があります。これにより、正しい値が得られます。この値をアニメーション名の末尾に追加します（“idle”、“run"など）。こうすることで、正しく動作するアニメーションが完成します。

func _physics_process(delta):
 current_animation = "idle"

 var mouse = get_local_mouse_position()
 angle = snappedf(mouse.angle(), PI/4) / (PI/4)
 angle = wrapi(int(angle), 0, 8)

 if Input.is_action_pressed("left_mouse") and mouse.length() > 10:
 current_animation = "run"
 velocity = mouse.normalized() * speed
 move_and_slide()
 $AnimatedSprite2D.animation = current_animation + str(a)

動作テストを行ったところ、以下の現象が確認されました：

キーボード入力

マウスの代わりにキーボード操作を使用している場合、押されているキーに基づいて移動角度を取得できます。それ以外の手順は同様の方法で進行します。

func _process(delta):
 current_animation = "idle"
 var input_dir = Input.get_vector("left", "right", "up", "down")
 if input_dir.length() != 0:
 angle = input_dir.angle() / (PI/4)
 angle = wrapi(int(a), 0, 8)
 current_animation = "run"
 velocity = input_dir * speed
 move_and_slide()
 $AnimatedSprite2D.play(current_animation + str(angle))

プロジェクトのダウンロード

プロジェクトコードはこちらからダウンロードできます。https://github.com/godotrecipes/8_direction_animation

Yソートを使う

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

課題

多くの2Dゲームでは「3/4視点」と呼ばれるアングルが採用されており、カメラが少し斜め上から見下ろしているような構図になっています。これを実現するためには、より「奥」にあるオブジェクトを先に描画し、手前のオブジェクトの後ろに配置が必要です。実際には、これは「y軸ソート」（描画順序をオブジェクトのy座標に紐付けること）を意味します。画面上の高い位置にあるものほど遠くに位置するため、レンダリング順序もそれに応じて低く設定されることになります。

以下のような問題が発生します。

以下のオブジェクトはデフォルトのレンダリング順序（ツリー順）で描画されています。シーンツリー上での配置は以下の通りです。

解決策

Godotにはレンダリング順序を変更する組み込みオプションが用意されています。任意のCanvasItemノード（Node2DまたはControl）に対して、Y軸ソート有効化 プロパティを有効にできます。この機能が有効になると、すべての子ノードがY軸に沿って並べ替えられます。

上記の例では、TileMapノード上でプロパティを有効にできます。ただし、まだ解決すべき問題が残っています。

ドロー順序は各オブジェクトの y 座標に基づいています。デフォルトではこれはオブジェクトの中心座標となります。

オブジェクトが「地面」の上に配置されているように見せたい場合、オブジェクトの position プロパティがスプライトの最下部位置と一致するようにオフセットすることで解決できます。

だいぶ良くなりました。

プロジェクトのダウンロード

プロジェクトのサンプルコード: https://github.com/godotrecipes/using_ysort

タイルマップ：自動タイルを使用

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

ℹ️ 留意事項

課題

TileMapを使用し、自動タイル機能を活用してレベル作成を効率化したいです。

解決策

本デモでは、以下のタイルセットを使用します。

メモ

これらのタイルはKenney氏の『Topdown Shooter』アートパックに含まれており、こちらから入手できます。https://kenney.nl/assets/top-down-shooter

これらのタイルから地図を作成する場合、1枚ずつ手動で配置していくと非常に手間がかかります。角や交差点、終点部分を合わせるために、常に異なるタイルを切り替えながら作業することになるからです。

自動タイル機能を使用すると、壁を任意の方向に自由に描画でき、アルゴリズムが正しいタイルを選択して全体をシームレスに配置します。

以下に具体例を示します。

自動タイリングの仕組みについて

使用しているタイルは 3×3（最小） のタイリング用に設計されています。単一のタイルを3×3グリッドに分割した場合を考えてみます。

タイルの「アクティブ」部分（つまり壁ではない箇所）に目印を付けることができます。

これを各タイルごとに実行すれば、コンピュータはどのタイルを隣接させても確実に互換性が確保されるようにできます。

3×3のグリッド上には、512通りの組み合わせパターンが存在します（2^9）。これらのほとんどは連続した壁を作る上で実用的ではないため、除外して構いません。実際に適切な形で壁面を覆うためには、48枚のタイルが必要であることが分かりました。これはタイルセットに用意されているものです。以下の7枚のタイルは無視することにします - 右下隅に位置する白い背景のタイルです。

タイルセットの作成方法

TileMapのプロパティにある「タイルセット」設定で「新規タイルセット」を選択し、クリックするとエディターパネルが開きます。

テクスチャを追加するには ⊞ ボタンをクリックし、上記で選択したタイルセットを選択してください。次に「新規オートタイル」を選択し、画像全体をドラッグして選択します。スナップ機能を有効にし、設定を調整する必要があるかもしれません。このタイルセットのタイルは 64x64 ピクセルで、各タイル間は 10 ピクセル間隔になっています。独自のアートワークを使用する場合は、必要な値を手動で入力してください。

オートタイルグループを構成するタイルセットを選択したので、次はビットマスクを設定する段階です。画面上部の「ビットマスク」ボタンをクリックし、各タイル上でクリックを開始してください。マスキングされた部分は赤く表示されます。作業が完了すると、以下のような状態になるはずです。

※右下のタイルは使用していないことに注意してください。

最後に、「アイコン」ボタンをクリックして、自動タイルグループのアイコンとして使用するタイルを選択してください。これが描画中にカーソル下に表示されるタイルとなります。

タイルマップに切り替えてください。正常に描画できるはずです。問題がある場合は、ビットマスクを確認し、すべてのタイルに空白部分が残っていないか確認してください。上記の画像と照合して確認してください。

2Dグリッド上での経路探索

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

課題

グリッドベースの環境があり、ナビゲーションを可能にする経路探索システムを構築したいです。

解決策

Godot は経路探索のための複数の手法を提供しています。今回のレシピでは A*(エースター) アルゴリズムを取り上げます。

A*について

A*アルゴリズムは、2点間の最短経路を求めるために広く利用されている手法です。グリッドに限らず、あらゆるグラフ構造データに適用できます。

AStarGrid2D はGodotの汎用クラス AStar2D をグリッド環境用に最適化した専用バージョンです。グリッドベースで設計されているため、個々のセルや接続関係を手動で追加する必要がなく、より高速かつ簡単にセットアップできます。

グリッドの設定

最も重要な設定決定事項は、セルのサイズとグリッド自体のサイズです。ここでは例として (64, 64) を使用しますが、ウィンドウサイズは画面上に収まるセル数を決定に使います。ただし、セルサイズが異なっても基本的な動作原理は同じです。

このコードを Node2Dに追加してください。

extends Node2D

@export var cell_size = Vector2i(64, 64)

var astar_grid = AStarGrid2D.new()
var grid_size

func _ready():
 initialize_grid()

func initialize_grid():
 grid_size = Vector2i(get_viewport_rect().size) / cell_size
 astar_grid.size = grid_size
 astar_grid.cell_size = cell_size
 astar_grid.offset = cell_size / 2
 astar_grid.update()

このコードでは、画面サイズを cell_size で割ることでグリッド全体の寸法を計算しています。これにより、AStarGrid2D オブジェクトの size プロパティを適切に設定できます。

offsetプロパティは、2点間のパスを取得する際に重要な役割を果たします。cell_size / 2を使用することで、パスはセルの角ではなく中心から計算されるようになります。

最後に、AStarGrid2Dのプロパティを設定または変更した後は必ずupdate()メソッドを呼び出す必要があります。

グリッド線の描画

本デモでは、グリッドの描画をプログラムコードで実装します。実際のゲームアプリケーションでは、通常 TileMap クラスやその他の視覚的表現を用いて世界を表現になります。

以下は、グリッドを描画するためのコード例です。

func _draw():
 draw_grid()

func draw_grid():
 for x in grid_size.x + 1:
 draw_line(Vector2(x * cell_size.x, 0),
 Vector2(x * cell_size.x, grid_size.y * cell_size.y),
 Color.DARK_GRAY, 2.0)
 for y in grid_size.y + 1:
 draw_line(Vector2(0, y * cell_size.y),
 Vector2(grid_size.x * cell_size.x, y * cell_size.y),
 Color.DARK_GRAY, 2.0)

これによりグリッドが視覚的に明確に表示されます。

アニメーションタイル(タイルマップ)

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

ℹ️ 留意事項

課題

タイルマップでアニメーションタイルを使用したい。

解決策

この問題に対処する最も直接的な方法は、AnimatedTextureリソースを使用することです。

アニメーションテクスチャの作成方法

以下の水タイルを使用して説明します。

これらの画像をダウンロードしてください。water.zip

画像ファイルをプロジェクトフォルダに解凍してください。インスペクタで「新しいリソースを作成」ボタンをクリックします。

AnimatedTextureを選択し、［フレーム］プロパティを5に設定します。各フレームごとに、対応する画像を［テクスチャ］プロパティにドラッグしてください。

アニメーション全体の速度は Fps プロパティで、各フレームごとの遅延時間は Delay Sec で個別に調整できます。

「保存」ボタンをクリックしてリソースを保存します。water_anim.tresのような名前を付けてください。

TileMapでのAnimatedTextureの使用について

AnimatedTexture が保存されたので、これでTileSetで使用できるようになります。新規または既存のTileMapを開き、その Tile Set プロパティを選択します。新しいテクスチャをTileSetに追加するには、ボタンをクリックしてください。

追加された新規テクスチャを選択し、「単一タイルとして新規作成」をクリックします。テクスチャを囲むようにボックスを描きます（「スナップ機能を有効にする」を設定すると作業が楽になります）。

これでTileMap内のタイルを選択して、他の通常のタイルと同じように描画できるようになります。

コヨーテタイム

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

課題

プラットフォームゲームのジャンプ操作に違和感があります。プレイヤーはコントロールが取りづらく、場合によっては足場に正しく飛び降りられないことがあります。

解決策

この問題を解決するには、「コヨーテタイム」と呼ばれるテクニックが有効です。これはプレイヤーにより高い操作感覚と、プラットフォームの端を移動するプロセスにおいて若干の「余裕時間」を提供します。また、プレイヤーがより自然にジャンプ操作を行えるようになります。

「コヨーテタイム」の仕組みは以下の通りです。

プレイヤーがプラットフォームの端から離れた場合、数フレームの間は依然として地面にいるかのようにジャンプできます。

そもそもなぜコヨーテ？

「コヨーテタイム」という名称は、地面を見下ろすまで落下しないカートゥーンキャラクターのコヨーテに由来しています。

この機能を既存のプラットフォームキャラクターに追加してください。設定方法についてはプラットフォームキャラクターを参照してください。

タイミング処理に関しては、CoyoteTimerという名前のTimerノードを追加し、設定をOne Shotにします。

コヨーテタイム管理に必要な新しい変数を用意しましょう。

var coyote_frames = 6 # How many in-air frames to allow jumping
var coyote = false # Track whether we're in coyote time or not
var last_floor = false # Last frame's on-floor state

フレーム単位で時間を設定しているため、_ready()内でTimerの長さを設定する際にも次のように変換できます。

$CoyoteTimer.wait_time = coyote_frames / 60.0

各フレームで現在の is_on_floor() 値を保存し、次のフレームで使用するようにします。したがって、move_and_slide() の後に _physics_process() 内に以下を設定します。

 last_floor = is_on_floor()

ジャンプ入力を検知した場合、キャラクターが床にいる状態か、またはコヨーテ時間モードかどうかを確認します。

 if Input.is_action_just_pressed("jump") and (is_on_floor() or coyote):
 velocity.y = jump_speed
 jumping = true

コヨーテ状態への移行は、プレイヤーがプラットフォームの端から降りた瞬間に開始されます。これは、前回のフレームでは床の上にいたが、現在は床から離れた位置にいるということです。この条件を確認した上で、ちょうど地面から離れた時にタイマーを起動します。

 if !is_on_floor() and last_floor and !jumping:
 coyote = true
 $CoyoteTimer.start()

CoyoteTimerは以下のタイミングでコヨーテ状態の終了を通知します。

動く床

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

課題

2Dプラットフォーマーゲームには動く床が必要です。

解決策

この問題には複数のアプローチ方法があります。ここではプラットフォーム部分に AnimatableBody2D を使用し、Tween で移動させる手法を採用します。これにより、多様な動作パターンを実現しながら、必要なコード量を最小限に抑えることができます。

情報

この移動プラットフォームの実装方法は、Tweenではなく AnimationPlayer を使用することでもできます。基本的なセットアップ手順は同様ですが、代わりにTweenコードの代わりにボディの position プロパティをアニメーション化します。

セットアップ方法

まずはプラットフォームキャラクターレシピを使用して、基本的なプラットフォーマーのセットアップから始めてください。このレシピで定義されている基本移動機能は、指定されたプラットフォームと問題なく連携します。もしレシピをカスタマイズしていたり、独自の実装を使用している場合でも、動作原理は同じですのでご安心ください。

プラットフォームの作成

プラットフォームシーンには以下のノードが含まれています。

Node2D (“MovingPlatform”)：この Node2D の親ノードは、プラットフォームの「アンカー」または開始点として機能します。アニメーションでは、この親ノードを基準としてプラットフォームの 座標 を制御します。
- AnimatableBody2D：これは実際に移動するプラットフォーム本体を表します。このノードが移動対象となります。
  - Sprite2D：ここではスプライトシート、個別の画像、あるいはノードとしてタイルマップを使用することもできます。
  - CollisionShape2D：ヒットボックスの大きさが大きすぎると、プレイヤーがプラットフォームの端から「浮いて」見える原因になるので注意してください。

Sprite2Dのテクスチャと衝突形状を適切に設定してください。AnimatableBody2Dでは、Sync to Physics(物理演算と同期) プロパティを「オン」に設定します。コードでボディを動かしているため、これにより物理演算ステップ時に正しく移動され、プレイヤーや他の物理オブジェクトと連動した動きを維持できます。

次にルートノードのNode2Dにスクリプトを追加してください。

extends Node2D

@export var offset = Vector2(0, -320)
@export var duration = 5.0

func _ready():
 start_tween()

func start_tween():
 var tween = get_tree().create_tween().set_process_mode(Tween.TWEEN_PROCESS_PHYSICS)
 tween.set_loops().set_parallel(false)
 tween.tween_property($AnimatableBody2d, "position", offset, duration / 2)
 tween.tween_property($AnimatableBody2d, "position", Vector2.ZERO, duration / 2)

以下の機能をスムーズに動作させるために、Twien のオプションを活用しています。

set_process_mode()：物理演算処理段階でのみ移動が行われるようにします。
set_loops()：Tween再生を繰り返す設定です。
set_parallel(false)：デフォルトでは、すべての tween_property() 変更が同時に実行されます。これを無効にすると、2つの動作が順次行われます。オフセットの一方端に移動した後、開始位置に戻るという流れになります。

翻訳された2つのプロパティを使用することで、プラットフォームの移動を調整できます。offsetを設定してTweenが開始点から相対的に移動する位置を指定し、durationを設定してサイクルを完了するまでの時間を決定します。

自分のレベル／ワールドにプラットフォームを追加し、実際に試してみてください。

プロジェクトのダウンロード

プロジェクトコードはこちらからダウンロードできます。 https://github.com/godotrecipes/2d_moving_platforms

マルチターゲットカメラ

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

課題

複数のオブジェクトを同時に画面上に表示し続けるために、移動・ズーム機能を備えたダイナミックなカメラシステムを作りたいです。

2人用ゲームで両プレイヤーを画面内に表示したまま、互いに近づき離れていく様子を表現する場合などです。

解決策

シングルプレイヤーモードでは、カメラをプレイヤーに追従させるのが一般的な手法です。しかし、ここでは2人以上のプレイヤーやその他の重要オブジェクトが常に画面に表示され続ける必要があるため、同様の方法は適用できません。

以下の3つの機能をカメラに実装が必要です。

ターゲットを任意の数だけ追加/削除可能
カメラの位置をターゲット群の中心点に固定表示
すべてのターゲットが画面内に収まるようズームレベルを調整

以下の手順で新規シーンを作成し、Camera2Dコンポーネントを追加してスクリプトを割り当てます。作業が完了したら、このカメラをゲームに統合します。

スクリプトの動作原理を分解して説明します。

メモ

スクリプトの全文は記事の末尾で確認できます。

以下にスクリプトの開始部分を示します。

extends Camera2D

@export var move_speed = 30 # camera position lerp speed
@export var zoom_speed = 3.0 # camera zoom lerp speed
@export var min_zoom = 5.0 # camera won't zoom closer than this
@export var max_zoom = 0.5 # camera won't zoom farther than this
@export var margin = Vector2(400, 200) # include some buffer area around targets

var targets = [] # Array of targets to be tracked.

@onready var screen_size = get_viewport_rect().size

これらの設定によりカメラ動作を調整できるようになります。すべてのカメラ変更を lerp() で補間処理するため、移動速度やズーム速度を低く設定した場合、突然の変化に対してカメラが「追いつく」まで若干の遅延が生じます。

Line2D衝突判定

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

課題

衝突検出を Line2D に対して行いたい。

解決策

ノード設定

以下のノードをシーンに追加し、必要に応じてラインを描いてください。

 Line2D
 StaticBody2D

まだボディに衝突形状を追加しないでください！

メモ

衝突ではなく線との重複を検出したい場合は、代わりに Area2D を使用することもできます。

次に、ボディに衝突形状を追加が必要です。以下の2つのオプションがあります。

その1：`SegmentShape2D`の使用

SegmentShape2D は線分衝突形状です。この手法の目的は、直線上の各点ペアに対して個別のセグメント衝突を作成することです。

extends Line2D

func _ready():
 for i in points.size() - 1:
 var new_shape = CollisionShape2D.new()
 $StaticBody2D.add_child(new_shape)
 var segment = SegmentShape2D.new()
 segment.a = points[i]
 segment.b = points[i + 1]
 new_shape.shape = segment

その2：`RectangleShape2D`を使用する場合

SegmentShape2D は幅成分を持たないため、線の衝突判定に厚みが必要な場合には、代わりに矩形の衝突判定を使用することをオススメします。

extends Line2D

func _ready():
 for i in points.size() - 1:
 var new_shape = CollisionShape2D.new()
 $StaticBody2D.add_child(new_shape)
 var rect = RectangleShape2D.new()
 new_shape.position = (points[i] + points[i + 1]) / 2
 new_shape.rotation = points[i].direction_to(points[i + 1]).angle()
 var length = points[i].distance_to(points[i + 1])
 rect.extents = Vector2(length / 2, width / 2)
 new_shape.shape = rect

プロジェクトのダウンロード

プロジェクトのサンプルコードはこちらからダウンロードできます。https://github.com/godotrecipes/line2d_collision

タッチスクリーンカメラ

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

ℹ️ 留意事項

課題

モバイルゲームには、タッチ操作対応の2Dカメラが必要です。

解決策

このレシピでは、複数のタッチ操作に対応した汎用2Dカメラを作成します。

ドラッグで画面移動
2本指でピンチイン/アウトすると拡大縮小できます

設定手順

当社のカメラは内蔵ノードを拡張するため、新しいシーンに Camera2D を追加し、「TouchCamera」と名前を付けてください。保存後、スクリプトをアタッチします。

以下に必要となる変数を示します。

extends Camera2D

@export var target: NodePath

# Optional: export these properties for convenient editing.
var target_return_enabled = true
var target_return_rate = 0.02
var min_zoom = 0.5
var max_zoom = 2
var zoom_sensitivity = 10
var zoom_speed = 0.05

var events = {}
var last_drag_distance = 0

もしtargetが設定されている場合、カメラはその対象物を追いかける、または自動的にその位置に戻ることができます。その他のカメラ動作を制御するプロパティ：

target_return_enabled - これを true に設定すると、ドラッグ後にカメラは自動的にターゲット位置に復帰します。
target_return_rate - カメラがターゲット位置に戻る速度を調整します。
min_zoom / max_zoom - ズームの最小/最大倍率制限値を設定します。
zoom_sensitivity - ピンチ操作によるズーム感度を設定します - これは「ズーム動作」が開始されるために必要なピクセル単位の動きを指定します。
zoom_speed - ズーム操作をより滑らかに実行するためのパラメータです。

以下のプロパティも export することで、インスペクターで調整できるようになります。

弾道銃弾

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

ℹ️ 留意事項

課題

ご希望の2D弾は弧を描くように移動したり、弾道曲線を描いたりする仕様でしょうか？

解決策

この問題に対する解決策の一つとして、RigidBody2D コンポーネントを使用することが考えられます。組み込みの物理演算システムにより、発射後も重力によって自動的に地球へ引き戻されるよう設定できます。

ただし、2Dシューティングゲームのレシピで解説されているように、Area2Dは単純な弾丸やその他の投射物に非常に適しています。衝突判定やバウンド、その他の物理挙動を必要としない場合には特に便利です。弾道計算自体は難しくないため、物理エンジンの助けを借りるほどでもありません。

弾丸の設定

- Bullet (Area2D)
 - Sprite
 - CollisionShape2D

以下の方法で利用できます。Area2D の gravity プロパティを設定します。初期テストでは値を 150 に設定します。

extends Area2D

var velocity = Vector2(350, 0)


func _process(delta):
 velocity.y += gravity * delta
 position += velocity * delta
 rotation = velocity.angle()


func _on_BallisticBullet_body_entered(body):
 queue_free()

ここで必要なのは運動方程式を適用するだけです。velocity の初期値は単なるテスト用です。ブレットシーンを実行してください。

現在の射撃オブジェクトでは、弾丸インスタンスを作成し、初期プロパティを設定できます。以下のいずれかの射撃処理関数／入力ハンドラに実装してください。

@export var muzzle_velocity = 350
@export var gravity = 250

func shoot():
 var b = Bullet.instantiate()
 owner.add_child(b)
 b.transform = $Barrel/Marker2D.global_transform
 b.velocity = b.transform.x * muzzle_velocity
 b.gravity = gravity

以下に実際の使用例をご紹介します。

軌跡を描画

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

ℹ️ 留意事項

課題

戦車のような弾道射撃の軌道を描きたい。

解決策

設定手順

この例では、以下のレシピから「弾道弾丸」を使用します。

弾道弾の実装方法

そして、以下のように設定されたタンクの配置です。ここでは弾丸が生成される箇所を示すためにの Marker2D 要素を使用しています。

タンクのスクリプトでは、弾丸を以下のようにインスタンス化しています。

func _unhandled_input(event):
 if event.is_action_released("shoot") and can_shoot:
 var b = Bullet.instantiate()
 owner.add_child(b)
 b.transform = $Barrel/Muzzle.global_transform
 b.velocity = b.transform.x * muzzle_velocity
 b.gravity = gravity
 can_shoot = false

このインスタンスでは弾丸オブジェクトを作成し、「World」ノード（戦車のowner）の下に子要素として追加し、初期プロパティを設定します。なお、この例では重力定義に戦車を利用していますが、これは単なるデモンストレーション用です。実際のプロジェクトでは、グローバルな値を使用する方が望ましいでしょう。

以下に、初期設定の動作例をご紹介します。

ライン設定

メインシーン内（タンクと地面を含む部分）に、Line2D を追加しました。これが軌跡を描画するための要素となります。

ラインの見た目を改善するため、幅を15に設定し、すべての角処理オプションを「丸み」に変更しました。さらに、 Fill(塗りつぶし) セクションにGradient(グラデーション)を追加しました。

線を引くこと

これで線を引く準備が整いました。目標は、投影された軌道に沿って移動しながら、進行状況に応じて線に点を追加していくことです。発射時の初速度と弾丸が使用する重力がわかっているので、同じ計算式を適用できます。

@onready var tank = $Tank
@onready var muzzle = $Tank/Barrel/Muzzle
@onready var line = $Line2D
var max_points = 250

func update_trajectory(delta):
 line.clear_points()
 var pos = muzzle.global_position
 var vel = muzzle.global_transform.x * tank.muzzle_velocity
 for i in max_points:
 line.add_point(pos)
 vel.y += tank.gravity * delta
 pos += vel * delta
 if pos.y > $Ground.position.y - 25:
 break

func _process(delta):
 if Input.is_action_pressed("shoot"):
 line.show()
 update_trajectory(delta)

func _on_Bullet_exploded(pos):
 tank.can_shoot = true
 line.hide()

max_pointsでラインに追加するポイント数の上限を設定します。update_trajectory()関数では、タンクから弾丸の初期位置と速度を取得します（この例では重力もタンク内で定義されています）。その後、これらの点を繰り返し処理し、各「ステップ」でポジションを、1フレーム中に弾丸が移動する量と同じだけ移動させます。

2D on Godot 4 レシピ

タイルマップ：タイルを検出する

課題

解決策

関連レシピ

この動画が気に入ったら？

プラットフォームキャラクター

課題

解決策

画面ループ

課題

解決策

画面への入力／出口

課題

解決策

例 1

例2

見下ろし型での移動

課題

解決策

その1：8方向移動方式

その2: 回転と移動を組み合わせる場合

分割画面マルチプレイヤー

はじめに

ゲーム設定

ビューポート、カメラ、およびワールドについて

グリッドベースの移動

課題

解決策

キャラクター設定

基本的な動き

投射物の発射

課題

解決策

弾丸の設定

射撃

車のステアリング操作

課題

解決策

シーン設定

その1：動き

8方向移動・アニメーション

課題

解決策

キーボード入力

プロジェクトのダウンロード

Yソートを使う

課題

解決策

プロジェクトのダウンロード

タイルマップ：自動タイルを使用

課題

解決策

自動タイリングの仕組みについて

タイルセットの作成方法

2Dグリッド上での経路探索

課題

解決策

グリッドの設定

グリッド線の描画

アニメーションタイル(タイルマップ)

課題

解決策

アニメーションテクスチャの作成方法

TileMapでのAnimatedTextureの使用について

関連するレシピ

コヨーテタイム

課題

解決策

動く床

課題

解決策

セットアップ方法

プラットフォームの作成

プロジェクトのダウンロード

マルチターゲットカメラ

課題

解決策

Line2D衝突判定

課題

その1：`SegmentShape2D`の使用

その2：`RectangleShape2D`を使用する場合