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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 文字列に「8bitファミコン風のWEBフォント(漢字も使える!フリー!)」を採用する”の記事でフォントも決めて、ゲームらしくなってきたので、いよいよ敵キャラを戦闘画面に配置してみることにする。

 これは単純。

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像を表示してみる”の記事と同様に、Spriteを配置するだけだ。

■敵キャラ(エネミー/モンスター)の画像を用意する

 表示するには画像が必要だ。ひとまず、「32px×32px」の敵キャラを用意しよう。描けない人、用意できない人は、以下の私が描いた「ウザイム」と「ウザイムフランボワーズ」を用いてほしい。

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

 ファイル名が「enemy32.png」で、この画像内に2体の敵キャラを描いているのは、「32px×32px」の敵キャラはこの画像内にすべて集約させて、Sprite.frameによって敵を読み出し分けるように制御するつもりだからだ。

■敵キャラ(エネミー/モンスター)を1体だけ配置する

 イメージが湧かないかもしれないので、コードを見て掴んでほしい。

[javascript firstline=”1″ highlight=”9,11,12,13,14,15″ title=”main.js”]
enchant();

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

var IMG_BG_SCENE_BATTLE = ‘./img/bgbattle.png’; // 戦闘シーン背景画像.
var IMG_BG_WINDOW_STATUS = ‘./img/windowstatus.png’; // ステータスウィンドウ背景画像.
var IMG_GAUGE_STATUS_HIDDEN = ‘./img/windowstatusgauge.png’; // ステータスゲージ隠し画像.
var IMG_ENEMY_32 = ‘./img/enemy32.png’; // 敵キャラ画像(32×32).

// 敵キャラ(32×32).
var ENEMY_32 = {
UZAIME: 0, // ウザイム.
UZAIME_FRAMBOISE: 1, // ウザイムフランボワーズ.
}

// バーチャルボタンを作成するクラス.
var Button = enchant.Class.create( enchant.Sprite, {
[/javascript]
[javascript firstline=”33″ highlight=”41″]
window.onload = function() {
// 表示領域を設定(幅と高さ).
core = new Core( SCREEN_WIDTH, SCREEN_HEIGHT );

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

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

// メイン処理を実行.
core.onload = function() {
[/javascript]
[javascript firstline=”125″ highlight=”158,159,160″]
/**
* 新しいシーンを作成する関数.
*/
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 ); // シーンに敵キャラを追加.

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

 敵キャラの生成はクラス化している。ドラクエでも戦闘には何匹もモンスターが出るだろう? 同じ処理を何度も書くのは面倒なので敵キャラ生成はクラスにして、呼び出すフレーム(第一引数)は列挙型風に定義した「ENEMY_32」から「ENEMY_32.UZAIME」を指定して、enemy32.pngのframeを決める。クラスは以下だ。

[javascript firstline=”325″ highlight=”332,333,334,335,336,337,338,339,340,341,342″ title=”main.js”]
// 半角英数字文字列を全角文字列に変換する関数.
String.prototype.toTwoByteAlphaNumeric = function() {
return this.replace( /[A-Za-z0-9]/g, function( s ) {
return String.fromCharCode( s.charCodeAt( 0 ) + 0xFEE0 );
});
}

// 敵キャラを作成するクラス.
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]

 表示するX座標とY座標を引数にしているが、ここでは画面幅のちょうど中央と、ステータスウィンドウから64px上に配置するように指定している(ステータスウィンドウのY座標は366)。Y座標を固定にするなら、引数を取らずにクラス内で指定してしまうのもありかと思うが、好きな位置に表示できるように今回はしている。

 実行結果は以下だ。ゲームらしくなってきたぞ。

enchant91

■ウザイムフランボワーズを表示する

 前述しているが、「ウザイムフランボワーズ」を表示したければ、enemy32.pngの表示frameを変更すれば良いだけだ。以下の通りだ。

[javascript firstline=”158″ highlight=”159″ title=”main.js”]
// 敵キャラの生成.
var enemy = new Enemy32( ENEMY_32.UZAIME_FRAMBOISE, (SCREEN_WIDTH – 32) / 2, 366 – 32 – (32 * 2) );
scene.addChild( enemy ); // シーンに敵キャラを追加.

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

 さみしいので、もう1体、「ウザイムピスターシュ」を表示してみる。アップロードの都合上、以下の画像の名前は変わってしまっているが、enemy32.pngに追加して描いている。

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

 列挙型風に定義した「ENEMY_32」に新たに「ENEMY_32.UZAIME_PISTACHE」を定義して、以下だ。

[javascript firstline=”159″ highlight=”160″ title=”main.js”]
// 敵キャラの生成.
var enemy = new Enemy32( ENEMY_32.UZAIME_PISTACHE, (SCREEN_WIDTH – 32) / 2, 366 – 32 – (32 * 2) );
scene.addChild( enemy ); // シーンに敵キャラを追加.

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

enchant93

■3体を同時に表示してみる

 単純に並べるだけだから、X座標を32pxずつの間隔で表示すれば良い。

[javascript firstline=”159″ highlight=”160,161,162,163,164,165,166″ title=”main.js”]
// 敵キャラの生成.
var enemy = new Enemy32( ENEMY_32.UZAIME, ((SCREEN_WIDTH – 32) / 2) – 32, 366 – 32 – (32 * 2) );
scene.addChild( enemy ); // シーンに敵キャラを追加.
var enemy = new Enemy32( ENEMY_32.UZAIME_FRAMBOISE, (SCREEN_WIDTH – 32) / 2, 366 – 32 – (32 * 2) );
scene.addChild( enemy ); // シーンに敵キャラを追加.
var enemy = new Enemy32( ENEMY_32.UZAIME_PISTACHE, ((SCREEN_WIDTH – 32) / 2) + 32, 366 – 32 – (32 * 2) );
scene.addChild( enemy ); // シーンに敵キャラを追加.

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

■戦闘といえば「たたかう」「とくぎ」「どうぐ」「ぼうぎょ」「にげる」

 コマンド選択をいよいよ実現していこう。まずその準備として、戦闘シーンに「バーチャルパッド(十字方向キーパッド)」を表示しておきたいと思う。はい⇒ ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する

(アシベズヘア@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体の敵キャラ(エネミー/モンスター)を配置する」への3件のフィードバック

    1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる

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

    3. Lore

      I feel that Max is after my own heart withMUPPET BURLESQUEHere are some for ya:VOLTRON LIONSLIGHTCYCLE RACES8-BIT GRAPHIC ATTACK!THE UNNAMED 8TH DWARFCUPCAKE WORLD WAHA-CTO-GENERIANOMOMRULKAMSNIA RUNNING WILD!orHULKAMANIA GONE WILD!

      返信

    コメントを残す

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