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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する”の記事では戦闘用のコマンド一覧を表示したので、続いては、戦闘シーンに突入した際の、「○○○○があらわれた!」的なメッセージウィンドウを表示してみたいと思う。

 メッセージを表示するだけなら「Label()」を用いればすぐにできてしまうので、ここでは、出現した敵キャラのステータス情報を作成しつつ、その情報の内のひとつである敵キャラの名前を参照してメッセージウィンドウに表示してみよう。

 これはだいぶRPGの画面っぽくなってくると思う。

■メッセージウィンドウの背景画像を用意する

 例によって、メッセージウィンドウの背景画像を作成した。用意できない人は、以下を用いてほしい。

windowmessage

 また、”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する”の記事で用いた戦闘用コマンドウィンドウの枠の太さが2dot小さかったので、以下のように太さを修正している(アップロードの関係上ファイル名がコードと異なってしまっている)。

windowcommand

 折角なので、ウザイムをもう一匹だけ追加して、こいつの名前をメッセージウィンドウに表示することにしよう。「ウザイムマング」だ(アップロードの関係上ファイル名がコードと異なってしまっている)。

enemy32
(※透過処理済:GIMPで特定の色を透明(透過)にする方法

■敵キャラのステータス情報を定義する

 それぞれのパラメータの詳細なデータ調整はここではしない。ステータスに何の情報を持たせるか、それをどうやって持たせるか、をここでは示していく。まず、ステータスは、以下を考えている。

[javascript firstline=”584″ highlight=”” title=”main.js”]
/**
* 敵キャラ情報.
* label : 名前
* system : 系統
* hp : HP
* sp : SP
* attack : 攻撃力
* defense : 守備力
* quick : 素早さ
* exp : 経験値
* recette : 通貨(ルセット)
* drop : 落とすアイテム
* behavior : 行動パターン
* ability : 特殊能力
* resist : 耐性
*/
var enemiesInfo = {
0: { label:"ウザイム", system:0, hp:100, sp:0, attack:1, defense:0, quick:0, exp:10, recette:10, drop:0, behavior:[0,1,2,3,4,5], ability:0, resist:0 },
1: { label:"ウザイムフランボワーズ", system:0, hp:100, sp:0, attack:1, defense:0, quick:0, exp:10, recette:10, drop:0, behavior:[0,1,2,3,4,5], ability:0, resist:0 },
2: { label:"ウザイムピスターシュ", system:0, hp:100, sp:0, attack:1, defense:0, quick:0, exp:10, recette:10, drop:0, behavior:[0,1,2,3,4,5], ability:0, resist:0 },
3: { label:"ウザイムマング", system:0, hp:100, sp:0, attack:1, defense:0, quick:0, exp:10, recette:10, drop:0, behavior:[0,1,2,3,4,5], ability:0, resist:0 },
}
[/javascript]

 情報は、今回、このようなテーブルにして持つように考えた。色々な方法があると思う。で、一番左側の数字、「0:」「1:」「2:」「3:」だが、これは、以下の列挙型風定義に紐づいている。

[javascript firstline=”21″ hightlight=”” title=”main.js”]
// 敵キャラ(32×32).
var ENEMY_32 = {
UZAIME: 0, // ウザイム.
UZAIME_FRAMBOISE: 1, // ウザイムフランボワーズ.
UZAIME_PISTACHE: 2, // ウザイムピスターシュ.
UZAIME_MANGUE: 3, // ウザイムマング.
}
[/javascript]

 このテーブルから情報を吸い出す際は、例えばウザイムマングなら、「var enemy = enemiesInfo[ ENEMY_32.UZAIME_MANGUE ];」とすれば良いわけだ。直感的にも分かり易くないだろうか?

■敵キャラを作成するクラスを改造する

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する”の記事で、32×32の敵キャラを表示する為のクラスを以下のように作成した。

[javascript firstline=”526″ highlight=”” title=”main.js”]
// 敵キャラを作成するクラス.
var Enemy32 = enchant.Class.create( enchant.Sprite, {
// コンストラクタ.
initialize: function( frame, x, y ) {
enchant.Sprite.call( this, 32, 32 ); // 継承元をコール、幅と高さを設定.
this.image = core.assets[ IMG_ENEMY_32 ]; // 敵キャラ画像(32×32)を設定.
this.x = x; // X座標.
this.y = y; // Y座標.
this.frame = frame; // 指定した敵キャラのフレームを設定.
}
});
[/javascript]

 このクラスに敵キャラのステータス情報を保持するようにし、且つ、32×32専用のクラスではなく、汎用的なサイズのクラスに変更してみたものが、以下となっている。

[javascript firstline=”538″ highlight=”” title=”main.js”]
// 敵キャラを作成するクラス.
var Enemy = enchant.Class.create( enchant.Sprite, {
// コンストラクタ.
initialize: function( no, x, y ) {
if ( 100 > no ) {
enchant.Sprite.call( this, 32, 32 ); // 継承元をコール、幅と高さを設定.
this.image = core.assets[ IMG_ENEMY_32 ]; // 敵キャラ画像(32×32)を設定.
this.frame = no; // 指定した敵キャラのフレームを設定.
} else if ( 200 > no ) {
enchant.Sprite.call( this, 64, 64 ); // 継承元をコール、幅と高さを設定.
this.image = core.assets[ IMG_ENEMY_64 ]; // 敵キャラ画像(64×64)を設定.
this.frame = no – 100; // 指定した敵キャラのフレームを設定.
} else if ( 300 > no ) {
enchant.Sprite.call( this, 96, 96 ); // 継承元をコール、幅と高さを設定.
this.image = core.assets[ IMG_ENEMY_96 ]; // 敵キャラ画像(96×96)を設定.
this.frame = no – 200; // 指定した敵キャラのフレームを設定.
}
this.x = x; // X座標.
this.y = y; // Y座標.

this.no = no; // No.
this.label = enemiesInfo[ no ].label; // 名前.
this.system = enemiesInfo[ no ].system; // 系統.
this.hp = enemiesInfo[ no ].hp; // HP.
this.sp = enemiesInfo[ no ].sp; // SP.
this.attack = enemiesInfo[ no ].attack; // 攻撃力.
this.defense = enemiesInfo[ no ].defense; // 守備力.
this.quick = enemiesInfo[ no ].quick; // 素早さ.
this.exp = enemiesInfo[ no ].exp; // 経験値.
this.recette = enemiesInfo[ no ].recette; // 通貨(ルセット).
this.drop = enemiesInfo[ no ].drop; // 落とすアイテム.
this.behavior = enemiesInfo[ no ].behavior; // 行動パターン.
this.ability = enemiesInfo[ no ].ability; // 特殊能力.
this.resist = enemiesInfo[ no ].resist; // 耐性.
},
getLabel: function() {
return this.label; // 名前を返却.
}
});
[/javascript]

 第一引数の「no」には「ENEMY_32.UZAIME_MANGUE」などを入れ、この値が100未満なら32×32の敵キャラ、200未満なら64×64の敵キャラ・・・・・・という具合にしている。なので64×64の敵キャラを定義するときは100から始める必要がある。

 メッセージウィンドウに表示する為に、ひとまず、getterは名前を取得する「getLabel()」のみを用意した。

■メッセージウィンドウを表示するクラスを作成する

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する”の記事で作成したコマンドウィンドウとまったく同じ考え方で、Group()を継承して作成している。

[javascript firstline=”278″ highlight=”” title=”main.js”]
// メッセージウィンドウを作成するクラス.
var MessageWindow = 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( 480, 64 ); // 幅と高さを設定.
bg.image = core.assets[ IMG_BG_WINDOW_MESSAGE ]; // メッセージウィンドウの背景画像を設定.
bg.x = 0; // X座標(グループ内相対).
bg.y = 0; // Y座標(グループ内相対).
this.addChild( bg ); // グループに背景画像を追加.

var line1 = new Label("テキスト1行目"); // メッセージ文字列を生成.
line1.font = "20px PixelMplus10"; // 文字サイズとWEBフォントの設定.
line1.color = ‘#f8f8f8’; // 文字色の設定.
line1.x = 26; // X座標(グループ内相対).
line1.y = 10; // Y座標(グループ内相対).
line1.width = 400; // 20文字分(20×20)の幅を確保.
line1.textAlign = "left"; // 左揃えに設定.
this.addChild( line1 ); // グループにメッセージ文字列を追加.

var line2 = new Label("テキスト2行目"); // メッセージ文字列を生成.
line2.font = "20px PixelMplus10"; // 文字サイズとWEBフォントの設定.
line2.color = ‘#f8f8f8’; // 文字色の設定.
line2.x = 26; // X座標(グループ内相対).
line2.y = 34; // Y座標(グループ内相対).
line2.width = 400; // 20文字分(20×20)の幅を確保.
line2.textAlign = "left"; // 左揃えに設定.
this.addChild( line2 ); // グループにメッセージ文字列を追加.
},
setText: function( text1, text2 ) {
this.childNodes[ 1 ].text = text1; // メッセージ文字列の更新.
this.childNodes[ 2 ].text = text2; // メッセージ文字列の更新.
}
});
[/javascript]

 「Group.childNodes」ですべての子にアクセスが可能だ。一番初めにGroupに追加したのがSprite(背景画像)、次がLabel(テキスト一行目)、次がLabel(テキスト二行目)だから、それぞれ配列の要素、0、1、2、の順で格納されている。単純で分かり易い仕組みだと思う。

■メッセージウィンドウに敵キャラの名前を表示する

 では、準備OKなので、メッセージウィンドウに敵キャラの名前を表示してみよう。

[javascript firstline=”187″ highlight=”192,195,196,197″ title=”main.js – function createScene()”]
var cmd5 = new CommandWindow( (WINDOW_COMMAND_WIDTH * 4), WINDOW_COMMAND_Y );
cmd5.setText( "逃走" );
scene.addChild( cmd5 );

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

var msg = new MessageWindow( 0, 0 );
msg.setText( enemy.getLabel() + "が", "襲い掛かってきた!" );
scene.addChild( msg ); // シーンにメッセージウィンドウを追加.

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

(アシベズヘア@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)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに表示する敵キャラのステータス情報を作成して、その名前をメッセージウィンドウに表示する」への1件のフィードバック

    1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに複数の敵キャラを表示する

    コメントを残す

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