CREATEJSで遊んでみる

ともだ つばさ

2012.05.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回はEASELJSとTWEENJSで遊んでみようと思います。
EASELJSはCANVASを使っての描画周りを助けてくれるライブラリ、TWEENJSはトゥイーン作成を簡単にしてくれるライブラリで、どちらもCREATEJS SUITEの一部です。CREATEJS SUITEには他にはSOUNDJS、PRELOADJSというライブラリがあります。

今回は、画像をくるくる回転させながら表示させてその後徐々に透明にして消すサンプルを作ってみます。
まずは、EASELJSを使ってオブジェクトを配置させます。今回は外部から画像を読みこんで表示させるだけなので大した事はしませんが、APIがASに近いのでASに慣れた人ならすぐに複雑な事も出来るようになるのではないでしょうか。

まずはbodyにcanvasを作っておきます。

<body>
<canvas id="mycan" width="640" height="480"></canvas>
</body>

一応作成するJSをsample.demoとしてクラス化して変数としてstageを作っておきます。

var sample = {};
sample.demo = (function(){
	var stage;
}

まずはstageを用意します。Stageは表示の為のルートで、指定したCanvasに対して表示する様になります。こんな感じです。

var can = document.getElementById("mycan");
stage = new Stage(can);
stage.snapPixelsEnabled = true;

で、次に表示する為のオブジェクトを作ります。今回は外部から画像(images/image.png)をロードして配置したものを返すメソッドにしてみます。今回読み込んでいる画像が50x50になっているので画像の軸を中心にずらしています。

var objects = (function(){
	var image = function () {
		var bitmap = new Bitmap("./images/image.png");
		bitmap.regX = 25;
		bitmap.regY = 25; 
		bitmap.alpha = 1;
		bitmap.snapToPixel = true;
		bitmap.mouseEnabled = false;
		bitmap.image.onload = function() {
			stage.update();
		};
		return bitmap;
	};
	return { image:image };
})();

これをstageに配置してみます。

var obj =objects.image();
obj.x = Math.round(Math.random()*640);
obj.y = Math.round(Math.random()*480);
stage.addChild(obj);

stageには配置してだけでは表示更新されないので必ずupdate()をコールしないといけないのですが、今回の場合画像のロード完了前にupdate()をコールしても仕方ないので、画像読み込み完了のタイミングで行っています。

ライブラリのロードの合わせて今までのをまとめると次の通りです。(stageの辺りもメソッドにまとめています。)

<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>

<script>
var sample = {};
sample.demo = (function(){
	var stage;
	
	$(document).ready(function(){
		setup.canvas();
		
		var obj =objects.image();
		obj.x = Math.round(Math.random()*640);
		obj.y = Math.round(Math.random()*480);
		stage.addChild(obj);
		stage.update();
	});
	
	var setup = (function(){
		var canvas =function(){
			var can = document.getElementById("mycan");
			stage = new Stage(can);
			stage.snapPixelsEnabled = true;
		};
		
		return { canvas:canvas }
	})();
	
	var objects = (function(){
		var image = function () {
			var bitmap = new Bitmap("./images/image.png");
			bitmap.regX = 25;
			bitmap.regY = 25; 
			bitmap.alpha = 1;
			bitmap.snapToPixel = true;
			bitmap.mouseEnabled = false;
			bitmap.image.onload = function() {
				stage.update();
			};
			
			return bitmap;
		};
		
		return { image:image };
	})();
	
})();
</script>
</head>
<body>
<canvas id="mycan" width="640" height="480"></canvas>
</body>
</html>

これで、次の様に画像が１つだけ表示される様になると思います。

次はこれをTickerを使って大量表示させます。TickerはTimerの様なもので指定したFPSでイベントが発生し、対象としているオブジェクトのtickメソッドを呼びます。addListenerメソッドでそのオブジェクトを指定します。

Ticker.setFPS(30);
Ticker.useRAF = true;
Ticker.addListener(sample.demo);

sample.demoにtickメソッドを作くって全体的にまとめます。

<script>
var sample = {};
sample.demo = (function(){
	var stage;

	$(document).ready(function(){
		setup.canvas();
		setup.ticker();
	});

	var setup = (function(){
		var canvas =function(){
			var can = document.getElementById("mycan");
			stage = new Stage(can);
			stage.snapPixelsEnabled = true;
		};
		
		var ticker = function(){
			Ticker.setFPS(30);
			Ticker.useRAF = true;
			Ticker.addListener(sample.demo);
		};
	
		return { canvas:canvas, ticker:ticker }
	})();
	
	var objects = (function(){
		var image = function () {
			var bitmap = new Bitmap("./images/image.png");
			bitmap.regX = 25;
			bitmap.regY = 25;
			bitmap.alpha = 1;
			bitmap.snapToPixel = true;
			bitmap.mouseEnabled = false;
			
			return bitmap;
		};
		
		return { image:image };
	})();
	
	var tick = function(event) {
		var obj =objects.image();
		obj.x = Math.round(Math.random()*640);
		obj.y = Math.round(Math.random()*480);
		stage.addChild(obj);
		
		stage.update();
	};
	
	return { tick:tick };
})();
</script>

これで、ランダムに謎の画像が配置されていく様になったと思います。(image.onloadでupdateさせてない事には特に意味がなくて、最初にこっちのサンプルを作って、記事書く用にコードを削ってみて1つだけ表示バージョンを作ったら表示されない事に気付いたという。。。)

今度はこれにトゥイーンを加えます。くるくる回りながら表示されて、しばらくしたら透明になって消える様にします。 tick内にTWEENJSを使って実装してみます。簡単です。

var tick = function(event) {
	・・・
	Tween.get(obj)
		.to({alpha:1, rotation:1440}, 3000, Ease.cubicOut)
		.wait(1000)
		.to({alpha:0}, 1000, Ease.cubicIn)
		.call(tweenComplete, [obj]);
	・・・
};

var tweenComplete = function(obj) {
	stage.removeChild(obj);
};

toメソッドの最初の引数は変化させるプロパティの値、次の引数が変化時間、3つ目がトゥイーンの方法です。toメソッドやwaitメソッドはいくつでもチェーンできます。で、トゥイーンの最後に何か処理をしたいならcallメソッドでイベントメソッドを指定します。指定したメソッドに引数を渡す場合は、それらを配列形式で第2引数に指定します。という事で、オブジェクト生成時のalphaを0にしてこのコードを実行すると下の感じになります。画像だと分かんないかも知れませんが。。

簡単ですね〜。最後に今回作ったものを全容を載せておきます。

<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>

<script>
var sample = {};
sample.demo = (function(){
	var stage;

	$(document).ready(function(){
		setup.canvas();
		setup.ticker();
	});

	var setup = (function(){
		var canvas =function(){
			var can = document.getElementById("mycan");
			stage = new Stage(can);
			stage.snapPixelsEnabled = true;
		};
		
		var ticker = function(){
			Ticker.setFPS(30);
			Ticker.useRAF = true;
			Ticker.addListener(sample.demo);
		};
	
		return { canvas:canvas, ticker:ticker }
	})();
	
	var objects = (function(){
		var image = function () {
			var bitmap = new Bitmap("./images/image.png");
			bitmap.regX = 25;
			bitmap.regY = 25;
			bitmap.alpha = 0;
			bitmap.snapToPixel = true;
			bitmap.mouseEnabled = false;
			
			return bitmap;
		};
		
		return { image:image };
	})();
	
	var tick = function(event) {
		var obj =objects.image();
		obj.x = Math.round(Math.random()*640);
		obj.y = Math.round(Math.random()*480);
		stage.addChild(obj);
		
		Tween.get(obj)
			.to({alpha:1, rotation:1440}, 3000, Ease.cubicOut)
			.wait(1000)
			.to({alpha:0}, 1000, Ease.cubicIn)
			.call(tweenComplete, [obj]);
		
		stage.update();
	};
	
	var tweenComplete = function(obj) {
		stage.removeChild(obj);
	};
	
	return { tick:tick };
})();
</script>
</head>

<body>
<canvas id="mycan" width="640" height="480"></canvas>
</body>
</html>
AWS