datchの日記

気がついたら社会人。気になる技術的なことについて少しずつ書いていけたらと思っております。

【Wonderfl移植計画】HelloWorld!!!【3作目】

wonderflのFavoriteTop100にランクインしている作品をCreateJSを使って移植しようという計画。

ライセンスはMITなのを確認していますが、
制作者様の方から何かアクションがあった場合は削除させていただきます。

58位 Hello World!!!

移植元のFlashソースコード

CreateJSのデモ



ソースコードは次回から解説をします。


今回はソースコードを掲載するだけにします。


// EaselJS 0.7
// BitmapData 0.8.5
// -- http://kudox.jp/java-script/createjs-easeljs-bitmapdata

window.onload = init;

var __extends = this.__extends || function(d, b)
{
	function __() {this.constructor = d;}
	__.prototype = b.prototype;
	d.prototype = new __();
}
var Circle = (function(_super)
{
	__extends(Circle, _super);
	function Circle(color)
	{
		_super.call(this);
		var shape = new createjs.Shape();
		this.addChild(shape);
		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.Container));

var stage;
var bd; // {createjs.BitmapData}

/**
* 初期設定
*/
function init()
{
	stage = new createjs.Stage("canvas");
	var W = 40;
	var H = 30;

	var tf = new createjs.Text("Hello\nWorld!!!", "12px Arial", "#000000");

	bd = new createjs.BitmapData(null, W, H, 0xFF3399FF);
	tf.filters = [new createjs.BlurFilter(10, 10, 1)];
	tf.cache(0, 0, W, H);
	bd.draw(tf);
	tf.filters = null;
	tf.updateCache();
	bd.draw(tf);

	delete tf;

	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", update);
	createjs.Ticker.setFPS(30);
}

/**
*
*/
function randomize(d)
{
	d.x = 400 * Math.random();
	d.y = 300 * Math.random();
	d.alpha = 0.0;
}

function update()
{
	stage.update();
}