CreateJSを使ってみよー
こんにちは。相変わらずドラクエ10三昧の日々を過ごしている橋本です。
さて、今日はHTML5でリッチなコンテンツを簡単に作成することができるJavascriptライブラリ「CreateJS」について、サンプルを交えつつ簡単に使い方を見ていきたいと思います。
そもそもCreateJSとは何か といいますと、以下の4つのライブラリ、ツール群をパッケージングしたものがCreateJSとなります。
- EaselJS
- Canvasを簡単に扱うためのライブラリ
- TweenJS
- トゥイーンやアニメーションを扱うためのライブラリ
- SoundJS
- 音声データを扱うためのライブラリ
- PreloadJS
- 外部ファイルの読み込みを制御するためのライブラリ
今回はこの中でも、EaselJSとTweenJSの使い方についてサンプルコードを書きながら見て行きたいと思います。
SoundJSとPreloadJSについては、音声と画像のサンプルファイルを用意するのが面倒なので今回は除外したいと思います！
まずはサンプルコードで共通で使うHTMLです。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://code.createjs.com/createjs-2013.05.14.min.js" type="text/javascript"></script>
<title>demo</title>
</head>
<body>
<canvas id="demoCanvas" height="500" width="500">
Canvasが使えるブラウザで見てね
</canvas>
</body>
<script>
// ここにコードを書いていくよー
</script>
</html>
今回CreateJSはCreateJS公式で用意されているCDNを利用して読み込んでいます。
今回はサンプルなのでcreateJSのライブラリ郡を一括で読み込んでいますが、それぞれのライブラリを個別に読み込むことも可能です。
詳しくはこちらをご覧ください。
また、GitHubからDLすることもできるので、CDNを使いたくない方はこちらをどうぞ。
bodyの中にはcanvasをひとつ用意します。このcanvasに要素を描画していくことになります。
では、まず最初にEaselJSをつかって円を書いてみます。
<script>
(function(window){
var cj = createjs,
stage, circle;
function init() {
stage = new cj.Stage('demoCanvas');
circle = new cj.Shape();
circle.graphics.beginFill('red').drawCircle(0, 0, 50);
circle.y = 50;
circle.x = 50;
stage.addChild(circle);
stage.update();
}
window.addEventListener('load', function(){
window.removeEventListener('load', arguments.callee);
init();
}, false);
}(window));
</script>
非常に簡単ですね。特にFlash経験者の方であれば、すんなりとコードを理解してもらえるかと思います。
流れとしては、canvasタグのidを引数として、stageオブジェクトを作り、そこにshapeオブジェクトをaddして描画します。
円を書くためには、graphicsオブジェクトのdrawCircleメソッドを使用します。
矩形を作成するときには、drawRectメソッドを使用します。
次に、画像を描画してみます。
<script>
(function(window){
var cj = createjs,
stage, bitmap;
function init() {
stage = new cj.Stage('demoCanvas');
bitmap = new cj.Bitmap('http://blog.asial.co.jp/image/user_image_m/22.png');
bitmap.y = 50;
bitmap.x = 50;
stage.addChild(bitmap);
stage.update();
}
window.addEventListener('load', function(){
window.removeEventListener('load', arguments.callee);
init();
}, false);
}(window));
</script>
画像を描画するときにはbitmapオブジェクトを使用します。オブジェクトをnewするときに、画像のパスを与えるだけなので簡単ですね。
では、この描画された画像にTweenJSを使って動きを加えてみます。
<script>
(function(window){
var cj = createjs,
stage, bitmap;
function init() {
stage = new cj.Stage('demoCanvas');
bitmap = new cj.Bitmap('http://blog.asial.co.jp/image/user_image_m/22.png');
bitmap.y = 50;
bitmap.x = 50;
bitmap.scaleX = 0;
bitmap.scaleY = 0;
bitmap.alpha = 0;
stage.addChild(bitmap);
stage.update();
cj.Ticker.setFPS(60);
cj.Ticker.addEventListener('tick', tickHandler);
stage.update();
cj.Tween.get(bitmap).to({alpha: 1, scaleX: 2, scaleY: 2}, 2000);
}
function tickHandler(event) {
stage.update();
}
window.addEventListener('load', function(){
window.removeEventListener('load', arguments.callee);
init();
}, false);
}(window));
</script>
TweenJSを使うときには、Tween オブジェクトのgetメソッドを使って、tweenオブジェクトを取得し、toメソッドを使って変化させる対象のプロパティと時間を設定します。
toメソッドの他にも、waitメソッドで待ち時間を入れたり、callメソッドでアニメーション終了後に特定の関数を実行したりできます。
また、stageを定期的に再描画する必要があるので、Tickerオブジェクトのtickイベントにイベントリスナを設定して、定期的にstageを更新しています。
tickイベントは設定したFPSに合わせて定期的に発行されるイベントです。
tweenのアニメーションはメソッドチェーンで複数のアニメーションを順次実行することができます。
<script>
(function(window){
var cj = createjs,
stage, bitmap;
function init() {
stage = new cj.Stage('demoCanvas');
bitmap = new cj.Bitmap('http://blog.asial.co.jp/image/user_image_m/22.png');
bitmap.y = 50;
bitmap.x = 50;
bitmap.scaleX = 0;
bitmap.scaleY = 0;
bitmap.alpha = 0;
stage.addChild(bitmap);
stage.update();
cj.Ticker.setFPS(60);
cj.Ticker.addEventListener('tick', tickHandler);
stage.update();
cj.Tween.get(bitmap, {loop: true}).to({alpha: 1, scaleX: 2, scaleY: 2}, 1000).wait(1000).to({alpha: 0, scaleX: 0, scaleY: 0}, 1000).wait(1000);
}
function tickHandler(event) {
stage.update();
}
window.addEventListener('load', function(){
window.removeEventListener('load', arguments.callee);
init();
}, false);
}(window));
</script>
以上、簡単ではありますが、CreateJSの使い方を見て行きました。
今回は自分で処理を記述する方法を紹介しましたが、FlashCS6の拡張機能「Toolkit for CreateJS」を使えば、FlashをCreteJSに変換することもできます。
Flashに慣れ親しんでいる人はそちらも試してみると面白いかと思います。
ではでは
