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で開いた場合のキャプチャである）

■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]

　とすると、

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

[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]

　とすると、

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

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

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

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

（アシベズヘア@ashibehair_m）