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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 戦闘シーンでの操作といえば、例えば、

「たたかう」
「とくぎ」
「どうぐ」
「ぼうぎょ」
「にげる」

 というコマンドがあったとしたら、それらのどれかを選択する為に「上下キー」の入力でカーソル移動させて、最終選択する為に「Aボタン」等を押して決定、という操作になるだろう。

 今回はこの準備として、戦闘シーンに「バーチャルパッド(十字方向キーパッド)」を表示しておきたいと思う。

■バーチャルパッド(十字方向キーパッド)の表示の仕方を思い出す

 バーチャルパッド(十字方向キーパッド)はこの記事”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる”で一度、表示している。以下のコードだけで表示がされていたはずだ。

 ※コードは記事”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する”のものを継続使用

[javascript firstline=”44″ highlight=”49,50,51,52,53″ title=”main.js”]
// メイン処理を実行.
core.onload = function() {
// ゲームのシーンに背景色を設定.
core.rootScene.backgroundColor = ‘#80f0b8’;

// バーチャルパッド(十字方向キーパッド)を生成.
var pad = new Pad();
pad.moveTo( 10, SCREEN_HEIGHT – 125 );
// ゲームのシーンにバーチャルパッド(十字方向キーパッド)を追加.
core.rootScene.addChild( pad );
[/javascript]

 注目すべきはこの、「core.rootScene.addChild( pad );」だ。

 ルートシーンに対してバーチャルパッド(十字方向キーパッド)を追加している為、”ルートシーン以外には追加されていない”ということになる。実際、ルートシーンとは異なる戦闘シーンでは、バーチャルパッド(十字方向キーパッド)は表示されてない。

 じゃあ、答えは簡単だ。

 戦闘シーンにも上記コードのように、バーチャルパッド(十字方向キーパッド)を追加すればよいのだ。

■バーチャルパッド(十字方向キーパッド)を表示する

 以下だけで、戦闘シーンへのバーチャルパッド(十字方向キーパッド)表示は完了。

[javascript firstline=”126″ highlight=”163,164,165″ title=”main.js”]
/**
* 新しいシーンを作成する関数.
*/
function createScene() {
var scene = new Scene(); // シーンを作成.
var bg = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT ); // 背景画像を配置、幅と高さを設定.
bg.image = core.assets[ IMG_BG_SCENE_BATTLE ]; // 予め読込した背景画像を設定.
scene.addChild( bg ); // シーンに背景画像を追加.

var sw1 = new StatusWindow( scene, 0, 366 ); // ステータスウィンドウを作成.
sw1.setName( "アプフェル" ); // 名前を設定.
sw1.setHP( 9999 ); // HPを設定.
sw1.setSP( 999 ); // SPを設定.
sw1.setLV( 99 ); // レベルを設定.

var sw2 = new StatusWindow( scene, 120, 366 ); // ステータスウィンドウを作成.
sw2.setName( "レザン" ); // 名前を設定.
sw2.setHP( 0 ); // HPを設定.
sw2.setSP( 678 ); // SPを設定.
sw2.setLV( 71 ); // レベルを設定.

var sw3 = new StatusWindow( scene, 240, 366 ); // ステータスウィンドウを作成.
sw3.setName( "ビスキュイ" ); // 名前を設定.
sw3.setHP( 8021 ); // HPを設定.
sw3.setSP( 9990 ); // SPを設定.
sw3.setLV( 34 ); // レベルを設定.

var sw4 = new StatusWindow( scene, 360, 366 ); // ステータスウィンドウを作成.
sw4.setName( "ダマンド" ); // 名前を設定.
sw4.setHP( 5337 ); // HPを設定.
sw4.setSP( 0 ); // SPを設定.
sw4.setLV( 25 ); // レベルを設定.

// 敵キャラの生成.
var enemy = new Enemy32( ENEMY_32.UZAIME, ((SCREEN_WIDTH – 32) / 2), 366 – 32 – (32 * 2) );
scene.addChild( enemy ); // シーンに敵キャラを追加.

var pad = new Pad(); // バーチャルパッド(十字方向キーパッド)を生成.
pad.moveTo( 10, SCREEN_HEIGHT – 125 ); // 表示座標を設定.
scene.addChild( pad ); // シーンに追加.

// 作成したシーンを返却.
return scene;
}
[/javascript]
enchant101

 ルートシーンと同じ位置に表示した。なるべくシーンが変わっても同じ位置にパッドがある方が、ユーザーもシーンごとに戸惑まわずに済むだろう。

■戦闘シーンではイベントドリブンを採用する

 キャラの移動処理を組み込んだ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる”の記事では、フレーム毎にキー入力を判定する処理を採用した。何故なら、フレーム毎に移動後の描画が必要だったからだ。例えば、32pxキャラを移動させたい場合、

 ★フレームの場合 : キー押下⇒ フレーム発生⇒ 1px移動⇒ フレーム発生⇒ 1px移動⇒・・・32フレーム後に32pxの移動が完了
 ★ドリブンの場合①: キー押下⇒ 1px移動⇒ キー押下⇒ 1px移動⇒ キー押下⇒ 1px移動⇒・・・ユーザのキー押下が32回必要
 ★ドリブンの場合②: キー押下⇒ 32px移動⇒ ・・・32pxの瞬間移動に見える

 となって、フレーム毎の処理ならキーを押下している最中は取り敢えず1px進めておけば良い為、制御が単純なのだ。

 しかし、戦闘シーンでのコマンド入力では、こういうわけにはいかない。キーを押下している最中、フレーム毎に次の項目へカーソルを移動されてしまったら、ユーザーの指では見切れない速さのカーソル移動になってしまう。fpsが24なら、1秒間に24項目もカーソルが移動してしまう。ユーザーがキーを押下してから指を離すまで、それを1000/24秒の速さで行わなければ次の項目へ移動するという操作が実現できないのだ。どんな達人だろうか。

 じゃあ、ユーザーがキーを押下してから離すまでの時間をチューニングしたらいいんだよね?

 とはならない。ある人は指を500msで離すかもしれないし、またある人は800msで指を離すかもしれない。500ms単位で押下を監視する制御としていた場合、800msで指を離す人がこのゲームを触ったら、どうしても次の項目に移動せず、次の次の項目に移動してしまう、という事態に陥ってしまう。

 だから、項目移動など、ただ次に移動さえすれば良いような処理をフレーム毎に制御するのは非常に複雑で、だったら、キー押下された契機で、次の項目に移動させて、さらに次の項目に移動したければ、また次のユーザーのキー入力を待つように作ればよいのだ。

[javascript firstline=”163″ highlight=”167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185″ title=”main.js – function createScene()”]
  var pad = new Pad(); // バーチャルパッド(十字方向キーパッド)を生成.
pad.moveTo( 10, SCREEN_HEIGHT – 125 ); // 表示座標を設定.
scene.addChild( pad ); // シーンに追加.

// 上キー押下(DOWN)リスナー.
scene.onupbuttondown = function() {
enemy.y -= 1;
}

// 下キー押下(DOWN)リスナー.
scene.ondownbuttondown = function() {
enemy.y += 1;
}

// 右キー押下(DOWN)リスナー.
scene.onrightbuttondown = function() {
enemy.x += 1;
}

// 左キー押下(DOWN)リスナー.
scene.onleftbuttondown = function() {
enemy.x -= 1;
}

// 作成したシーンを返却.
return scene;
[/javascript]

 「on + イベント名」の簡易記述式でキーダウンイベントを上下左右それぞれ登録している。もちろん戦闘シーンのオブジェクトである「scene」への登録だ。今はコマンド項目を作っていないので、お試しとして敵キャラをキー押下契機で1px動かすように実装してみた。

 どうだろうか?

 キーを押下しっぱなしにしたとしても、もう一度キーを押下しない限り、1pxしか動かないようになっているはずだ。

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

■実際に戦闘用コマンドを表示してキー操作で動かしてみる

 次の記事”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する”では、実際にキー入力によって戦闘用コマンドを操作してみたいと思う。

(アシベズヘア@ashibehair_m

╋ 関連記事 ━━━

  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する
  • ゲーム開発を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)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する」への4件のフィードバック

    1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する

    2. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【検証篇】 バーチャルパッド(十字方向キーパッド)を表示してキーボード上でキー押下すると、そのキーを押下しっぱなし

    3. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する

    4. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示する

    コメントを残す

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