[めも]pixi.jsでキーボードイベント

参考になれば。

(pixi.jsで)キーボードイベントを取得したい場合は、windowやdocumentのイベントハンドラを使う

pixi.jsで扱うイベントは、マウスや、タッチ用。

PIXI.interaction. InteractionManager

The interaction manager deals with mouse, touch and pointer events.

補足　pixi.jsのAccessibilityManagerも、keydownイベントのリスナを使っています

念のため。
(ソースから抜粋)

function AccessibilityManager(renderer) {
    ・・・
    window.addEventListener('keydown', this._onKeyDown, false);
}

AccessibilityManager.prototype.activate = function activate() {
    ・・・
    window.document.addEventListener('mousemove', this._onMouseMove, true);
    window.removeEventListener('keydown', this._onKeyDown, false);
}

AccessibilityManager.prototype.deactivate = function deactivate() {
    ・・・
    window.document.removeEventListener('mousemove', this._onMouseMove);
    window.addEventListener('keydown', this._onKeyDown, false);
}

AccessibilityManager.prototype.destroy = function destroy() {
    ・・・
    window.document.removeEventListener('mousemove', this._onMouseMove);
    window.removeEventListener('keydown', this._onKeyDown);
}

AccessibilityManager.prototype._onKeyDown = function _onKeyDown(e) {
    if (e.keyCode !== KEY_CODE_TAB) {
        return;
    }
    ・・・
};

補足2

w3schools - HTML DOM Eventsから引用

Keyboard Events
onkeydown: DOM2

KeyboardEvent Object
keyCode: DOM2
key: DOM3

keyCodeなどの対応状況
Can I use - KeyboardEvent

KeyboardEvent.keyCode

This KeyboardEvent property is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

KeyboardEvent.key - WD(草案)
対応ブラウザはIE11+, Firefox 51+など。(詳細はリンク先から)

注意1：windowかdocumentにaddEventListener()する

divなどのエレメントにaddEventListener('keydown', someFunction)とすると、正しく動作しない。

注意2：Firefoxの自動検索を止めるには、preventDefault()が必要

※かなり古いバージョンの場合はバグがある。

参考:Stackoverflow - Prevent automatic search in Firefox using JavaScript

注意3：keydownとkeypressでは、keyCodeなどの扱いが異なります

※keydownとkeypressの両方をセットする場合は、preventDefault()の位置に注意。(keydownでpreventDefault()を呼ぶと、keypressが発生しません)
※セットされる値はブラウザ依存なので注意。

(実験結果)
Firefox:52.0の場合
keydown：keyCodeとwhichは同じ値
※whichに入る値は、仮想キーコード相当?
(F5) => keyCode:116, which:116 (0x74)
(F6) => keyCode:117, which:117 (0x75)
(a) => keyCode:65, which:65 (0x41 == 'A')
(d) => keyCode:68, which:68 (0x44 == 'D')
(A) => keyCode:65, which:65
(D) => keyCode:68, which:68
(0) => keyCode:48, which:48 (0x30 == '0')
(NumPadの0) => keyCode:96, which:96

keypress：keyCodeとwhichのどちらかがセットされる
※whichに入る値は、文字コード相当?
(F5) => keyCode:116, which:0
(F6) => keyCode:117, which:0
(a) => keyCode:0, which:97 (0x61 == 'a')
(d) => keyCode:0, which:100 (0x64 == 'd')
(A) => keyCode:0, which:65 (0x41 == 'A')
(D) => keyCode:0, which:68 (0x44 == 'D')
(0) => keyCode:0, which:48 (0x30 == '0')
(NumPadの0) => keyCode:0, which:48 (0x30 == '0')

参考資料1: MSDN - キーボード入力

「キー コード」のあたりを参照。
※仮想キーコードでは、0x61～0x7Aに、NumPadのキーやファンクションキーがマッピングされているので注意。
※文字コードの0x61～0x7Aは、'a'～'z'

参考資料2: MDN - KeyboardEvent.keyCode

The value of keypress event is different between browsers. IE and Google Chrome set the KeyboardEvent.charCode value. Gecko sets 0 if the pressed key is a printable key, otherwise it sets the same keyCode as a keydown or keyup event.

訳: keypress イベントがセットするkeyCodeは、ブラウザによって異なります。
IE、Google Chrome の場合は、KeyboardEvent.charCodeの値になります。
Gecko の場合は、印刷可能な文字の場合は0、その他の場合(ファンクションキーなど)はkeydownやkeyupイベントと同じ値になります。

参考資料3: MDN - KeyboardEvent.charCode

Notes
In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both.
・・・
charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.
・・・
To get the code of the key regardless of whether it was stored in keyCode or charCode, query the which property.

訳: keypress イベントでは、keyCode と charCode のどちらか一方がセットされます。
keydown イベントや keyup イベントでは、charCode はセットされません。
keyCode と charCode のどちらにセットされたかを気にせずに値を取得するには、which プロパティを使います。
訳注: 前述の通り、which を使う場合は、イベントによっては、0x61～0x7Aがa～zではないので要注意。

addEventListener()などを使う場合は、対象ブラウザに注意

pixi.jsを使う時点で、古いブラウザは動作対象外にしているかとは思いますが・・
addEventListener()やpreventDefault()を使う場合は、対象ブラウザに注意しましょう。

MDN - EventTarget.addEventListener
詳細は「古い Internet Explorer と attachEvent」や「互換性」のあたりを参照で。

古い Internet Explorer と attachEvent
IE9 より前の Internet Explorer では、標準の addEventListener ではなく、 attachEvent を使わなければなりません。

互換性
次のコードをスクリプトの初めに書いておくと、IE 8 では対応していない addEventListener、removeEventListener、Event.preventDefault、および Event.stopPropagation が動作するようになります。・・・

WebGLやCanvasなどの対応状況
Can I Use - WebGL
Can I Use - Canvas
Can I Use - Touch events

蛇足

条件付きコメントは、IE10以降、一部のモードで、サポートされなくなりました
詳細は、条件付きコメントがサポートされなくなったを参照して下さい。

※if IE自体がサポートされなくなったわけではないので、注意。
if lt IE 9という書き方をたまに見かけますが・・

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

のようなモード指定が無いと、if IEは動作しないよ、という事。
言い換えると、WebGLを使う案件では、(IE9互換の動作をさせる訳にはいかないので) IE10には要注意！
(Can I Useによると、WebGLはIE11以降、CanvasはIE9以降)

pixi.jsの場合は、Canvasに自動フォールバックするはずです。
Q:サポートするブラウザは?
A:(引用を参照)
Supported browsers?

xerver (Pixi.js Moderator)
Posted March 7, 2014
We support the following with Canvas:
IE 9+, FF 10+, Chrome 11+, Safari 5.1+, Opera 12+

We support the following with WebGL:
IE 11+, FF 15+, Chrome 11+, Safari 5.1+, Opera 19+

Q:Canvasへのフォールバックで、何か制限は?
A:パフォーマンスの差以外では、ごく一部。
What are the limitations of the canvas fallback? #2088

GoodBoyDigital commented on 21 Feb 2016 (Member)
What @photonstorm said.
WebGL - filters / better performance
Canvas - extra blendModes

Other than that they should be the very much the same

バージョンによってはバグがあるようなので、心配な場合は「pixi.js IE10」などで検索してみましょう。

参考資料1

HTML5 Game Devs Forum - Keyboard eventsから

d13
Posted December 21, 2014
There's some information about how to do that about half-way through this article:

https://github.com/kittykatattack/learningPixi

リンク先のページから
12_keyboardMovement.html

//The `keyboard` helper function
function keyboard(keyCode) {
  ・・・
  //The `upHandler`
  key.upHandler = function(event) {
    ・・・
  }
  ・・・
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );

参考資料2

MDN - Window - イベントハンドラ
MDN - EventTarget
MDN - KeyboardEvent