enchant.js のライバル? Arctic.js を使ってみた.

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

良い意味でも悪い意味でも最近話題の Arctic.js をさくっと使ってみました.

enchant.js のライバル現る!! って感じですかね.

sample-img

Sample and Download

今回制作したサンプルはこちら.

タッチすると, タッチした場所が BRUST します.

ダウンロードはこちらから出来ます.

Code

今回制作したサンプルの全体コードです. コード中にコメントを書いているので特に詳しい解説はしません.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>お前はもう死んでいる. あたたたたたたたオワタ</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            canvas {
                border: 1px solid black;
            }
        </style>
        <script src="arctic.js" charset="UTF-8"></script>
        <script>
            var BRUST_IMAGE = 'burst.png';
            var CRASH_WIDTH = 50;
            var CRASH_HEIGHT= 50;
            
            (function() {
                /**
                 * メインクラスを作成
                 */
                var Main = arc.Class.create(arc.Game, {
                    initialize: function(params) {
                        arc.util.trace(params.title, params.subTitle);
                        var self = this;
                        
                        // ルートを生成して黒で塗りつぶす
                        var root = new arc.display.Shape();
                        root.beginFill(0x000000, 1.0);
                        root.drawRect(0, 0, 320, 320);
                        root.endFill();
                        this.addChild(root);
                        
                        
                        //タッチイベント登録
                        root.addEventListener(arc.Event.TOUCH_START, function(e) {
                            // ムービークリップ生成
                            var mc = new arc.display.SheetMovieClip(self._system.getImage(BRUST_IMAGE), 174, 5, true);
                            // タッチした位置に表示する
                            mc.setX(e.x - CRASH_WIDTH/2);
                            mc.setY(e.y - CRASH_HEIGHT/2);  
                            // 幅, 高さを生成
                            mc.setWidth(CRASH_WIDTH);
                            mc.setHeight(CRASH_HEIGHT);
                            // 再生
                            mc.play();
                            // GAME クラスに追加
                            self.addChild(mc);
                        });
                    }
                    
                });
                
                /**
                 * DOM 読み込み完了時イベント
                 */
                window.addEventListener("DOMContentLoaded", function(event) {
                    // ID が canvas のやつをターゲットにする
                    var system = new arc.System(320, 320, "canvas");
                    // ゲームクラスをシステムにセット
                    system.setGameClass(Main, {title: "お前はもう死んでいる", subTitle:"あたたたたたたたオワタ"});
                    // 画像読み込み
                    system.load([BRUST_IMAGE]);
                }, false);
                
            })();
            
        </script>
    </head>
    <body>
        <h1>お前はもう死んでいる. あたたたたたたたオワタ</h1>
        <canvas id="canvas"></canvas>
    </body>
</html>

enchant.js との違い

描画

こちらのサイトに書かれてあるように, enchant.js との主な違いはオブジェクトの描画処理です.

enchant.js は DOM ベースで描画されているのに対し, arctic.js は canvas で描画されています.

iPhone 3GS 以前だと canvas ベースで作っちゃうと動作がうんこちゃんだったので, enchant.js はそのへんも考慮されて作られたのかなと思います.

最初は, enchant.js で作ったゲームを iPhone で動かしたときに, なんでこんなに早く動くんだ!!? ってビックリしたものです.(この頃)

ただ, 最近のスマホは canvas 描画も高速になってきているので DOM で描画ってのはなくなってきて arctic.js のような作りが主流になるだろうと思います. enchant.js もcanvas versionが出てますしね♪

API

やれることは似たり寄ったりって感じかなという印象.

ざっくり特徴をあげると, arctic.js は Flash ライクで enchant.js にはない ajax 機能があります.

ただ, enchant.js には gl.enchant.js という超絶面白いプラグインがあるので, しばらくは enchant.js にお世話になりそう.

Review

自分はリファレンスを見ずにコードを覗きながら使い方を学ぶ変態なので, ざっとコードを見てみました.

そして, 最初に思ったのは自分が以前作っていた tmlib.jsに似てるw ってこと. (まぁ tmlib.js も Flash 参考に canvas ベースで作ってたのでそうなるっちゃなるよなぁ)

特に目新しいことはやっていないですが, 必要最低限の Flash(AS) の機能をシンプルかつキレイに JavaScript に移植してきたって感じです.

API が Flash ライクで, アニメーションが標準でサポートされているので, Flash から流れてくる人にとってはかなりとっつきやすいと思います.

まだ少ししか触れていないので何かしらゲームを作ったらまたしっかりレビューします.

Reference

今後の enchant.js と arctic.js は目が離せないですね. きっと互いに切磋琢磨してより良くなっていくでしょう.

AS のコードを arctic.js 用のコードにエクスポートするやつとか作ってみようかな.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT