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

概要

フラッピーバードを作るチュートリアルの続きとなります。

前回の記事はこちらから
https://zenn.dev/syun77/articles/8adb3d11ace66f

プレイヤーを作成する

背景が表示できたので、次はプレイヤーを作成します。
Mainシーンのとなりにある「＋」をクリックします。

すると、空のシーンが作られるので「＋その他のノード」を選びます。

KinematicBody2D を選んで「作成」ボタンをクリックします。

すると KinematicBody2Dノードが作成されるので、ノードの名前を「Player」に変更します。

名前を変更したら、Ctrl+S (Cmd+S) でシーンを保存します。
名前はそのまま「Player.tscn」で保存します。

プレイヤー画像の登録

以下のプレイヤー画像を "player.png" として保存し、プロジェクトに追加します。

この画像は、スプライトシートと呼ばれる 等間隔でパターンアニメーションとなる画像です。

これをキャンバスにドラッグ＆ドラックします。

すると playerという名前で Spriteノードが作成されます。
"player" だとルートノードの "Player" と名前が似ているので、わかりやすいように 「sprite」にリネームしておきます。

そして、インスペクタから Sprite > Animation > Hframes の値を「4」に変更します。

するとプレイヤー画像が正しく表示されます。

これはHframes が横方向の画像のパターン数を正しい値「4」に指定したためとなります。
Frame の値を切り替えると、パターンの変化を確認できます。

コリジョンの設定

Playerノードを右クリックして、「＋子ノードを追加」を選びます。

CollisionShape2Dを選んで「作成」ボタンをクリックします。

インスペクタから CollisionShape2D > Shape > [空]をクリックします。
すると割り当てる Shape を選択するドロップダウンが表示されるので、「新規 CircleShape2D」を選びます。

キャンバスの原点に円形のコリジョンが追加されました。

ここでプレイヤーの位置が原点にない場合は、spriteノードを選択して、Node2D > Transform > Positionにある回転アイコンをクリックして、位置をリセットして原点(0, 0)に移動させます。


SpriteとCollisionShape2Dの中心が一緒になりました。

spriteノードの位置が調整できたら、CollsionShape2Dノードを選択します。

そしてキャンバスの薄い円をドラッグして、Spriteを覆うように広げます。

ジャンプの実装

プレイヤーのジャンプ処理を実装します。
Playerノードを選択し、スクリプト追加アイコンをクリックします。

するとアタッチするスクリプトの設定ダイアログが表示されます。

とくに変更はないので、そのまま「作成」をクリックします。

するとPlayerノードに Player.gd スクリプトがアタッチされます。
スクリプトには以下のように記述します。

Player.gd

extends KinematicBody2D

# 重力
const GRAVITY_POWER := 1000

# ジャンプ力
const JUMP_POWER := -400

# 移動速度
var velocity := Vector2()

func _process(delta):
	# 重力を加算
	velocity.y += GRAVITY_POWER * delta
	
	if Input.is_action_just_pressed("ui_accept"):
		# Spaceキーでジャンプ処理
		velocity.y = JUMP_POWER

	# 移動処理を行う
	move_and_collide(velocity * delta)

記述できたら、右上の「シーンを実行」アイコンをクリックします。

これは現在選択しているシーン（ここでは Playerシーン）を実行するボタンとなります。
実行すると、画面の左端からプレイヤーが落下して画面外に消えていきます。

これは出現位置を画面の左上（原点 (0, 0)) にしているためとなります。
これだと確認がしづらいので、プレイヤーを移動させます。
上の方にある「2Dモード」に切り替えるボタンをクリックします。

これでプレイヤーの位置を動かせる……と思いきや、ドラッグすると、子ノードの CollisionShape2D を選択してしまいます。

これはデフォルトではキャンバスのマウス操作は「子ノードを優先して選択」するためとなります。
子ノードを選ばないようにするためには、「子ノードを選択しない」アイコンをクリックします。

これで、Playerノードを移動させることができるようになります。

では、実行して動作確認です。
右上の「シーンを実行」アイコンをクリックします。

Spaceキー でジャンプできることを確認します。

画面外に出ないようにする

プレイヤーを画面外に出ないようにします。
スクリプトを編集するために、スクリプトモードへ表示を切り替えます。
2Dモードからスクリプトモードへの変更方法は以下の2つです。

1. 画面上の「Script」をクリックする
2. スクリプトをアタッチしているノードのスクリプトアイコンをクリックする

スクリプトを開いたら、Player.gd を以下のように修正します。

Player.gd

extends KinematicBody2D

# 重力
const GRAVITY_POWER := 1000

# ジャンプ力
const JUMP_POWER := -400

# 移動速度
var velocity := Vector2()

func _process(delta):
	# 重力を加算
	velocity.y += GRAVITY_POWER * delta
	
	if Input.is_action_just_pressed("ui_accept"):
		# Spaceキーでジャンプ処理
		velocity.y = JUMP_POWER

+	if position.y < 0:
+		# 画面上にはみ出さないようにする
+		velocity.y = 100
		
+	if position.y > 600-64:
+		# 画面下に落ちないようにオートジャンプ
+		velocity.y = JUMP_POWER

	# 移動処理を行う
	move_and_collide(velocity * delta)

行頭に「＋」がついていて、色が変化している行が追加した行となります。
では実行して、画面の上下からはみ出ないことを確認します。

次回

第三回に続きます
https://zenn.dev/syun77/articles/3bc3387030a376