業務で触れているCreateJSについて、まとまった記事を書いていきたいので、その導入にあたる記事を書いた。
CreateJSとは
HTML5でリッチでインタラクティブなコンテンツを作るためのJavaScriptライブラリおよびツール。
たまにゲームエンジンとして取り上げられたりするが、ゲームエンジンではない。PlatypusのようにCreateJSをベースにしているゲームエンジンならいくつかある。
スポンサーにAdobe、Microsoft、Mozillaなどが名を連ねているので、そのあたりは期待できそう。
URL: CreateJS
CreateJS suite
CreateJSに含まれる4つのJavaScriptライブラリ。それぞれcreaejsという名前空間にあるが、基本的には単体でも使える。
たまに使っていないのにとりあえず全部ロードしているアプリを見るけど、そういうのはやめた方がいい。
記事に対応するライブラリのバージョン
| library | version |
|---|---|
| EaselJS | 0.7.1 |
| TweenJS | 0.5.1 |
| SoundJS | 0.5.2 |
| PreloadJS | 0.4.1 |
EaselJS
canvas描画ライブラリ。最近WebGLに対応した。
http://blog.createjs.com/webgl-support-easeljs/
Stageに表示オブジェクト（DisplayObject）をくっつけていくスタイルで記述していく。Stage自体も表示オブジェクトにあたる。
Stageをルートとして表示オブジェクトのツリー構造をつくっていくあたりがActionSctiptぽいらしい（ASやったことないので適当）
setTimeoutなどのタイマーを一元管理するTickerクラスも含まれている。
MovieClip
EaselJSでMovieClipクラスを使うためのプラグインのようなもの。
EaselJSとTweenJSに依存している。Toolkit for CreateJSを使う場合は必須。
MovieClipクラスを一言で言うと、タイムライン（TweenJSのTimelineクラス）をもった表示オブジェクト（Containerクラス）といった感じ。
TweenJS
Tweenライブラリ。主にTweenアニメーションとかに使う。
メソッドチェーン形式で記述して、JSのプロパティをtweeningできる。
EaselJSと一緒に使う場合は問題にならないが、EaselJSのTickerに依存しているので、単体で使う場合はTicker相当の関数などを実装する必要がある。
SoundJS
音声再生ライブラリ。Web Audioにも対応している。
そろそろオーディオスプライトにも対応するとのこと。
http://blog.createjs.com/audio-sprite-support-in-soundjs/
PreloadJS
アセットローダーライブラリ。いろいろな形式のアセットをロードできる。
BINARY: Raw binary data via XHR
CSS: CSS files
IMAGE: Common image formats
JAVASCRIPT: JavaScript files
JSON: JSON data
JSONP: JSON files cross-domain
MANIFEST: A list of files to load in JSON format, see loadManifest
SOUND: Audio file formats
SVG: SVG files
TEXT: Text files - XHR only
XML: XML data
特徴
イベントモデル
CreateJSのライブラリすべてに共通で入っているクラスがいくつかあって、イベント（Eventクラス、EventDispatcherクラス）もその1つ。
イベント関連のクラスがそれぞれのライブラリに注入されるので、それぞれのライブラリは、イベントハンドラの設定やイベントの発火を統一的記述することができる。addEventListenerやremoveEventListenerの話。今っぽいonとかoffも使える。
Toolkit for CreateJS
Flash Proのプラグイン。Flash CCからは標準で使える機能になっている。
Flashコンテンツをswfの代わりに、HTML、JavaScript、および画像で出力してくれる。HTML自体はテストコードみたいなもの。
アニメーターの方々にはいろいろ制約が課されるみたいですが、再現性は高くて結構使える。ただ、大規模アプリ開発ではエクスポートしてそのまま使うのはあまり現実的ではない。出力ファイルが微妙だったり、ワークフローが複雑になったりといろいろ問題がある。その辺のことは別途まとめたい。
とはいえ、これがあったからCreateJSが結構使われるようになったんだと個人的に思っている。エンジニア以外ならToolkit自体がCreateJSだと認識している人もいるのではないかと思ってる。