今流行のArctic.jsと、enchant.jsの比較
Posted on 2012-01-26 by y_okayaこんにちは
ライセンス云々で話題になっていたArctic.jsですが、スマフォに特化したCanvas Frameworkということで
機能的にどうなのか、というところが大変気になります。弊社では同じゲーム向けのJSFrameworkとして、
enchant.jsを使用しているので機能をざっくり比較してみようと思います。
機能の差
| Arctic.js | enchant.js | |
|---|---|---|
| サイズ(byte) | 90851 | 88593 |
| 圧縮後サイズ(byte) | 36696 | 33570 |
| オブジェクトの描画 | canvas上 | div毎 |
| License | MIT | MIT or GPLv3 |
圧縮後のファイルサイズはenchant.jsのほうが3kbほど少ないですね。
どちらもjs上に継承などを行う擬似クラスを作るためのClass要素があったり、スマートフォン/PC両方で使えるようにtouch系イベントとmouseDown/Move系イベントを判定したり、fps(フレーム数）を設定してフレーム毎のイベントを設定するなどしています。
Arctic.jsだけにある機能としては、Ajax対応（ただしJSONPはサポートしていないので、すべて同ドメインのサーバで処理する必要がある）、FLASHライクなタイムライン指定でのアニメーション機能があります。
反対に、enchant.jsだけにある機能としてはaudio要素への対応としてのSoundオブジェクト、RPGのフィールドマップのようなものを作るMapオブジェクト、あとはプロパティ型の記述ができるのが特徴でしょうか。
label.text = 'abc'; img.x=12; と書くenchant.jsのほうが、
labe.setText('abc'); img.setX(12); とするArctic.jsよりも直感的ですよね。
後発だけあって、Arctic.jsのほうはenchant.jsの機能をパクったenchant.jsにある基本的な機能はだいたいあるような感じですね。
オブジェクトの描画についてですが、Canvasでの描画の方が性能的に有利かもしれませんが、enchant.jsは
divタグ毎にオブジェクトに持っていることで利便性をあげています。既存のアニメーション効果をdivタグ単位で
適応することにより、今までのエフェクトを使いまわすことができるのです。
enchant.jsと他のライブラリを合わせて使うサンプルはこちらのブログに具体的な実装方法が書かれていたので、実装方法はリンク先を御覧ください。
スプライトするまでのコードの比較
Arctic.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Sprite</title>
<script type="text/javascript" src="./arctic.js"></script>
<script type="text/javascript">
var GameMain = arc.Class.create(arc.Game, {
initialize:function(params) {
var sp = new arc.display.Sprite(this._system.getImage('a.png'));
sp.setX(10);
sp.setY(10);
this.addChild(sp);
},
update:function() {
}
});
window.addEventListener('DOMContentLoaded', function(e){
var system = new arc.System(320, 416, 'test');
system.setGameClass(GameMain);
system.load(['a.png']);
}, false);
</script>
</head>
<body>
<canvas id='test'></canvas>
</body>
</html>
enchant.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./enchant.js"></script>
<script type="text/javascript">
enchant();
window.onload = function() {
var game = new Game(416,320);
game.preload('a.png');
game.onload = function() {
var test = new Sprite(100,100);
test.x = 10;
test.y = 10;
test.image = game.assets['a.png'];
game.rootScene.addChild(test);
};
game.start();
};
</script>
</head>
<body>
</body>
</html>
どちらもオブジェクト指向的に書くようですが、enchant.jsの方がすっきり書けるようです。
ちなみにenchant.jsでもcanvasの描画機能が強化されるようです。
αブレンドもそのうちサポートされるとか。(詳細はこちら)
ぼちぼちスプライトの性能の差も比較していこうと思います。
それはまた別記事でっ！
追記：
無理にArctic.jsでスッキリ書くと、こんな感じでしょうか。
Arctic.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Sprite</title>
<script type="text/javascript" src="./arctic.js"></script>
<script type="text/javascript">
window.onload = function(){
var system = new arc.System(320, 416, 'test');
system.setGameClass(arc.Class.create(arc.Game, {
initialize:function(params) {
var sp = new arc.display.Sprite(this._system.getImage('a.png'));
sp.setX(10);
sp.setY(10);
this.addChild(sp);
}
}));
system.load(['a.png']);
}
</script>
</head>
<body>
<canvas id='test'></canvas>
</body>
</html>
・・・ネスト多い。