はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

Canvas のライブラリCreateJS を試してみる

Canvas のライブラリCreateJS を試してみる

Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。

公式サイト: www.createjs.com

CreateJS とは

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

Adobe推しているCanvasのライブラリ。 Flashの代替として作ってるみたいです。

CreateJS というライブラリファイルがあるわけではなく、 「EaselJS」、「PreloadJS」、「TweenJS」、「SoundJS」の 4つのラブラリファイルから構成されている。

CDN も提供されている。

まだ、正式版1.X系は出てないので、 仕様変更の可能性が大きいです。

EaselJS

EaselJS

EaselJS は、 Canvas で使用される要素を書きやすくしてくれるライブラリです。

EaselJS Document

チュートリアル

EaselJS Tutorial

codepen.io

CDN で読み込む場合は、以下のコードで読み込める。


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

CanvasStage インスタンスで管理する。 以下のコードで生成する。


var stage = new createjs.Stage("canvas_id_name");

Canvasで描画する形、rect やarc は、 Shape インスタンスで扱えるようになっている。 オブジェクト志向のように扱える。


var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;

描画したいShapeStageに追加する。 しかし、追加するだけでは描画されない。


stage.addChild(circle);

update() で初めて描画される。


stage.update();

PreloadJS

PreloadJS

PreloadJS は、Canvasで扱うような素材ファイルの読み込みに使う。 このライブラリで、あらかじめファイルを読んでおき、 後で描画することができる。

PreloadJS Document

チュートリアル

PreloadJS Tutorial

ボタンを押すと、画像を読み込んで、body へ追加されるチュートリアルです。

codepen.io

CDN で読み込む場合は、以下のコードで読み込める。


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

LoadQueue インスタンスを生成する。

ファイルが読み込まれると、fileloadイベントが発生し、 handleFileComplete関数が呼ばれる。

loadFile 関数で実際に、 ファイルの読み込みが始まる。


function loadImage() {
  var preload = new createjs.LoadQueue(false);
  preload.addEventListener("fileload", handleFileComplete);
  preload.loadFile("url.png");
}

画像が読み込まれると、 event.result はimgタグになる。 なので、body 要素にimgタグが追加されることになる。


function handleFileComplete(event) {
  document.body.appendChild(event.result);
}

TweenJS

TweenJS

TweenJSは、アニメーションの設定をすることができる。

TweenJS Document

チュートリアル

TweenJS Tutorial

codepen.io

CDN で読み込む場合は、以下のコードで読み込める。

  

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

インスタンスでなく、静的メソッドTween.get() でアニメーションの設定をする。

第1引数にアニメーションしたいShapeインスタンスを指定する。

第2引数にアニメーションの設定、loop で、 アニメーションの繰り返しを設定できる。

to() メソッドでアニメーションを追加できる。 メソッドチェーンのように書ける。

to() の第1引数に変化させるパラメータを指定。 第2引数にduration, 第3引数にアニメーションのeasingを指定。


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));

setFPS() で、FPSを指定できる。

Stagetick イベントを 追加することで、実際にアニメーションが実行される。


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

SoundJS

SoundJS

audioタグで扱えるような音データを扱うことができる。

SoundJS Document

チュートリアルは省略。 SoundJS Tutorial