ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【検証篇】 バーチャルパッド(十字方向キーパッド)を表示してキーボード上でキー押下すると、そのキーを押下しっぱなしにしている最中はBUTTON_DOWNイベントが通知され続けるのだが、何故だ?

enchant.js
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

╋ 関連記事 ━━━

  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 文字列に「8bitファミコン風のWEBフォント(漢字も使える!フリー!)」を採用する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスゲージ(HPゲージ)を表示する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに切り替える
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示してみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像を表示してみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【検証篇】 バーチャルパッド(十字方向キーパッド)を表示してキーボード上でキー押下すると、そのキーを押下しっぱなしにしている最中はBUTTON_DOWNイベントが通知され続けるのだが、何故だ?」への1件のフィードバック

    1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です