enchant.js / Ubiquitous Entertainment Inc.
バーチャルパッド(十字方向キーパッド)を設けて、キー押下(DOWN)の契機で”一度だけ”処理を行いたかった為、ENTER_FRAME契機ではなく、以下のBUTTON_DOWN契機の実装にて実現したのだが、PC上のキーボードで対象のキーを長押下したままにすると、リスナーがコールされ続けた。
しかし、マウスで対象のキーをclickしている分には、一度しかリスナーはコールされない。何故だ?
[javascript firstline=”202″ highlight=”” title=”main.js”]
var pad = new Pad(); // バーチャルパッド(十字方向キーパッド)を生成.
pad.moveTo( 10, SCREEN_HEIGHT – 125 ); // 表示座標を設定.
scene.addChild( pad ); // シーンに追加.
// 上キー押下(DOWN)リスナー.
scene.onupbuttondown = function() {
// 何らかの処理.
}
[/javascript]
以下のようにして、PC上で実測してみた。
[javascript firstline=”202″ highlight=”206,207,211,212,213″ title=”main.js”]
var pad = new Pad(); // バーチャルパッド(十字方向キーパッド)を生成.
pad.moveTo( 10, SCREEN_HEIGHT – 125 ); // 表示座標を設定.
scene.addChild( pad ); // シーンに追加.
lastTime = window.getTime();
arr = new Array();
// 上キー押下(DOWN)リスナー.
scene.onupbuttondown = function() {
// 何らかの処理.
var currentTime = window.getTime();
arr.push( currentTime – lastTime );
lastTime = currentTime;
}
[/javascript]
結果は、以下の間隔(ms)となった。FPSは「60」に設定している(1フレームが16~17ms)。
562, 30, 33, 30, 27, 30, 30, 32, 30, 28, 30, 31, 30, 34, 24, 30, 32, 30,
33, 25, 30, 31, 32, 33, 23, 30, 31, 30, 33, 24, 30, 30, 32, 34, 23, 6, 9,
36, 37, 38, 10, 41, 12, 44・・・・・・
FPSを「20」(1フレームが50ms)にしても変化はなく、上記とほぼ同じ結果だった。どうやら、キーを押下している最中、それを監視してFRAME毎にコールしているわけではないようだ。
enchant.jsのソースを見てみた。
[javascript firstline=”1015″ highlight=”1018″ title=”enchant.js”]
if (initial) {
stage = enchant.Core.instance._element;
var evt;
document.addEventListener(‘keydown’, function(e) {
core.dispatchEvent(new enchant.Event(‘keydown’));
if (enchant.ENV.PREVENT_DEFAULT_KEY_CODES.indexOf(e.keyCode) !== -1) {
e.preventDefault();
e.stopPropagation();
}
if (!core.running) {
return;
}
var button = core._keybind[e.keyCode];
if (button) {
evt = new enchant.Event(button + ‘buttondown’);
core.dispatchEvent(evt);
}
}, true);
[/javascript]
1018行目、「document.addEventListener(‘keydown’, function(e) {」となっている。なんだ、ブラウザのキー押下通知に依存しているだけだった。
じゃあ、マウスで対象のキーをclickしているときは?
[javascript firstline=”1997″ highlight=”2003″ title=”enchant.js – enchant.Entity = enchant.Class.create(enchant.Node, {“]
/**
* Indicates if this Entity is being clicked.
* Only works when {@link enchant.Entity.buttonMode} is set.
* @type {Boolean}
*/
this.buttonPressed = false;
this.addEventListener(‘touchstart’, function() {
if (!this.buttonMode) {
return;
}
this.buttonPressed = true;
var e = new enchant.Event(this.buttonMode + ‘buttondown’);
this.dispatchEvent(e);
core.dispatchEvent(e);
});
[/javascript]
2003行目、タッチイベントの開始としてリスナーを登録している。なるほど、だからこちらは1回しか来ない。
(アシベズヘア@ashibehair_m)
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する