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)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる”で。
≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる
≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備
(アシベズヘア@ashibehair_m)
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 導入篇 enchant.jsのダウンロードと開発準備
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 導入篇 キャラクター画像をキー入力で動かしてみる
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(方向キーパッド)で動かしてみる
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに切り替える
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスゲージ(HPゲージ)を表示する
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルパッド(十字方向キーパッド)を表示する
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにバーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示する
ピンバック: materialize.jp » WebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)
この記事の通り作ってクロームを表示させましたが、真っ暗で何も表示されません。
自己解決しました
ピンバック: ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備 | materialize.jp