
GODOT DOCS プレイヤーを作る
前回までは、GODOTについて学習してきました。
GODOT DOCSを段階的に学ぶことで、途中でつまづくこともなく、概念や使い方を学べたので、これからGODOTを使ってみようかと思う人は、やってみては?サクサク進むのでストレスないです。
今回は、いよいよ、2Dゲームを作っていきます。
今日のハイライト

避けゲーを作る
今回作るゲームは、上下左右から飛んでくる敵を避けながらサバイバルする避けゲーです。今回は、まず、プレイヤーを作ります。

最初の設定
画面サイズの設定
このゲームは縦長用だということで、画面サイズを480x720に設定。
ストレッチのモードをcanvas_items、アスペクトをKeepに設定しました。

素材のダウンロードとインポート
今回使う素材を以下からダウンロードします。
dodge_the_creeps_2d_assets.zip
解凍して画面左下の「ファイルシステム」の「res://」の下にドラッグ&ドロップします。

プレイヤーシーンの作成
Area2Dでプレイヤーの元を作る
Area2Dのノードを作成します。
Area2Dは、当たり判定を検出できるシーンが作れます。

AnimatedSprite2Dでアニメーションを追加する
Area2Dの名前をPlayerに変更して、AnimatedSprite2Dという子ノードを追加。AnimatedSprite2Dは、アニメーション用の機能を持ったノードです。

AnimatedSprite2Dを選択して、右のインスペクターの<空>をクリックし、プルダウンメニューから、新規SpriteFramesを選択。

<空>だった所に現れた「SpriteFra」を押すと、画面下部がアニメーションウィンドウに変わるので、左下のファイルシステムのartフォルダの中から、playerGray_up1と2を、アニメーションウィンドウにドラッグ&ドロップします。
アニメーションフレームのプレイボタンを押すとキャラが動きます。

見にくいですが、青い線が画面サイズになるんですが、それに対してキャラが大きすぎるので、小さくしました。
インスペクターのTransformのScaleを0.5にしています。
CollisionShape2Dで当たり判定を追加する
Playerの子ノードにCollisionShape2Dを追加します。

CollisionShape2Dのインスペクターの<空>をクリックして、CapsuleShape2Dを選択するとコリジョンが出てくるので、キャラに合わせて大きさを調整します。

プレイヤーのコーディング
スクリプトを追加します。

まず、画面サイズや移動速度の設定をします。
@ export var speed = 400 # 速度を設定
var screen_size # 画面サイズを設定
func _ready() -> void:
screen_size = get_viewport_rect().size # 画面サイズをビューポートから取得
プロジェクト設定でキー入力を設定する
プロジェクト設定を開いて、インプットタブを押します。
新しいアクションの追加で「move_right」を入力、+を押して入力したいキーを押すと設定できます。

同様に上下左右の矢印キーを登録します。

キー入力による移動プログラム
プロジェクト設定で設定したキー入力を使って移動プログラムを書いていきます。
func _process(delta):
var velocity = Vector2.ZERO # xyの速度の初期設定を(0,0)に設定
if Input.is_action_pressed("move_right"): # 右移動
velocity.x += 1
if Input.is_action_pressed("move_left"): # 左移動
velocity.x -= 1
if Input.is_action_pressed("move_down"): # 下移動
velocity.y += 1
if Input.is_action_pressed("move_up"): # 上移動
velocity.y -= 1
if velocity.length() > 0: # 速度が0かどうかを判定
velocity = velocity.normalized() * speed # ベクトルを正規化する
$AnimatedSprite2D.play() # 速度があればアニメーションする
else:
$AnimatedSprite2D.stop() # 速度が0ならアニメーションを停止
position += velocity * delta # 毎フレーム、ポジションに速度を足す
position = position.clamp(Vector2.ZERO, screen_size) # 画面外に出ないようにする
上下左右に矢印キーを入力すると、x方向やy方向に速度がプラスされ、velocity.normalized()で斜め方向も同じ速度になるように正規化します。
positionに毎フレーム速度を足してキャラを移動させ、画面外に出ないようにclampします。
プレイヤーシーンを実行
F6でプレイヤーシーンを実行すると動きました。ちょっと安心。

アニメーションを変更する
プレイヤーのアニメーションはUPとWalkがあるので、AnimatedSprite2Dであらかじめ設定しておきます。(設定の仕方は「AnimatedSprite2Dでアニメーションを追加する」の項目を参照)

xとy速度によってアニメーションを変更する
if velocity.x != 0:
$AnimatedSprite2D.animation = "walk" # x速度があればwalkアニメーションを表示
$AnimatedSprite2D.flip_v = false # x速度があれば縦方向にはフリップしない
#
$AnimatedSprite2D.flip_h = velocity.x < 0 # x速度がマイナスなら画像を左右反転
elif velocity.y != 0:
$AnimatedSprite2D.animation = "up" # y速度があればupアニメーションを表示
$AnimatedSprite2D.flip_v = velocity.y > 0 # 下に向かえば画像を上下反転
F6で実行するとアニメーションが変わりました。

今回はプレイヤーの移動まで、どんなゲームが完成するか。ワクワク!
なんとなくGODOTにも慣れてきました。
ここまでは、バグもなくサクサク進めています。良かった!
興味のある方は作ってみては?
ステップバイステップからゆっくり進めるのがおススメです。
誰かのお役に立てれば幸いです。