【Godot Engine】フラッピーバードを作るチュートリアル (Part.2)
概要
フラッピーバードを作るチュートリアルの続きとなります。
前回の記事はこちらから
プレイヤーを作成する
背景が表示できたので、次はプレイヤーを作成します。
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 スクリプトがアタッチされます。
スクリプトには以下のように記述します。
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つです。
- 画面上の「Script」をクリックする
- スクリプトをアタッチしているノードのスクリプトアイコンをクリックする
スクリプトを開いたら、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)
行頭に「＋」がついていて、色が変化している行が追加した行となります。
では実行して、画面の上下からはみ出ないことを確認します。
次回
第三回に続きます
Discussion
バージョンが上がり、仕様が変更されたようですので、補足記事を書きました