enchant.js / Ubiquitous Entertainment Inc.

　”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　キャラクター画像を表示してみる”の記事で、折角キャラを表示したので、「キー入力」でそのキャラを動かしてみたいと思う。コードはこの記事で用いたものを使い回す。

■まずはコード

　実装方法はいくつかあるが、取り敢えず、フレーム毎に処理する以下のようなコードにしている。このままコピーして使えるので、まずは半信半疑でも動かしてみてほしい。

[html firstline=”1″ highlight=”27,28,29,30,31,32,33,34″]
enchant();

window.onload = function() {
// 表示領域を設定（幅と高さ）.
var game = new Game( 480, 640 );

// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
game.fps = 24;

// pre（前）-load（読み込み）、ゲームで使用する素材を予め読込.
game.preload(‘./img/xxx.png’);

// メイン処理を実行.
game.onload = function() {
// キャラを配置、幅と高さを設定.
var chara = new Sprite( 96, 64 );
// 予め読込した画像を設定.
chara.image = game.assets[ ‘./img/xxx.png’ ];
// ゲームのシーンにキャラを追加.
game.rootScene.addChild( chara );
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8;

// キャラの表示指定.
chara.frame = 0;

// キャラをキー入力で動かす.
chara.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
this.x += 1;
}
}
}

// ゲームをスタート.
game.start();
}
[/html]

　適当なWEBブラウザで開いて「右キー」を押下すると、キャラが「右に移動する」はずだ。おぉっと感動してくれても構わない。念の為、上記コードで作った動画はこちら「右キー押下でキャラが動く動画」に置いておく。

■「onenterframe」とは？

　今回、キー入力の判定契機に用いたのは、「onenterframe」というものだ。これは、以下に置き換えた場合と同義となっている。

[html firstline=”27″ highlight=”28″]
// キャラをキー入力で動かす.
chara.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
this.x += 1;
}
}
[/html]

　↓↓↓

[html firstline=”27″ highlight=”28,34″]
// キャラをキー入力で動かす.
chara.addEventListener( Event.ENTER_FRAME, function(e) {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
this.x += 1;
}
});
[/html]

　つまり、charaインスタンスに「Event.ENTER_FRAME」という名のイベントをイベントリスナーで登録したのと同義なのだ（「Event.ENTER_FRAME」イベントが発生する毎にこの処理が呼び出される）。

　「on　＋　イベント名」

　とすることで、若干だが、コードを省略することができる。簡単に登録できて便利だから、覚えておいても損はないと思う。

　さて、この「Event.ENTER_FRAME」／「enterframe」イベントだが、これは「game.fps」で設定した周期で呼び出されるイベントだ。主にプレイヤー移動などの契機に用いられている。enchant.jsのサンプルでもこの契機で実装されていた。

　今回のコードでは「game.fps」を、

[html firstline=”7″ highlight=”8″]
// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
game.fps = 24;
[/html]

　と設定しているので、1秒間に24回、この「Event.ENTER_FRAME」／「enterframe」イベントが発生するということになる、1秒間に24回、処理が呼び出されるというわけだ。先ほどの動画を見てもらったら（もしくはご自分で実装したものの動作を見てもらったら）お気づきと思うが、

[html firstline=”27″ highlight=”31,32″]
// キャラをキー入力で動かす.
chara.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
this.x += 1;
}
}
[/html]

　処理毎に1pxの移動（キャラ表示位置のX座標を1px加算）としているので、1秒間に24pxしか移動しない、非常にゆっくりな移動になっていたはずだ。

■enchant.jsでのキー入力について

　では、次に、遅くなったが、enchant.jsでのキー入力についてだ。enchant.jsはスマートフォンなどを主な対象としているのだが、PC上でのキー入力にも対応はされている。既に上記で実装しているが、各キーの「押下状態」はシステム変数のように読み出すことが可能で、上下左右の各方向キーのフレーム毎の入力、押下状態は、それぞれ以下のinputのメンバ変数に格納されている。

[html]
game.input.up // 上キー.
game.input.down // 下キー.
game.input.left // 左キー.
game.input.right // 右キー.
[/html]

　それぞれ押下されていると「true（1）」が返り、押下されていないと「false（0）」が返る。

■上下左右にキャラを動かしてみる

　ついでに、右だけではなく、上下左右にキャラを動かせるようにしてみましょうか。

[html firstline=”27″ highlight=”34,35,36,37,38,39,40,41,42,43,44,45,46,47,48″]
// キャラをキー入力で動かす.
chara.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
this.x += 1;
}
// 左キー押下中.
if ( game.input.left ) {
// X方向に-1px移動.
this.x -= 1;
}
// 上キー押下中.
if ( game.input.up ) {
// Y方向に-1px移動.
this.y -= 1;
}
// 下キー押下中.
if ( game.input.down ) {
// Y方向に1px移動.
this.y += 1;
}
}
[/html]

　敢えて「else if」としていないので、同時押下による斜め移動も可能だ。こちらも念の為、「左右上下キー押下でキャラが動く動画」を用意してあるので、良かったら確認してみてほしい。

■キー入力はイベントドリブンじゃないのか？

　フレーム毎にキー入力をチェックすることに抵抗、違和感のある人もいるのではないだろうか。enchant.jsのサンプルでもフレーム毎の処理内で入力処理をやっていたので、間違った思想ではないのだと思って特にイベントドリブンに拘ってはいないのだが、というか、イベントドリブンではかなりやりづらいので、実際にその手で試してみてほしい。イベントドリブンに拘りたい人は、以下で実現できる。

[html firstline=”27″ highlight=”28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47″]
// キャラをキー入力で動かす.
game.addEventListener( Event.RIGHT_BUTTON_DOWN, function(e) {
// 右キー押下.
// X方向に1px移動.
chara.x += 1;
});
game.addEventListener( Event.LEFT_BUTTON_DOWN, function(e) {
// 左キー押下.
// X方向に-1px移動.
chara.x -= 1;
});
game.addEventListener( Event.UP_BUTTON_DOWN, function(e) {
// 上キー押下.
// Y方向に-1px移動.
chara.y -= 1;
});
game.addEventListener( Event.DOWN_BUTTON_DOWN, function(e) {
// 下キー押下.
// Y方向に1px移動.
chara.y += 1;
});
}
[/html]

　注意が必要なのは、「Event.RIGHT_BUTTON_DOWN」などの各4イベントは、chara＝enchant.Spriteオブジェクトには配信（発行）されないということ（参照：JsDoc Reference）。なので、addEventListenerをgame＝enchant.Gameオブジェクトへ登録するようにしている。

　で、実行した動作だが、キー入力の発生契機でしか処理が呼び出されないので、操作性がかなり悪い。ゲーム内容に応じてイベントドリブンを採用するべきかどうかが分かれてくると思う。

（アシベズヘア@ashibehair_m）