キー入力について

特にPCで遊べるゲームを作る際には、キーボードの入力を受け取って画面に反映する必要が出てきます。例えば、カーソルキーでプレイヤーを上下左右に操作する、エンターで会話を次に進める、など。
Phaserでは、それらを簡単に扱えるようになっています。

基本

ドキュメントは必ず見ておきましょう。
ドキュメント - Phaser.Input.Keyboard

この記事では、『キーの登録』と『キー入力の受け取り』について解説していくので、主に以下の二つのクラスを使う事になります。

• KeyboardPlugin
• Key

特に肝となるのはKeyboardPluginで、キーを登録する際は基本的にこのKeyboardPluginを通して使います。
シーン内で以下のように参照できます。

this.input.keyboard

キーを登録する

キーを登録する方法には、一つずつ登録する方法と、まとめて登録する方法、の二通りがあります。

一つずつ登録する - addKey()

// 下記三つは同じ結果になる
// 例：spaceキーを登録する

// 1つめ：エディタの補完が効く環境とかだと一番確実
const space = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
// 2つめ：短くて見た目は良い。タイポに注意
const space = this.input.keyboard.addKey('SPACE');
// 3つめ：わざわざ調べて使うメリットはない
const space = this.input.keyboard.addKey(32);

戻り値はPhaser.Input.Keyboard.Keyクラスのインスタンスです。

ドキュメント - キー一覧
GitHub - キーに対応する番号を調べたいならソースを見る

まとめて登録する - addKeys()

// 下記二つは同じ結果になる
// 例：WとSキーをまとめて登録する

// 1つめ：エディタの補完が効く環境とかだと一番確実
const keys = this.input.keyboard.addKeys({ 
	W: Phaser.Input.Keyboard.KeyCodes.W, 
	S: Phaser.Input.Keyboard.KeyCodes.S 
});

// 2つめ：短くて見た目は良い。タイポに注意
const keys = this.input.keyboard.addKeys('W,S');

戻り値はオブジェクトで下記のような構造になります。

{
	W: Phaser.Input.Keyboard.Keyクラスのインスタンス, 
	S: Phaser.Input.Keyboard.Keyクラスのインスタンス
}

カーソルキーをまとめて登録する - createCursorKeys()

カーソルキーはどのゲームでもよく使うので、Phaserはメソッドを用意してくれています。

// up, down, left, right, space, shiftキーをまとめて作成しオブジェクトで返してくれる
this.input.keyboard.createCursorKeys();

気になるのが、spaceとshiftまで含んでしまっている点です。もし、完全にカーソルキーだけのものを作りたい場合は以下のように自分で作成する方がいいかと思います。

const cursors = this.input.keyboard.addKeys({ 
    up: Phaser.Input.Keyboard.KeyCodes.UP,
	down: Phaser.Input.Keyboard.KeyCodes.DOWN,
    right: Phaser.Input.Keyboard.KeyCodes.RIGHT,
    left: Phaser.Input.Keyboard.KeyCodes.LEFT
});

キー入力を受け取る

基本的な三つの方法

• Phaser.Input.Keyboard.KeyのisDown
• Phaser.Input.Keyboard.KeyboardPluginのcheckDown()
• Phaser.Input.KeyboardのJustDown()

どれも戻り値はbooleanです。

const space = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

// 1つめ：spaceを押している間はずっとtrue
if (space.isDown) {
	console.log('スペースが押されているよ')
}
// 2つめ：第2引数に渡した間隔でキー入力を確認する
if (this.input.keyboard.checkDown(space, 500)) {
	console.log('500ms毎に呼ばれる')
}
// 3つめ：長押し防止策。一度のキー入力に対して一度だけ確認する
if (Phaser.Input.Keyboard.JustDown(space)) {
	console.log('一度スペースが押されたよ')
}

ドキュメント - isDown
ドキュメント - checkDown()
ドキュメント - JustDown()

イベントで呼び出す

二つあります。

まずは、Phaser.Input.Keyboard.Keyクラスのインスタンスのon()でイベントを受け取って処理する方法です。

const space = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
space.on('down', () => {
	console.log('スペースが押されたよ');
});

もう一つは、インスタンスいらずな方法です。

this.input.keyboard.on('keydown-SPACE', () => {
	console.log('スペースが押されたよ');
});