Edited at

CreateJSの私的まとめ

More than 5 years have passed since last update.

業務で触れている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つ。

イベント関連のクラスがそれぞれのライブラリに注入されるので、それぞれのライブラリは、イベントハンドラの設定やイベントの発火を統一的記述することができる。addEventListenerremoveEventListenerの話。今っぽいonとかoffも使える。


Toolkit for CreateJS

Flash Proのプラグイン。Flash CCからは標準で使える機能になっている。

Flashコンテンツをswfの代わりに、HTML、JavaScript、および画像で出力してくれる。HTML自体はテストコードみたいなもの。

アニメーターの方々にはいろいろ制約が課されるみたいですが、再現性は高くて結構使える。ただ、大規模アプリ開発ではエクスポートしてそのまま使うのはあまり現実的ではない。出力ファイルが微妙だったり、ワークフローが複雑になったりといろいろ問題がある。その辺のことは別途まとめたい。

とはいえ、これがあったからCreateJSが結構使われるようになったんだと個人的に思っている。エンジニア以外ならToolkit自体がCreateJSだと認識している人もいるのではないかと思ってる。