OJAG@naha vol.12 に参加してきました

日本Androidの会沖縄支部 workshop@Naha Vol.12 : ATND

今回は 9leap のプロジェクトリーダー(と名刺に書いてた)の伏見さんに来沖していただいての
enchant.js のハンズオンおよびハッカソンでした。

enchant.js は名前だけはよく聞いてて、イメージとしては「簡単に書けるゲームフレームワーク」でしたが
実際に触ってみると、確かにカンタンでした。簡単というかわかりやすい。
例えば、Sprite を設定するまではよくあるんですが、オブジェクト.frame = 1 とか 2 って書いたら
テクスチャの次の枠を設定してくれるーとかはとても良い感じでした。

余談ですが、大学の頃は PS3 のゲーム開発フレームワークとかを研究のテーマとかにしてて、
ユーザ(その時は後輩)に使ってもらったりしてたんですが、
自分で書いててもなんだかんだで使いづらかった覚えがあります。
そういう意味でも、初めて触る自分でもすぐ使い方が理解できるような enchant.js はとても触ってて楽しかったです。
なによりすぐ動きが確認できるのはやる気にもつながりますし。プログラミング初心者用にもいいですね。

まあそんなこんなで、今回は2時間30分ぐらいハッカソンタイムでした。
使い方はわかったんですが、いかんせん発想力が・・・とりあえずこんなものできました。

本当は 9leap にでもあげて、実際に遊べるようにできればいいんですけども、
なんかこうまだよくわかってないんで、とりあえず動画でよろしくお願いします。
ついでにコードも上げます。ベースは伏見さんが用意してくれたサンプルをそのままパクりました

enchant();

/**
 * Game インスタンス
 *
 * @type {Game}
 */
var game;

/**
 * クマちゃん
 *
 * @type {Sprite}
 */
var bear;

var scoreLabel;

/**
 * 0 から (num - 1) までの乱数を返す関数
 *
 * @example
 *   rand(2);   // 0 か 1を返す
 *   rand(101); // 0 から 100 までのいずれかを返す
 *
 * @param {Number} num 
*/
function rand(num) {
    return Math.floor(Math.random() * num);
}

function bananaFall() {
    this.y += 6;
}

function bananaJump() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 1;

    if ((this.x + this.width > game.width)|| (this.x < 0)) {
        this.vx *= -1;
    }
}

/**
 * バナナを画面上から落とす
 *
 * 落ちはじめる x 座標はランダム
 */
function addBanana() {
    var banana = new Sprite(16, 16);

    banana.x = rand(304);
    banana.y = 0;
    banana.vx = 4;
    banana.image = game.assets['icon0.gif']; 
    banana.frame = 16;
    banana.move = bananaFall;
    
    banana.addEventListener('enterframe', function(e) {
        /**
         * 衝突後は跳ねるような感じで
         */
        if (this.intersect(bear)) {
            bear.frame = 3;
            this.vx *= (bear.x > (this.x + (this.width/2))) ? -1 : 1;
            this.vy = -16;
            this.move = bananaJump;
        }
            
        this.move();

        if (this.y - (this.height / 2) > game.height) {
            game.end(0, 'もっとがんばれ');
        }
    });

    game.rootScene.addChild(banana);
}

window.onload = function() {
    game = new Game(320, 320); 
    game.fps = 24;                  
    game.preload(['chara1.gif','icon0.gif','bg.png']);

    game.onload = function() {
        game.frameCount = 0;
        
        bear = new Sprite(32, 32);
        bear.x = 0;
        bear.y = 240;
        
        bear.image = game.assets['chara1.gif']; // 画像を指定
        bear.frame = 0;

        game.rootScene.addEventListener('touchmove', function(e) {
            bear.frame = game.frame % 3;
            if (bear.x < e.x) {
                bear.scaleX = 1;
            } else {
                bear.scaleX = -1;
            }
            bear.x = e.localX;
        });

        addBanana();

        /**
         * 動きを止めたら立ち画像
         */
        game.rootScene.addEventListener('touchend', function() {
            bear.frame = 0;
        });
        
        game.rootScene.addEventListener('enterframe',function(){
            if (game.frame % 110 === 0) {
                addBanana();
            }

            var elapsedTime = game.frame / game.fps; 
            if (elapsedTime > 20) {
                game.end(elapsedTime, elapsedTime + '秒お疲れ様でした');
            }
        });

        game.rootScene.addChild(bear); 
    };
    game.start();
};

はい。跳ねるところはてきとーに数字書いてたら動画の動きになったので
いまいちよくわかってないんですがまあいいかと思って終了しました。

総括。enchant.js 楽しいです。
懇親会で、伏見さんに「格闘系のアイコン作ってくださいよー」ってお願いしました。
考えてるのが

enchant.js + node.js がある
node.js + Kinect もある
つまり enchant.js + node.js + Kinect もできるよね
ブラウザで遊べるネットワーク対戦型ゲーム「Tython Online」

とか妄想してます。Tython はともかく、Kinect と連携できると楽しそう。

Thanks Driven Life

日々是感謝

OJAG@naha vol.12 に参加してきました