「ゼロからはじめるenchant.js入門」勉強２日目−１

3.2 スプライトでキャラクターを動かしてみよう　のサンプルを打ち込んだ。
HelloEnchantをforkして書いたのでだいぶラクだった。
※すべてjsdo.itで作業しているためfork機能が便利

このサンプルのミソは、

①アニメーションさせる方法
②画像を反転させる方法

だった。

①はSpriteのframeプロパティに、表示する画像のインデックスを指定すれば画像を切り替えられるというところと、フレーム数を保持することで１コマ１コマ進める、という特徴を組み合わせることでアニメーションを実現していたところが大事。

②はSpriteのscaleプロパティは倍率を指定するためのものだが、１を指定して右向き、−１を指定して左向きにと、画像の向きも変えられるところが大事。

// スプライトでキャラクターを動かしてみる

// enchantの初期化
enchant();

//HTML読み込み完了時に実行する処理
window.onload = function() {
    //ゲームオブジェクトの生成
    var game = new Game(320, 320);
    
    game.fps = 16;
    
    //画像の読み込み
    game.preload('http://enchantjs.com/assets/images/chara1.gif');
    
    //画像読み込み完了時に実行する処理
    game.onload = function() {
        //スプライトの生成
        var bear = new Sprite(32, 32);
        bear.image = game.assets['http://enchantjs.com/assets/images/chara1.gif'];
        bear.tick=0;
        bear.anim = [5,6,5,7];//画像読み込み候補番号
        
        // 表示オブジェクトツリーに追加
        game.rootScene.addChild(bear);
        
        //スプライトの定期処理
        bear.addEventListener("enterframe", function() {
            
            //スプライトのフレームの指定
            bear.tick++;
            bear.frame=bear.anim[bear.tick%4];//アニメーションをひとつ進める
            
            //右向き
            if(bear.scaleX == 1){
             bear.x += 3; //３ピクセル移動
            //向き変更
            if (bear.x > 320-32) bear.scaleX = -1;//クマ画像の左上のX座標が、クマ画像の右側がはみでる位置まで進んだとき
            }
            //左向き
            else{
                bear.x -=3;
                //向き変更
            if (bear.x <0) bear.scaleX = 1;//クマ画像の左上のX座標が、クマ画像の左側がはみでる位置まで進んだとき  
            }
        });        
    };
    game.start();
};