CreateJSで提供される5つのツール
今回は，
CreateJSでは，
- EaselJS
- TweenJS
- SoundJS
- PreloadJS
- Zoe
それぞれ，
EaselJS
EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており，
- リッチなHTML5コンテンツ
- Canvasを利用した表示オブジェクト
- オブジェクトのネスティング
- マウスインタラクション
- 開発者に優しいアプローチを採用
TweenJS
TweenJSはシンプルなAPIでトゥイーンやアニメーションを作成することができるライブラリです。数値オブジェクトプロパティによるトゥイーンとCSSによるトゥイーンの両方をサポートしており，
SoundJS
SoundJSはオーディオ再生のためのAPIを提供するライブラリです。現状，
PreloadJS
PreloadJSは，
Zoe
ZoeはSWFアニメーションをEaselJSを使ったスプライトシートに自動変換することができるAIRアプリケーションです。SWFファイルをZoe上にドラッグするだけで，
EaselJSを使ってみる
今回は上記の5つのツールのうち，
EaselJSのAPIの基本的な構成ですが，
- Container - 表示オブジェクトの階層構造を作ることができるコンテナ。
- Stage - 表示リストのルートとなるコンテナで，
canvasへのコンテンツの描画を行う。tickイベントに応じて再描画を行う - Shape - Graphicsオブジェクトを表示リストのコンテキストに描画する。
- Graphics - ベクターグラフィックスを描くための機能を提供する
- Text - 1行のテキストを描画する
- Bitmap - ビットマップ画像を描画する
- Ticker - 指定された時間間隔でtickイベントを発行する
たとえば，
<!DOCTYPE html>
<html>
<head>
<title>EaselJSのサンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script>
<script type="text/javascript">
var canvas;
var stage;
var circle;
function init() {
canvas = document.getElementById('myCanvas');
stage = new Stage(canvas);
// Shapeを作成してStageに追加
circle = new Shape();
circle.graphics.beginFill("#0000FF");
circle.graphics.drawCircle(0,0,30);
circle.graphics.endFill();
stage.addChild(circle);
circle.x = 50;
circle.y = 50;
//キャンバスを更新
stage.update();
}
</script>
</head>
<body onload="init()">
<h1>EaselJSのサンプル</h1>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
基本的には，
図1 EaselJSでCanvasに円を表
