CreateJSを使ってみる

Flashのようなリッチコンテンツを作成できるJavaScriptのフレームワーク「CreateJS」を使ってみます。

CreateJSについて

CreateJSには以下の4つのライブラリが含まれています。

• EaselJS: canvas要素を扱うのを容易にするJavaScriptライブラリ。
• TweenJS: アニメーションを実装するJavaScriptライブラリ。
• SoundJS: audioを簡単に操作できるJavaScriptライブラリ。
• PreloadJS: コンテンツの先読みができるJavaScriptライブラリ。

対応ブラウザはこちらで、IE9以上から対応しています。

EaselJS

今回は公式サイトにあるGetting Startedを試してみます。
まずは4つのライブラリの中からEaselJSを使ってみます。

CreatJSの公式サイトから必要なファイルをダウンロードします。
DOWNLOADをクリック。

DOWNLOADの形式を選択します。
今回はCDNで使用するので、CDNをクリック。

EaselJSのURLをコピーして読み込ませるようにします。

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>

HTMLファイルにcanvasを配置します。

HTML

<canvas id="demoCanvas" width="500" height="300"></canvas>

これでEaselJSを使う準備が完了しました。
今回はEaselJSで円を描画してみます。

JavaScript

window.addEventListener('load', init, false);

function init() {
	// canvasのidを指定して、ステージを定義
	var stage = new createjs.Stage('demoCanvas');

	// 円を作成
	var circle = new createjs.Shape();
	circle.graphics.beginFill('DeepSkyBlue');
	circle.graphics.drawCircle(0, 0, 50);
	circle.x = 100;
	circle.y = 100;
	stage.addChild(circle);

	// ステージの更新
	stage.update();
}

EaselJSのデモページ
　

TweenJS

先ほどのEaselJSのサンプルにTweenJSの処理を追加してみます。
TweenJSの読み込みを追加します。

<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

TweenJSでアニメーションの設定を追加してみます。

JavaScript

window.addEventListener('load', init, false);

function init() {
	// canvasのidを指定して、ステージを定義
	var stage = new createjs.Stage('demoCanvas');

	// 円を作成
	var circle = new createjs.Shape();
	circle.graphics.beginFill('DeepSkyBlue');
	circle.graphics.drawCircle(0, 0, 50);
	circle.x = 100;
	circle.y = 100;
	stage.addChild(circle);

	// アニメーションの設定
	createjs.Tween.get(circle, { loop: true })
	.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
	.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
	.to({ alpha: 0, y: 225 }, 100)
	.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
	.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

	createjs.Ticker.setFPS(60);
	createjs.Ticker.addEventListener('tick', stage);
}

TweenJSのデモページ
　

SoundJS

SoundJSを使ってみます。
SoundJSのファイルをCDNから読み込みます。

<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>

HTMLファイルにボタンを設置します。

<button onclick="playSound();">再生</button>

SoundJSでmp3ファイルの再生を実装します。

JavaScript

var soundID = 'bgm';
window.addEventListener('load', init, false);

// soundの準備
function init() {
	createjs.Sound.registerSound('bgm.mp3', soundID);
}

// soundの再生
function playSound () {
	createjs.Sound.play(soundID);
}

SoundJSのデモページ
　

PreloadJS

最後にPreloadJSを使ってみます。
PreloadJSのファイルをCDNから読み込みます。

<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

HTMLファイルに画像読み込みを実行するボタンを設置します。

<button onclick="loadImage();">画像読み込み</button>

PreloadJSで画像の先読みを実装します。

JavaScript

function loadImage() {
	var preload = new createjs.LoadQueue();
	preload.addEventListener('fileload', handleFileComplete);
	preload.loadFile(".//image.jpg");
}
function handleFileComplete(event) {
	document.body.appendChild(event.result);
}

PreloadJSのデモページ
　

【参考サイト】

• CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5