【Wonderfl移植計画】HelloWorld!!! 解説編?[3作目]
wonderflのFavoriteTop100にランクインしている作品をCreateJSを使って移植しようという計画。
ライセンスはMITなのを確認していますが、
制作者様の方から何かアクションがあった場合は削除させていただきます。
58位 Hello World!!!
いつもはソースコードの解説を行うのですが、今回はコメント以外でわざわざ解説をする必要もないレベルなので、
コメントを付与したソースコードだけを貼り付けさせていただきます。
// EaselJS 0.7 // BitmapData 0.8.5 // -- http://kudox.jp/java-script/createjs-easeljs-bitmapdata window.onload = init; // TypeScriptが吐き出したコードを参考に記載 var __extends = this.__extends || function(d, b) { function __() {this.constructor = d;} __.prototype = b.prototype; d.prototype = new __(); } var Circle = (function(_super) { __extends(Circle, _super); /** * @param {Color} 色 */ function Circle(color) { // 親コンストラクタの呼び出し _super.call(this); // 描画するためにShapeオブジェクトを生成 var shape = new createjs.Shape(); // Containerに追加することで描画に反映させる this.addChild(shape); // 円を描画する // 色は24bit 0xRRGGBBなので各色を取り出すために // ビットシフトを行って&演算を使用した var _g = shape.graphics; var r = (color >> 16) & 0xff; var g = (color >> 8) & 0xff; var b = color & 0xff; _g.beginFill(createjs.Graphics.getRGB(r, g, b, 1.0)).drawCircle(0, 0, 6).endFill(); } return Circle; //createjs.Circle = Circle; }(createjs.Container)); var stage; var bd; // {createjs.BitmapData} /** * 初期設定 */ function init() { stage = new createjs.Stage("canvas"); var W = 40; var H = 30; // FlashでのTextFieldの大きさはデフォルトで100x100。 // autoSize = "left"にすることで、HelloWorldでは 39.6x30 になる。 // CreateJSではそれを再現することは不可能なので、Flash標準のフォントサイズを適用し、 // createjs.BitmapDataからピクセル情報を取得する。 var tf = new createjs.Text("Hello\nWorld!!!", "12px Arial", "#000000"); bd = new createjs.BitmapData(null, W, H, 0xFF3399FF); // applyFilterがcreatejs.BitmapDataにないため、 // TextFieldを描画した後に、BlurFilterをBitmapDataに適応することが出来ない。 // そのため、先にBlurFilterを掛けたTextを描画する。 tf.filters = [new createjs.BlurFilter(10, 10, 1)]; tf.cache(0, 0, W, H); bd.draw(tf); // 素のTextをcreatejs.BitmapDataに描画する。 tf.filters = null; tf.updateCache(); bd.draw(tf); delete tf; /* 1. createjs.BitmapDataの全ピクセルの画素を取得 2. 取得した色をCircleクラスにセットして円を描画したShapeを作成 3. ランダムにCircleの位置をセットし、透明にする 4. Tweenで元の位置に戻りながら透明でなくなるアニメーションを登録 */ for(var i = 0; i < bd.width; ++i) { for(var j = 0; j < bd.height; ++j) { var color = bd.getPixel(i, j); var circle = new Circle(color); randomize(circle); stage.addChild(circle); createjs.Tween.get(circle) .wait((i + j) * 200 * Math.random()) .to({x : i * 10, y : j * 10, alpha : 1.0}, 1000); } } createjs.Ticker.addEventListener("tick", stage); createjs.Ticker.setFPS(30); } /** * Circleの初期化関数 * Circleの位置をランダムに初期化し、透明度を0に設定する */ function randomize(d) { d.x = 400 * Math.random(); d.y = 300 * Math.random(); d.alpha = 0.0; }