kimizuka.hatenablog.com
kimizuka.hatenablog.com
前回 につづき 前々回 のコードをCreateJS化していこうと思います。
JavaScript
前回の処理に続き、
- ステージのインスタンスを作成
- ビットマップのインスタンスを作成
- ステージにビットマップを配置
- TickerのFPSを設定
- ビットマップのイメージを切り替え
- ステージを更新
- 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);