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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 複数の敵キャラが現れた時とか、戦闘が進んでいくシーンでは、ユーザーの入力なしに次々にメッセージを表示させて臨場感を持たせたい。

 先に複数のメッセージを登録しておいて、ある一定の時間が経過したら、登録してある次のメッセージを表示する、という方法で実現してみよう。もちろん、やり方は他にもいっぱいあると思う。

 コードは”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに複数の敵キャラを表示する”の記事で用いたものを継続して使用する。

■「メッセージウィンドウ」クラスにI/Fを追加する

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに表示する敵キャラのステータス情報を作成して、その名前をメッセージウィンドウに表示する”の記事で「メッセージウィンドウ」クラスを作成したが、このクラスに、自動送り用のI/Fを追加する。

[javascript firstline=”277″ highlight=”309,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329″ 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 ); // グループにメッセージ文字列を追加.

this.autoText = new Array(); // 自動送り用メッセージを格納しておく配列.
},
setText: function( text1, text2 ) {
this.childNodes[ 1 ].text = text1; // メッセージ文字列の更新.
this.childNodes[ 2 ].text = text2; // メッセージ文字列の更新.
},
setAutoText: function( text1, text2 ) {
this.autoText.push( [ text1, text2 ] ); // 自動送り用メッセージに登録.
},
startAutoText: function() {
this._showAutoText( this ); // 自動送り用メッセージの表示.
},
_showAutoText: function( me ) {
if ( 0 == me.autoText.length ) { // 自動送り用メッセージが無くなったら終了.
return;
}
var at = me.autoText.shift(); // 自動送り用メッセージの取得.
me.childNodes[ 1 ].text = at[ 0 ]; // メッセージ文字列の更新.
me.childNodes[ 2 ].text = at[ 1 ]; // メッセージ文字列の更新.
setTimeout( me._showAutoText, 400, me ); // 400msでメッセージを自動送り.
}
});
[/javascript]

 「setAutoText()」で表示したいメッセージをどんどん溜めておいて(Arrayにpushで)、「startAutoText()」で自動送り表示をスタートだ。400ms間隔でタイマーを張っている(328行目、setTimeout)。

 「_showAutoText()」は、外部から呼ばれたくなかったので、形式的にアンダーバーを付与した。こうしたらスコープがprivateになるわけではなく、”外部から呼んだらダメよ”という人間対人間のお約束なだけだ。

 ちなみに、これはJavaScriptの話だが、setTimeoutのコールバックとして「_showAutoText()」が呼ばれた場合は、コンテキストが異なるので、「this」を参照することができない。なので、引数に、「me」として敢えて渡してある(setTimeoutの第三引数は、第一引数に設定したコールバック関数の第一引数になる)。

 ところで、自動送りの精度をPC上のWEBブラウザで実測してみたのだが、「400,401,402,403」という数値となっていて、400msを下回ることは一度もなかった。下回ることがあれば補正を掛けようと思っていたが、遅れも3ms程度なので、今回は敢えて設けないでおこうと思う。

■自動送り用のメッセージを登録する

 では複数の敵キャラと遭遇した際に、「○○○○があらわれた!」×敵キャラ数分だけ、メッセージを自動送りで表示してみよう。

[javascript firstline=”178″ highlight=”182,183,188,189,190,191,192″ title=”main.js – function createScene()”]
var cmd5 = new CommandWindow( (WINDOW_COMMAND_WIDTH * 4), WINDOW_COMMAND_Y );
cmd5.setText( "逃走" );
scene.addChild( cmd5 );

var msg = new MessageWindow( 0, 0 );
scene.addChild( msg ); // シーンにメッセージウィンドウを追加.

var enemyGroup = createEnemyGroup( areaInfo[ 0 ] ); // 敵キャラを生成.
scene.addChild( enemyGroup ); // シーンに敵キャラを追加.

for ( var i = 0 ; i < enemyGroup.childNodes.length ; i++ ) { // 自動送り用メッセージに全敵キャラ分を登録.
msg.setAutoText(
enemyGroup.childNodes[ i ].getLabel() + "が", "襲い掛かってきた!" );
}
msg.startAutoText(); // メッセージの自動送りスタート.

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

 用意したI/Fを呼び出すだけ、とても単純だ。実行結果の動画をこちらにおいておく(○○○○があらわれた!を自動で送る動画)。

(アシベズヘア@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(ロールプレイングゲーム)篇】 戦闘シーンの「攻撃」コマンドで複数の中なら一体の敵キャラを選択する(戦闘突入直

    コメントを残す

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