JavaScriptベースのゲームエンジン「enchant.js」を触ってみた

プラチナ・ザッパ・トリニティ(ランダム的な意味で)の配信を一日勘違いしてました。
仕方ないのでハザマさんでヒャッハーしてたらXBOX Liveの接続が切れてしょんぼりです。


さて。
GW中に「9leap 9Days Challenge!」ってイベントが行われたりと話題なenchant.jsを触ってみました。
人生初めてのJavaScriptだったりします。
開発環境

ひとまずこちらのチュートリアルの前半をせこせこと。
4Gamer.net ― 「enchant.js」でゲームを作ろう! HTML5とJavaScriptによるアクションゲーム制作入門(ミドルウェア/開発ツール)
クマをなんかするところだけですが終わりましたので貼っつけておきます。
test01
JavaScriptこちら。みたい人居ないと思いますが。
なおIEだとエラーが出て動かないとかなんとかなのでお気をつけを。 *1
せっかくなので以下の機能を昔AS2.0触ってたのを思い出しながら付け足しました。

  • 上下左右キーで任意の方向へ動く
  • 移動中のみアニメーション
  • zキーで初期位置へ移動
  • xキー押しながらで速度アップ
  • 枠外への飛び出し防止(俗に言う世界の壁)

せめてつけたい物

  • バーチャルパッド
  • もしくはタッチで誘導するUI

まぁなんというか、せっかくなんだからスマートフォンで動かしてみたいですよね。
できれば手持ちのXperiaで。
明日への課題にします。
以下途中悩んだところ。

  • pluginのnineleapを指定してたためstart.pngとend.pngが無いと進まなかった
  • bearをbaerと打ち間違える(頻出)

baerばっか怒られました…
デベロッパツールのおかげでどこでエラーが出てるのか一目瞭然で大変便利でした。
あとはコード保管とかできるエディターがあればなぁと。
まぁまだしばらくはこのままで問題なさそうですけども。
それよりもリファレンスとか読むのが先の予感。
それでは。

おまけ

スーパーpre記法の実験

enchant();
window.onload = function() {
	var game = new Game(320, 320);
	game.preload('bear.gif');
	game.keybind(90, 'a'); // z
	game.keybind(88, 'b'); // x
	game.onload = function() {
		var bear = new Sprite(20, 30);
		bear.image = game.assets['bear.gif'];
		bear.dir = 1;
		bear.spd = 3;
		bear.n = 0;
		bear.move = false;
		bear.addEventListener('enterframe', function() {
			// bボタンで速度10
			if(game.input.b) {
				bear.spd = 10;
			}
			
			// 各方向ボタンのアクションリスナー
			if(game.input.left) {
				bear.x -= bear.spd;
				bear.move = true;
			}
			if(game.input.right) {
				bear.x += bear.spd;
				bear.move = true;
			}
			if(game.input.up) {
				bear.y -= bear.spd;
				bear.move = true;
			}
			if(game.input.down) {
				bear.y += bear.spd;
				bear.move = true;
			}
			
			// 世界の壁
			if (bear.x < 0) {
				bear.x = 0
			} else if (bear.x >= game.width-20) {
				bear.x = game.width-20;
			}
			if (bear.y < 0) {
				bear.y = 0
			} else if (bear.y >= game.width-30) {
				bear.y = game.width-30;
			}

			// aボタンで定点位置へ移動
			if(game.input.a) {
				bear.x = bear.dir;
				bear.y = bear.dir;
			}

			// クマの歩きアニメーション
			if(bear.move) {
				bear.n++;
				bear.frame=((bear.n %= 4) < 2) ? bear.n : (bear.n != 2)*2;
			}
			bear.move = false;
			bear.spd = 3;
		});
		game.rootScene.addChild(bear);
	};
	game.start();
};

*1:PlatformにはIE9とあるのでIE9なら大丈夫かも