Skip to content

enchant.js v0.5.0がついにリリース! Canvas強化とwidget追加でゲーム以外のアプリもお任せ!?

ついにenchant.jsのバージョン0.5.0がリリースされた。
ダウンロードはここから。

今回のバージョンアップのポイントを簡単にまとめると・・・

  • Canvas描画機能が大幅に強化され、回転・拡大縮小に対応。高速化
  • Canvasへ描画したEntityもタッチイベントに対応
  • 新たにwidget.enchant.jsが登場。ゲーム以外のUIも実現可能に
  • rotation, scale プロパティが Sprite から Entity に変更。ラベルやグループなども回転拡大縮小可能に
  • enchant.ENV の追加 (環境変数)、いくつかのローカル変数の削除
  • Game#getElapsedTime の追加。経過秒数を手軽に取得可能に
  • touchstart/move/end イベントの propagation に関するバグを修正

なんといっても、重要なのはCanvas機能の強化とwidgetの追加。
今までcanvas.enchant.jsはスプライトを高速に描画するだけにしか使えなかったが、今回からはラベルやグループなどもサポートし、完全にenchant.jsをcanvas化して置き換えることもできる。将来的にはデフォルトがcanvas描画になって行く予定だ。しかも、今回のcanvas機能ではcanvasで描画しているEntityに関しても通常のDOMエンティティと同じようにタップイペントを設定できるようになっている。

また、GroupやLabelもrotation、scaleX,scaleYといった要素に対応したことで表現の自由度がぐんと上がったぞ。

これはCanvas機能のサンプルだが、ちゃんと泣くようになってる。
コードは以下のような感じ。

enchant();

var game;

window.onload = function () {
    game = new Game(320, 320);
    game.fps = 30;
    game.preload('chara1.gif');
    game.onload = function () {
        
        // CanvasGroup に addChild されたノードは canvas上で描画されます。
        // 回転や拡大縮小などを含む場合、DOMよりも高速な描画が可能です。
        var canvasGroup = new CanvasGroup();
        game.rootScene.addChild(canvasGroup);
        
        function addBear () {
            var bear = new Sprite(32, 32);
            bear.image = game.assets['chara1.gif'];
            canvasGroup.addChild(bear);
            canvasGroup.rotation=45
            bear.frame = 5;
            bear.vx = 3;
            bear.vy = 2;
            bear.vs = 0.01;
            bear.ontouchend = function(){
            	this.frame+=3;
            };
            bear.onenterframe = function(){
                this.x += this.vx;
                this.y += this.vy;
                if(this.x > 288 || this.x < 0){
                    this.vx *= -1;
                    this.vs *= -1;
                }
                if(this.y > 288 || this.y < 0){
                    this.vy *= -1;
                    this.vs *= -1;
                }
                this.rotation += 5;
                this.scaleX += this.vs;
                this.scaleY += this.vs;
            };
            return bear;
        }
        addBear();
        
        // クリックするとクマが登場
        game.rootScene.addEventListener('touchend', function(evt){
            var bear = addBear();
            bear.moveTo(evt.localX, evt.localY);
        })
    };
    game.start();
};

また、widget.enchant.jsの追加も重要なポイントだ。
widget.enchant.jsでは、今回、リストビュー、ナビゲーションバー、プロンプトなどがサポートされている。

使い方はこんな感じ。

        /*
        * new ListView(width, height, draggable)
        * ListView オブジェクトを作成する。
        * 横幅、縦幅、項目をドラッグ可能かを設定する。
        */
        var listView = new ListView(320, 320 - navigationBar.height, true); // リストビューを作成
        listView.y = navigationBar.height;

        // 項目を10個作成する
        for (var i = 0; i < 10; i++) {
            var item = new ListItem(320, 48); // リストアイテムを作成
            item.content = 'ListItem' + i;
            listView.addChild(item); // リストビューに項目を追加
        }
        game.rootScene.addChild(listView);

これだけでiOSのような「リストビュー」が使えてしまうぞ。

また、alertやconfirmなど、いままでJavaScriptのネイティブの命令を使っていた部分もwidget.enchant.jsで置き換えることができる。簡単に自分でカスタマイズしたアラートを入れることが出来るぞ

        /*
        * new AlertScene()
        * アラートシーンを作成する。
        * ボタンを1つ設定する。
        */
        var alertScene = new AlertScene('その操作は実行できません。', '戻る'); // アラートシーンを作成
        alertScene.onaccept = function() {
            alert('「戻る」が選択されました。');
        };
        game.pushScene(alertScene);

        /*
        * new ConfirmScene()
        * コンファームシーンを作成する。
        * ボタンを2つ設定する。
        */
        var confirmScene = new ConfirmScene('本当に実行してもよろしいですか?', 'はい', 'いいえ'); // コンファームシーンを作成
        confirmScene.oncancel = function() {
            alert('「いいえ」が選択されました。');
        };
        confirmScene.onaccept = function() {
            alert('「はい」が選択されました。');
        };
        game.pushScene(confirmScene);

その他にも様々な機能があるが、例によってまだ荒削りな部分もある。

なぜか今のところ配布ファイルに不備があってwidget.enchant.jsのドキュメントにアクセスできないが、すぐに復旧する予定だ。

とにかく地味なところも派手なところも大幅に強化されたenchant.js、まずは弄って遊んでみて欲しい!

このエントリーをはてなブックマークに追加
はてなブックマーク - enchant.js v0.5.0がついにリリース! Canvas強化とwidget追加でゲーム以外のアプリもお任せ!?
Post to Google Buzz
Share on GREE

Related posts:

  1. Ruby on enchant.js : Groupクラスの追加
  2. Ruby on enchant.js : HotRubyにおける組み込みクラスの継承の実装
  3. 続・Ruby×enchant.jsへの挑戦 / イベントドリブンモデルの実現
  4. たった99行でシューティングゲームを作る方法
  5. enchant.js用物理シミュレーションプラグインPhySpriteが登場!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*