みかづきブログ その3

3ヶ月つづけてみました。

EaselJS(CreateJS)をつかって連番画像をコマアニメーション

kimizuka.hatenablog.com
kimizuka.hatenablog.com

前回 につづき 前々回 のコードをCreateJS化していこうと思います。


準備

こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。

www.createjs.com

また、ドキュメントは こちら にまとまっているので確認しておくと良いと思います。

www.createjs.com


JavaScript

前回の処理に続き、

  1. ステージのインスタンスを作成
  2. ビットマップのインスタンスを作成
  3. ステージにビットマップを配置
  4. TickerのFPSを設定
  5. ビットマップのイメージを切り替え
  6. ステージを更新
  7. 5に戻る

という感じです。

(function(win, doc) {

    "use strict";
    
    loadImage();
    
    function loadImage() {
        var queue = new createjs.LoadQueue(false),
            manifest = [
                {
                    id  : "img0",
                    src : "http://jsrun.it/assets/E/p/P/X/EpPXr.png"
                }, {
                    id  : "img1",
                    src : "http://jsrun.it/assets/4/G/P/8/4GP8k.png"
                }, {
                    id  : "img2",
                    src : "http://jsrun.it/assets/Q/l/E/6/QlE6K.png"
                }, {
                    id  : "img3",
                    src : "http://jsrun.it/assets/y/X/d/v/yXdvw.png"
                }, {
                    id  : "img4",
                    src : "http://jsrun.it/assets/G/N/7/v/GN7vt.png"
                }, {
                    id  : "img5",
                    src : "http://jsrun.it/assets/w/P/D/U/wPDUH.png"
                }, {
                    id  : "img6",
                    src : "http://jsrun.it/assets/S/I/U/G/SIUGn.png"
                }, {
                    id  : "img7",
                    src : "http://jsrun.it/assets/A/F/2/I/AF2IF.png"
                }, {
                    id  : "img8",
                    src : "http://jsrun.it/assets/i/9/d/8/i9d8R.png"
                }, {
                    id  : "img9",
                    src : "http://jsrun.it/assets/y/T/9/o/yT9oL.png"
                }, {
                    id  : "img10",
                    src : "http://jsrun.it/assets/g/a/O/f/gaOfm.png"
                }, {
                    id  : "img11",
                    src : "http://jsrun.it/assets/a/f/e/0/afe0u.png"
                }, {
                    id  : "img12",
                    src : "http://jsrun.it/assets/M/i/Q/b/MiQbB.png"
                }, {
                    id  : "img13",
                    src : "http://jsrun.it/assets/c/n/l/7/cnl7U.png"
                }, {
                    id  : "img14",
                    src : "http://jsrun.it/assets/0/H/S/e/0HSec.png"
                }, {
                    id  : "img15",
                    src : "http://jsrun.it/assets/S/v/b/A/SvbAh.png"
                }, {
                    id  : "img16",
                    src : "http://jsrun.it/assets/k/x/7/B/kx7B9.png"
               }, {
                    id  : "img17",
                    src : "http://jsrun.it/assets/U/i/5/S/Ui5S8.png"
               }, {
                    id  : "img18",
                    src : "http://jsrun.it/assets/Y/j/O/5/YjO52.png"
               }, {
                    id  : "img19",
                    src : "http://jsrun.it/assets/E/J/l/g/EJlgJ.png"
               }, {
                    id  : "img20",
                    src : "http://jsrun.it/assets/C/w/l/n/CwlnC.png"
               }, {
                    id  : "img21",
                    src : "http://jsrun.it/assets/i/F/b/p/iFbpq.png"
               }, {
                    id  : "img22",
                    src : "http://jsrun.it/assets/C/U/A/d/CUAdU.png"
               }, {
                    id  : "img23",
                    src : "http://jsrun.it/assets/0/p/P/j/0pPjh.png"
               }, {
                    id  : "img24",
                    src : "http://jsrun.it/assets/Y/S/f/1/YSf13.png"
               }, {
                    id  : "img25",
                    src : "http://jsrun.it/assets/e/L/8/b/eL8bT.png"
               }, {
                    id  : "img26",
                    src : "http://jsrun.it/assets/Y/8/d/d/Y8ddy.png"
               }, {
                    id  : "img27",
                    src : "http://jsrun.it/assets/u/H/U/s/uHUsy.png"
               }, {
                    id  : "img28",
                    src : "http://jsrun.it/assets/2/S/d/1/2Sd1u.png"
               }, {
                    id  : "img29",
                    src : "http://jsrun.it/assets/W/4/q/6/W4q6P.png"
               }, {
                    id  : "img30",
                    src : "http://jsrun.it/assets/a/b/e/l/abelZ.png"
               }, {
                    id  : "img31",
                    src : "http://jsrun.it/assets/u/j/b/C/ujbC2.png"
               }, {
                    id  : "img32",
                    src : "http://jsrun.it/assets/c/g/5/U/cg5U8.png"
               }, {
                    id  : "img33",
                    src : "http://jsrun.it/assets/E/T/D/e/ETDec.png"
               }, {
                    id  : "img34",
                    src : "http://jsrun.it/assets/w/X/1/g/wX1gr.png"
               }, {
                    id  : "img35",
                    src : "http://jsrun.it/assets/8/v/W/B/8vWBE.png"
               }, {
                    id  : "img36",
                    src : "http://jsrun.it/assets/G/n/S/b/GnSb6.png"
               }, {
                    id  : "img37",
                    src : "http://jsrun.it/assets/2/J/r/v/2Jrvz.png"
               }, {
                    id  : "img38",
                    src : "http://jsrun.it/assets/6/q/j/D/6qjD6.png"
               }, {
                    id  : "img39",
                    src : "http://jsrun.it/assets/q/p/H/Z/qpHZy.png"
               }, {
                    id  : "img40",
                    src : "http://jsrun.it/assets/i/Y/e/X/iYeXt.png"
               }, {
                    id  : "img41",
                    src : "http://jsrun.it/assets/g/F/F/Q/gFFQn.png"
               }, {
                    id  : "img42",
                    src : "http://jsrun.it/assets/E/p/r/W/EprWe.png"
               }, {
                    id  : "img43",
                    src : "http://jsrun.it/assets/u/5/U/w/u5Uwe.png"
               }, {
                    id  : "img44",
                    src : "http://jsrun.it/assets/A/z/2/v/Az2vq.png"
               }, {
                    id  : "img45",
                    src : "http://jsrun.it/assets/u/O/W/T/uOWTU.png"
               }, {
                    id  : "img46",
                    src : "http://jsrun.it/assets/K/b/M/L/KbMLB.png"
               }, {
                    id  : "img47",
                    src : "http://jsrun.it/assets/W/S/U/b/WSUbm.png"
               }, {
                    id  : "img48",
                    src : "http://jsrun.it/assets/K/p/3/7/Kp37z.png"
               }, {
                    id  : "img49",
                    src : "http://jsrun.it/assets/a/Y/R/y/aYRyE.png"
               }, {
                    id  : "img50",
                    src : "http://jsrun.it/assets/G/i/x/q/GixqV.png"
               }, {
                    id  : "img51",
                    src : "http://jsrun.it/assets/O/v/0/h/Ov0hs.png"
               }, {
                    id  : "img52",
                    src : "http://jsrun.it/assets/w/b/y/X/wbyXr.png"
               }, {
                    id  : "img53",
                    src : "http://jsrun.it/assets/0/c/q/T/0cqTE.png"
               }, {
                    id  : "img54",
                    src : "http://jsrun.it/assets/A/f/9/I/Af9IO.png"
               }, {
                    id  : "img55",
                    src : "http://jsrun.it/assets/W/a/6/5/Wa65F.png"
               }, {
                    id  : "img56",
                    src : "http://jsrun.it/assets/G/2/w/X/G2wXz.png"
               }, {
                    id  : "img57",
                    src : "http://jsrun.it/assets/o/b/h/X/obhXG.png"
               }, {
                    id  : "img58",
                    src : "http://jsrun.it/assets/U/Z/a/x/UZaxD.png"
               }, {
                    id  : "img59",
                    src : "http://jsrun.it/assets/Y/M/z/R/YMzRx.png"
               }, {
                    id  : "img60",
                    src : "http://jsrun.it/assets/Y/f/n/E/YfnEn.png"
               }
            ],
            index = 0,
            length = manifest.length;
        
        // 同時接続数
        queue.setMaxConnections(4);
        
        // 第2引数はロードを始めるか否か
        queue.loadManifest(manifest, true);
        
        // 1枚読み込まれたタイミングで発火
        queue.on("fileload", handleLoad);
        
        // すべて読み込みが終わったタイミングで発火
        queue.on("complete", handleComplete);

        function handleLoad(evt) {
            // 読み込みが完了した画像
            // console.log(evt.item);
        }
        
        function handleComplete(evt) {
            var canvas = doc.getElementById("canvas"),
                // ステージを作成
                stage = new createjs.Stage(canvas),
                // ビットマップを作成
                bitmap = new createjs.Bitmap(queue.getResult("img" + index));
            
            // ステージのサイズを設定
            stage.canvas.width = window.innerWidth;
            stage.canvas.height = window.innerHeight;

            // ステージにビットマップを配置
            stage.addChild(bitmap);
            
            // FPSを設定
            createjs.Ticker.setFPS(24);
            
            createjs.Ticker.addEventListener("tick", function() {
                index = ++index % length;
                bitmap.image = queue.getResult("img" + index);
                // ステージを更新
                stage.update();
            });
        }
    }
    
})(this, document);

DEMO