Phaser 3 | WASDキーによるプレイヤーの移動

2021-01-16Phaser 3 ゲーム,Phaser 3

Phaser 3 | WASDキーによるプレイヤーの移動

サイドビューの横スクロールアクションゲームで、WASDキーを使ってプレイヤーを移動させる用のPhaser 3サンプルコードです。

WASDキーによるプレイヤーの移動（サイドビュー用）

サイドビュー用のWASDキーによるプレイヤーを移動させるシンプルなサンプルコードです。

まず、キーボードの入力を検出するように設定します。

////create

this.keys = {};
this.keys.keyW = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
this.keys.keyA = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
this.keys.keyS = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
this.keys.keyD = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);

その後、update内でキーの入力を検出してプレイヤーの位置を変更します。

////update

if (this.keys.keyW.isDown && this.player.onFloor()) {
	//Wが押されている & 接地時
	player.setVelocityY(-170);
}

if (this.keys.keyA.isDown) {
	//Aが押されている時
	player.setVelocityX(-100);
	
} else if (this.keys.keyD.isDown) {
	//Dをが押されている時
	player.setVelocityX(100);

} else if (this.player.onFloor()) {
	//AもDも押されていない & 接地時
	player.setVelocityX(0);
}

方向キーでも操作できるようにする

方向キーでも操作できるようにする場合は以下のようにしています。

////create

//方向キーのセットアップ
this.arrow_keys = this.scene.input.keyboard.createCursorKeys();
////update

if ((this.keys.keyW.isDown || this.arrow_keys.up.isDown) && player.onFloor()) {
	//Wが押されている時
	player.setVelocityY(-170);
}

if (this.keys.keyA.isDown || this.arrow_keys.left.isDown) {
	//Aが押されている時
	player.setVelocityX(-100);

} else if (this.keys.keyD.isDown || this.arrow_keys.right.isDown) {
	//Dをが押されている時
	player.setVelocityX(100);

} else if (this.player.onFloor()) {
	//AもDも押されていない & 接地時
	player.setVelocityX(0);
}

設置時にアニメーションを戻したい場合など、接地時の判定処理を上部に入れて戻しておく方法が簡単かと思います。

if (!player.onFloor()) {
	//設置時
}

コード説明など

重力が反映しない、落ちてこない

サンプルではconfigで重力をデフォルト設定しています。（gravity: 300）

ジャンプの大きさを調節する

「Wが押されている時」のsetVelocityY()を変更します。

移動速度を調節する

「AまたはDが押されている時」のsetVelocityX()を変更します。

カメラのプレイヤー追従

カメラのプレイヤー追従については、以下の記事にて紹介しています。

サンプルコードの基本構造とconfig設定

サンプルコードのphaser3を利用した基本構造やconfig設定について、以下の記事にて紹介しています。

Phaser 3 | サンプルコードで利用している基本構造 | ONE NOTES

サンプルで利用している素材、データファイルの一覧

サンプルコードで利用している素材、データファイルの一覧を以下ページで紹介しています。

Phaser 3 ゲーム,Phaser 3

Posted by Yousuke.U