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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する”の記事で「バーチャルパッド(十字方向キーパッド)」の準備ができたので、次は戦闘用のコマンド一覧を表示して、バーチャルパッド(十字方向キーパッド)の(もしくはキーボードの)左右キーでコマンドを選択するところまでを実現してみよう。

 戦闘用のコマンドは、ここでは、

「攻撃」
「特技」
「道具」
「防御」
「逃走」

 の5つで構成する。

■戦闘用コマンド一覧の背景画像を用意する

 戦闘用のコマンドウィンドウには、以下の背景画像を用いることにする。選択中は「白くハイライト」することでユーザーへ示すことにしたので、ハイライト用もセットでひとつの画像として作成している。

windowcommand

 ハイライト時は、この画像のフレームを切り替えることで実現する。通常時は「Sprite.frame = 0」(画像の左側)で、ハイライト時は「Sprite.frame = 1」(画像の右側)という具合だ。

■戦闘用コマンド一覧を表示する、まずは定義

 まずは定義だ。ステータスウィンドウもついでにサイズ定義しておいた(していなかったので)。コマンドウィンドウは、ステータスウィンドウと敵キャラの間に表示するつもりだ。

        敵キャラ
「攻撃」「特技」「道具」「防御」「逃走」
     ステータスウィンドウ

 コマンドウィンドウの表示位置はステータスウィンドウの表示位置を用いて定義しているので、ステータスウィンドウの定義の後に書かないと正しく参照してくれない(0扱いされる)ので、注意が必要だ。必ず、参照する定義は先に書いておこう。

[javascript firstline=”1″ highlight=”10,11,12,16″ title=”main.js”]
enchant();

var SCREEN_WIDTH = 480; // ゲーム画面の幅.
var SCREEN_HEIGHT = 640; // ゲーム画面の高さ.

var WINDOW_STATUS_WIDTH = 120; // ステータスウィンドウの幅.
var WINDOW_STATUS_HEIGHT = 124; // ステータスウィンドウの高さ.
var WINDOW_STATUS_Y = 366; // ステータスウィンドウのY座標.

var WINDOW_COMMAND_WIDTH = 96; // コマンドウィンドウの幅.
var WINDOW_COMMAND_HEIGHT = 36; // コマンドウィンドウの高さ.
var WINDOW_COMMAND_Y = (WINDOW_STATUS_Y – 64 + ((64 – WINDOW_COMMAND_HEIGHT) / 2)); // コマンドウィンドウのY座標.

var IMG_BG_SCENE_BATTLE = ‘./img/bgbattle.png’; // 戦闘シーン背景画像.
var IMG_BG_WINDOW_STATUS = ‘./img/windowstatus.png’; // ステータスウィンドウ背景画像.
var IMG_BG_WINDOW_COMMAND = ‘./img/windowcommand.png’; // コマンドウィンドウ背景画像.
var IMG_GAUGE_STATUS_HIDDEN = ‘./img/windowstatusgauge.png’; // ステータスゲージ隠し画像.
var IMG_ENEMY_32 = ‘./img/enemy32.png’; // 敵キャラ画像(32×32).
[/javascript]
[javascript firstline=”43″ highlight=”51″]
window.onload = function() {
// 表示領域を設定(幅と高さ).
core = new Core( SCREEN_WIDTH, SCREEN_HEIGHT );

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

// pre(前)-load(読み込み)、ゲームで使用する素材を予め読込.
core.preload( ‘./img/xxx.png’, ‘./img/button.png’, IMG_BG_SCENE_BATTLE, IMG_BG_WINDOW_COMMAND, IMG_BG_WINDOW_STATUS, IMG_GAUGE_STATUS_HIDDEN, IMG_ENEMY_32 );

// メイン処理を実行.
core.onload = function() {
[/javascript]

■クラスを考える

 コマンドを表示するクラスは以下のように作成する。

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する”の記事でステータスウィンドウを作成する際には用いなかった「Groupクラス」を継承して実現している。

 ステータスウィンドウで実施した方法では、実は、生成時は表示されるが、その後はうまく動かない(騙してゴメン)。また、複数のパーツでひとつのものを実現するなら、「Groupクラス」を用いるのが最適だろう。

 例えば、今回作成するコマンドウィンドウなら、背景画像の上にひとつの文字列(ラベル)を乗っけて、それらをひっくるめて「ひとつのコマンドウィンドウ」として作成するので、

 Scene (戦闘シーン)
  ┗Group (コマンドウィンドウ)
    ┗Sprite (背景画像)
    ┗Label  (文字列)

 こういう構成になるのが好ましいのだ。

[javascript firstline=”271″ highlight=”272,275,283,292,295,299,300,302,303,307″ title=”main.js”]
// コマンドウィンドウを作成するクラス.
var CommandWindow = enchant.Class.create( enchant.Group, {
// コンストラクタ.
initialize: function( x, y ) {
enchant.Group.call( this ); // 継承元をコール.
this.x = x; // コマンドウィンドウを表示するX座標.
this.y = y; // コマンドウィンドウを表示するY座標.

var bg = new Sprite( 96, 36 ); // 幅と高さを設定.
bg.image = core.assets[ IMG_BG_WINDOW_COMMAND ]; // コマンドウィンドウの背景画像を設定.
bg.x = 0; // X座標(グループ内相対).
bg.y = 0; // Y座標(グループ内相対).
this.addChild( bg ); // グループに背景画像を追加.

var commandLabel = new Label("こまんど"); // コマンド文字列を生成.
commandLabel.font = "20px PixelMplus10"; // 文字サイズとWEBフォントの設定.
commandLabel.color = ‘#f8f8f8’; // 文字色の設定.
commandLabel.x = 8; // X座標(グループ内相対).
commandLabel.y = 8; // Y座標(グループ内相対).
commandLabel.width = 80; // 4文字分(20×4)の幅を確保.
commandLabel.textAlign = "center"; // 中央揃えに設定.
this.addChild( commandLabel ); // グループにコマンド文字列を追加.
},
setText: function( value ) {
this.lastChild.text = value; // コマンド文字列の更新.
},
setHighlight: function( value ) {
if ( true == value ) {
this.firstChild.frame = 1; // ハイライト用のフレームへ変更.
this.lastChild.color = ‘#303030’; // ハイライト用の文字色へ変更.
} else {
this.firstChild.frame = 0; // 通常のフレームへ変更.
this.lastChild.color = ‘#f8f8f8’; // 通常の文字色へ変更.
}
},
isHighlight: function() {
if ( 1 == this.firstChild.frame ) { // ハイライト用のフレームが設定されている.
return true;
} else {
return false;
}
}
});
[/javascript]

 Sceneクラスと同じように、Groupに対してaddChild()していく。初めにaddChild()するものが一番背面に表示され、後にaddChild()すればするほど前面に表示される、Sceneへの追加の考え方とまったく同じだ。

 ところで、Groupへ一番最初にaddChild()したものは「Group.firstChild」で取得できる。また、一番最後にaddChild()したものは「Group.lastChild」で取得できる。今回、このクラスに3つのI/Fを用意しているが、

・setText    (文字列を設定する)
・setHighlight (ハイライトを設定する)
・isHighlight  (今ハイライト状態になっているか確認する)

 それぞれaddChild()したオブジェクトには「Group.firstChild」(Sprite)、「Group.lastChild」(Label)の方法でアクセスを行っている。

■戦闘用コマンド一覧を表示する

 上記で実装したクラスを生成してSceneに追加すれば、それだけでコマンドウィンドウの表示が可能だ。

[javascript firstline=”135″ highlight=”168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187″ 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, WINDOW_STATUS_Y ); // ステータスウィンドウを作成.
sw1.setName( "アプフェル" ); // 名前を設定.
sw1.setHP( 9999 ); // HPを設定.
sw1.setSP( 999 ); // SPを設定.
sw1.setLV( 99 ); // レベルを設定.

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

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

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

var cmd1 = new CommandWindow( 0, WINDOW_COMMAND_Y );
cmd1.setText( "攻撃" );
cmd1.setHighlight( true );
scene.addChild( cmd1 );

var cmd2 = new CommandWindow( WINDOW_COMMAND_WIDTH, WINDOW_COMMAND_Y );
cmd2.setText( "特技" );
scene.addChild( cmd2 );

var cmd3 = new CommandWindow( (WINDOW_COMMAND_WIDTH * 2), WINDOW_COMMAND_Y );
cmd3.setText( "道具" );
scene.addChild( cmd3 );

var cmd4 = new CommandWindow( (WINDOW_COMMAND_WIDTH * 3), WINDOW_COMMAND_Y );
cmd4.setText( "防御" );
scene.addChild( cmd4 );

var cmd5 = new CommandWindow( (WINDOW_COMMAND_WIDTH * 4), WINDOW_COMMAND_Y );
cmd5.setText( "逃走" );
scene.addChild( cmd5 );
[/javascript]

 それぞれのコマンドの名称を「setText()」で設定して、「攻撃」のコマンドには初期ハイライトを設定している。実行結果は以下の通りだ。

enchant111

■コマンドを左右キーで選択する

 左右キーのひと押下で、ひとつ左右にハイライトを動かすようにしてみよう。”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する”の記事で用意した「onrightbuttondown」と「onleftbuttondown」に実装だ。

[javascript firstline=”207″ highlight=”209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244″ title=”main.js – function createScene()”]
// 右キー押下(DOWN)リスナー.
scene.onrightbuttondown = function() {
if ( true == cmd1.isHighlight() ) {
cmd1.setHighlight( false );
cmd2.setHighlight( true );
} else if ( true == cmd2.isHighlight() ) {
cmd2.setHighlight( false );
cmd3.setHighlight( true );
} else if ( true == cmd3.isHighlight() ) {
cmd3.setHighlight( false );
cmd4.setHighlight( true );
} else if ( true == cmd4.isHighlight() ) {
cmd4.setHighlight( false );
cmd5.setHighlight( true );
} else if ( true == cmd5.isHighlight() ) {
cmd5.setHighlight( false );
cmd1.setHighlight( true );
}
}

// 左キー押下(DOWN)リスナー.
scene.onleftbuttondown = function() {
if ( true == cmd1.isHighlight() ) {
cmd1.setHighlight( false );
cmd5.setHighlight( true );
} else if ( true == cmd2.isHighlight() ) {
cmd2.setHighlight( false );
cmd1.setHighlight( true );
} else if ( true == cmd3.isHighlight() ) {
cmd3.setHighlight( false );
cmd2.setHighlight( true );
} else if ( true == cmd4.isHighlight() ) {
cmd4.setHighlight( false );
cmd3.setHighlight( true );
} else if ( true == cmd5.isHighlight() ) {
cmd5.setHighlight( false );
cmd4.setHighlight( true );
}
}
[/javascript]

 現在のハイライト位置をisHighlight()で確認して、それの左右のコマンドを新たにsetHighlight(true)で設定する。ハイライトしていたコマンドはsetHighlight(false)で通常の表示に戻す。

 上記を実行した動画をここに置いておく「左右キー操作でコマンドを動かしている動画」。ご覧あれ。

■「○○○○があらわれた!」

 コマンドウィンドウを表示したので、この流れで次はメッセージウィンドウも表示してしまおう。敵キャラのステータス情報をテーブルか何かに定義して、その情報を参照した形でメッセージウィンドウを表示してみたいと思う。記事? こちら⇒”ゲーム開発を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)で! 【導入篇】 バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示してみる

    2. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに表示する敵キャラのステータス情報を作成して、その名前をメッセージウ

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

    4. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに表示するメッセージを自動送りできるようにする

    コメントを残す

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