enchant.jsの使い方

チュートリアル的なものが見つからなかったので自己流で．

ステップ1: enchant.jsを読み込む

基本的にはenchant.jsを読みこめばよい．
スタート画面やゲームオーバー画面，ハイスコアの送信機能を使いたい場合はnineleap.enchant.jsが使える．
ui.enchant.jsはバーチャルパッド（タッチ操作）用．

<script src="enchant.min.js"></script>

ステップ2: enchant()

まず最初にenchant()を実行する必要がある．

ステップ3: Gameクラス

FPSなどの設定や画像の読み込みを行う．

var game = new Game(320, 320);
game.fps = 15;
game.preload('some.png');

ステップ4: Spriteクラス

Spriteクラスは座標の管理や画像の管理などを行ってくれる．画像は事前にpreload()していなければならない．
コンストラクタの引数は縦横の大きさ．
imageのサイズとSpriteのサイズが異なる場合にはimageの画像をSpriteのサイズで分割して表示する．分割の何番目かはSprite.frameに0から始まる番号を入れることで指定可能．

var player = new Sprite(100, 100);
player.moveTo(50, 50);
player.image = game.assets['some.png']

ステップ5: Eventクラス

クリックやタッチ，ループの各フレームの開始時などのイベントに対応して関数を実行出来る．
以下は各フレームに矢印キーをチェックして押されていればそちらの方向に移動する例．

player.addEventListener('enterframe', function() {
	var spd = 10;
	if (game.input.left) player.x -= spd;
	if (game.input.right) player.x += spd;
	if (game.input.up) player.y -= spd;
	if (game.input.down) player.y += spd;
};

ステップ6: Sceneクラス

Gameオブジェクトは複数のSceneオブジェクトを持っており，描画される各々のSpriteはSceneオブジェクトに登録されなければならない．
スタックで一番上にあるSceneのSpriteだけ'enterframe'イベントが発生する．（他のイベントも？）

var scene = new Scene();
scene.addChild(player);
game.pushScene(scene);

ステップ7: ゲーム開始

game.start();

まとめ

勉強もかねてenchant.jsに触ってみましたが，javascript素人だと結構難しいです．
enchant.jsの仕様などのドキュメントがなかなか見つかりませんでした．
サンプルプログラムから学べということみたいですね．

矢印キーを押したら円が動くだけのコード

enchant();

window.onload = function() {
	var game = new Game(320, 320);
	game.fps = 30;

	game.onload = function() {

		game.rootScene.backgroundColor = 'rgb(0, 0, 0)';

		var scene = new Scene();

		var player = new Sprite(100, 100);
		var image = new Surface(100, 100);
		image.context.beginPath();
		image.context.fillStyle = 'rgb(255, 255, 255)';
		image.context.arc(50, 50, 35, 0, Math.PI*2, false);
		image.context.fill();
		player.image = image


		player.x = game.width / 2;
		player.y = game.height - 20;
		scene.addChild(player);

		player.addEventListener('enterframe', function() {
			var speed = 10;
			if (game.input.left) player.x -= speed;
			if (game.input.right) player.x += speed;
			if (game.input.up) player.y -= speed;
			if (game.input.down) player.y += speed;
			
			player.x = Math.min(player.x, game.width - player.width);
			player.x = Math.max(player.x, 0);
			player.y = Math.min(player.y, game.height - player.height);
			player.y = Math.max(player.y, 0);

		});
		game.pushScene(scene);
	};
	game.start();
};