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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに複数の敵キャラを表示する”の記事で敵キャラも複数表示できるようになったし、”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する”の記事で戦闘用のコマンドも表示したし、今度は「攻撃」コマンドで対象の敵キャラを選択するところまでを実現してみよう。

 ただその前に、選択操作に欠かせない「ボタン」表示を戦闘シーンについては行っていなかったので、先に「バーチャルボタン(A/B/X/Y)」を表示しておく。

■「Button」クラスの修正

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する”の記事で「バーチャルパッド(十字方向キーパッド)」は表示していたが、「バーチャルボタン(A/B/X/Y)」は表示していなかったので、早速、表示しよう。

 ○X
○Y ○A
 ○B

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示してみる”の記事で「バーチャルボタン(A/B/X/Y)」を作成したときは、以下のクラス「Button」の中で、「core.rootScene.addChild( this );」を実装して、ルートシーンへの追加を前提としたクラスにしていた。今回は、戦闘シーンに追加したいので、このクラスをこのまま使っては、実現できないということになる。

 なので、「core.rootScene.addChild( this );」の1行を削除した。削除した姿が以下のコードだ。これでどこのシーンでも使用できるようになった(初めからこうしておけば良かったYO!)。

[javascript firstline=”20″ highlight=”” title=”main.js”]
// バーチャルボタンを作成するクラス.
var Button = enchant.Class.create( enchant.Sprite, {
// コンストラクタ.
initialize: function( x, y, mode ) {
// 継承元をコール.
enchant.Sprite.call( this, 50, 50 );
// バーチャルボタン画像を設定.
this.image = core.assets[ ‘./img/button.png’ ];
this.x = x; // X座標.
this.y = y; // Y座標.
this.buttonMode = mode; // ボタンモード.
}
});
[/javascript]

 では、このクラス「Button」を生成していた箇所は、自前で「core.rootScene.addChild();」を行う必要があるので、以下のようにコードを修正(追加)しよう。

[javascript firstline=”49″ highlight=”57,59,61,63″ title=”main.js”]
// バーチャルパッド(十字方向キーパッド)を生成.
var pad = new Pad();
pad.moveTo( 10, SCREEN_HEIGHT – 125 );
// ゲームのシーンにバーチャルパッド(十字方向キーパッド)を追加.
core.rootScene.addChild( pad );

// ゲームのシーンにバーチャルボタン(A/B/X/Y)を追加.
var btna = new Button( SCREEN_WIDTH – 60, SCREEN_HEIGHT – 100, ‘a’ );
core.rootScene.addChild( btna );
var btnb = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 60, ‘b’ );
core.rootScene.addChild( btnb );
var btnx = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 140, ‘x’ );
core.rootScene.addChild( btnx );
var btny = new Button( SCREEN_WIDTH – 140, SCREEN_HEIGHT – 100, ‘y’ );
core.rootScene.addChild( btny );

// バーチャルボタンをキーに割当て.
core.keybind( "X".charCodeAt( 0 ), ‘a’ ); // ‘X’キーに割当て.
core.keybind( "Z".charCodeAt( 0 ), ‘b’ ); // ‘Z’キーに割当て.
core.keybind( "S".charCodeAt( 0 ), ‘x’ ); // ‘S’キーに割当て.
core.keybind( "A".charCodeAt( 0 ), ‘y’ ); // ‘A’キーに割当て.
[/javascript]

■「バーチャルボタン(A/B/X/Y)」を戦闘シーンに追加

 目的の、戦闘シーンへの追加だ。コードは以下の通りとなる。core.rootSceneへの追加の仕方とまったく同じだ。イベントの受け方は、”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する”の記事と同じ考えで、「ENTER_FRAME」ではなく「BUTTON_DOWN」としている。

[javascript firstline=”203″ highlight=”207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235″ title=”main.js – function createScene()”]
var pad = new Pad(); // バーチャルパッド(十字方向キーパッド)を生成.
pad.moveTo( 10, SCREEN_HEIGHT – 125 ); // 表示座標を設定.
scene.addChild( pad ); // シーンに追加.

// シーンにバーチャルボタン(A/B/X/Y)を追加.
var btna = new Button( SCREEN_WIDTH – 60, SCREEN_HEIGHT – 100, ‘a’ );
scene.addChild( btna );
var btnb = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 60, ‘b’ );
scene.addChild( btnb );
var btnx = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 140, ‘x’ );
scene.addChild( btnx );
var btny = new Button( SCREEN_WIDTH – 140, SCREEN_HEIGHT – 100, ‘y’ );
scene.addChild( btny );

// Aボタン押下(DOWN)リスナー.
scene.onabuttondown = function() {
// 何らかの処理.
}

// Bボタン押下(DOWN)リスナー.
scene.onbbuttondown = function() {
// 何らかの処理.
}

// Xボタン押下(DOWN)リスナー.
scene.onxbuttondown = function() {
// 何らかの処理.
}

// Yボタン押下(DOWN)リスナー.
scene.onybuttondown = function() {
// 何らかの処理.
}
[/javascript]

■Coreへの制御はシーンを問わない制御になる

 ところで、”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる”の記事で、以下のように「core.onenterframe = function() {」としていたのだが、これだと、シーンを問わず、どんな時でもこのENTER_FRAME契機の処理が有効になってしまうので、変更しておこう。

[javascript firstline=”78″ highlight=”82″ title=”main.js”]
// キャラの表示指定.
chara.frame = 0;

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

 以下のように、取り敢えずはルートシーンにしておく。ルートシーンでのキャラ移動が目的の実装だったしネ。

[javascript firstline=”78″ highlight=”82″ title=”main.js”]
// キャラの表示指定.
chara.frame = 0;

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

 以上だ。以下の通り、「バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)」が表示されているぞ。

enchant151

(アシベズヘア@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のダウンロードと開発準備
  • コメントを残す

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