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

参考になれば。
#(pixi.jsで)キーボードイベントを取得したい場合は、windowやdocumentのイベントハンドラを使う
##pixi.jsで扱うイベントは、マウスや、タッチ用。
[PIXI.interaction. InteractionManager](http://pixijs.download/release/docs/PIXI.interaction.InteractionManager.html)
> 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](https://www.w3schools.com/jsref/dom_obj_event.asp)から引用
>Keyboard Events
onkeydown:  DOM2
>
KeyboardEvent Object
keyCode:  DOM2
key:  DOM3

keyCodeなどの対応状況
[Can I use - KeyboardEvent](http://caniuse.com/#search=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](http://stackoverflow.com/questions/37092173/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 - キーボード入力](https://msdn.microsoft.com/ja-jp/library/windows/desktop/gg153546(v=vs.85).aspx)
「キー コード」のあたりを参照。
※仮想キーコードでは、0x61～0x7Aに、NumPadのキーやファンクションキーがマッピングされているので注意。
※文字コードの0x61～0x7Aは、'a'～'z'

####参考資料2: [MDN - KeyboardEvent.keyCode](https://developer.mozilla.org/ja/docs/Web/API/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](https://developer.mozilla.org/en-US/docs/Web/API/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](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#Compatibility)
詳細は「古い 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](http://caniuse.com/webgl)
[Can I Use - Canvas](http://caniuse.com/canvas)
[Can I Use - Touch events](http://caniuse.com/touch)

###蛇足
条件付きコメントは、IE10以降、一部のモードで、サポートされなくなりました
詳細は、[条件付きコメントがサポートされなくなった](https://msdn.microsoft.com/ja-jp/library/hh801214(v=vs.85).aspx)を参照して下さい。

※`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?](http://www.html5gamedevs.com/topic/4563-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](https://github.com/pixijs/pixi.js/issues/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](http://www.html5gamedevs.com/topic/11231-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](https://github.com/kittykatattack/learningPixi/blob/master/examples/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 - イベントハンドラ](https://developer.mozilla.org/ja/docs/Web/API/Window#Event_handlers)
[MDN - EventTarget](https://developer.mozilla.org/ja/docs/Web/API/EventTarget)
[MDN - KeyboardEvent](https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent)