ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像を表示してみる

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備”の記事で用意した「ひな型コード」と「キャラ画像」を用いて、取り敢えず、キャラ画像を表示してみたいと思う。

■まずはコード

 まず、早速だが、コードは以下となる(そのままコピーして使えるぞ☆)。表示領域は、640×480のVGA(Video Graphics Array)にしている。

[javascript firstline=”1″ highlight=”15,16,17,18,19,20,21,22″]
enchant();

window.onload = function() {
// 表示領域を設定(幅と高さ).
var game = new Game( 480, 640 );

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

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

// メイン処理を実行.
game.onload = function() {
// キャラを配置、幅と高さを設定.
var chara = new Sprite( 96, 64 );
// 予め読込した画像を設定.
chara.image = game.assets[ ‘./img/xxx.png’ ];
// ゲームのシーンにキャラを追加.
game.rootScene.addChild( chara );
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8’;
}

// ゲームをスタート.
game.start();
}
[/javascript]

 game.preload()で素材を読み込んだら、Sprite()で96px×64pxのスプライトというものを用意する。スプライトのimageプロパティに読み込んだ素材を割り当てて、addChild()でゲーム内に配置する。これで、キャラが表示される。

 如何だろうか。

 出来上がったら、適当なWEBブラウザで開いて確認してみてほしい。以下のように表示されれば、成功だ!(以下はGoogle Chromeで開いた場合のキャプチャである)

enchant01

■Spriteで分割、frameで表示指定

 もうお気づきの人もいるかとは思うが、Sprite()の引数にサイズを指定すると、用意した画像(ここではxxx.png)をその指定したサイズで分割してくれる。分割されたそれぞれの画像は、「frameプロパティ」で表示指定が可能だ。

 例えば、

[javascript firstline=”17″ highlight=”24,25″]
// 予め読込した画像を設定.
chara.image = game.assets[ ‘./img/xxx.png’ ];
// ゲームのシーンにキャラを追加.
game.rootScene.addChild( chara );
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8’;

// キャラの表示指定.
chara.frame = 1;
}
[/javascript]

 とすると、

enchant02

 このように足が動いた画像が表示されて、或いは、

[javascript firstline=”17″ highlight=”24,25″]
// 予め読込した画像を設定.
chara.image = game.assets[ ‘./img/xxx.png’ ];
// ゲームのシーンにキャラを追加.
game.rootScene.addChild( chara );
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8’;

// キャラの表示指定.
chara.frame = 7;
}
[/javascript]

 とすると、

enchant03

 このように後ろを向いた画像が表示される。分割された画像は0オリジンで、以下のように番号(インデックス)が割り当てられている。

enchant04

 この画像(xxx.png)の場合、12分割されるので、例えば「12」を指定すると「0」の画像が表示され、「13」を指定すると「1」の画像が表示される。

■キャラの表示だけじゃなく、動かしたい!

 折角こうやってキャラを表示したんだから、キー入力とかで動かしたいでしょ! その詳細は、こちらの記事”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる”で。

(アシベズヘア@ashibehair_m

ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像を表示してみる」への13件のフィードバック

  1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 導入篇 enchant.jsのダウンロードと開発準備

  2. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 導入篇 キャラクター画像をキー入力で動かしてみる

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

  4. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに切り替える

  5. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する

  6. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスゲージ(HPゲージ)を表示する

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

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

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

  10. ピンバック: materialize.jp » WebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)

  11. ヴィヴィ

    この記事の通り作ってクロームを表示させましたが、真っ暗で何も表示されません。

    返信
  12. ピンバック: ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備 | materialize.jp

コメントを残す

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