enchant.js:enchant.jsはじめました

2013/03/27

以前は、マルチデバイス向けの少しリッチなUIを持ったWebコンテンツは、Flashで制作してました。ブラウザによる動作の違いもFlashプラグインが吸収してくれるので、コンテンツ自体の制作に集中できて助かっていました。

「スマホ向けのFlashプラグインが提供されなくなった今、何を使って作れば良いんだろう？」

たどり着いたのがenchant.jsでした。

enchant.jsは、もともとはゲーム開発向けなのかもしれないけど、タフな動作が要求されるゲーム向けのフレームワークは、ゲーム以外のコンテンツ制作にも向いていると思っています。enchant.jsで出力される内容はdiv要素(canvas)として表示されるため、ブラウザや環境による互換性もかなり確保されていると思われます。

とりあえず、使いはじめるまでのメモを残しておきます。

セットアップ

enchant.jsのサイトからフレームワークをダウンロードします。

enchant.js : http://enchantjs.com/ja/

(2013/03/27) Downloadページから、(安定版、推奨)と書かれたv0.6.2をダウンロードしました。

テストプログラム

画面に「Hello, enchant.js!」と表示するプログラムを作成します。

ダウンロードしたzipファイルを解凍して、enchant.jsファイルを作業フォルダにコピーします。

HTMLファイル(index.html)を作成

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>enchant.js sample</title>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<script type="text/javascript" src="enchant.js"></script>
	<script type="text/javascript" src="main.js"></script>
</head>
<body>
	<div id="enchant-stage"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>enchant.js sample</title>

</head>

<body>

</body>

</html>

プログラム本体(main.js)を作成

enchant();
window.onload = function () {
	var game = new Game(320, 320);
	game.onload = function () {
		var label = new enchant.Label();
		label.text = "Hello, enchant.js!";
		label.width = 256;
		label.height = 64;
		label.font = "24px 'Arial'";
		game.rootScene.addChild(label);
	};
	game.start();
}

enchant();

window.onload = function () {

var game = new Game(320, 320);

game.onload = function () {

var label = new enchant.Label();

label.text = "Hello, enchant.js!";

label.width = 256;

label.height = 64;

label.font = "24px 'Arial'";

game.rootScene.addChild(label);

};

game.start();

}

実行結果

地味な内容ですが、無事enchant.jsが動きました。enchant.jsで何が出来るのかは、これから徐々に見て行きたいと思っています。

Pocket

Check