ライブラリ紹介
続いて、CreateJSを構成する個々のライブラリの簡単な紹介が行われました。
EaselJS
(06:40)1つ目に紹介された「EaselJS」はCreateJSの中心となるライブラリで、表示リストの基本機能が実装されています。
基本となるコード
(07:05)ここでは基本となるコードを見せながら、HTMLのbodyタグにCanvasが定義されていること、scriptタグでライブラリを読み込んでいることなどが示されました。コードはscriptブロック内にも記述されており、stageのインスタンスが生成されています。
(08:15)CreateJSでは、いつ表示を更新するかを制御できます。そのため、update()メソッドを明示的に呼ばなければ画面の更新は行われません。
(08:40)アニメーションを実現するためTickerが用意されています。デフォルトでは毎秒20回、イベントリスナとして登録されたオブジェクトのtick()を呼び出す仕様になっています。
基本表示クラス
(09:40)続いて、基本となる表示クラスの一覧が示されました。スライドからは、Shape&Graphics、Bitmap、Text、Container、Stage、BitmapAnimation&SpriteSheet、DOMElementといったクラスが確認できました。
BitmapAnimation
(10:20)その中で具体的な使い方が解説されたのはBitmapAnimationです。
CreateJSでスプライトシートを定義するには、画像ファイルに加えてframeとanimationsという属性を指定します。これをBitmapAnimationのコンストラクタに渡すだけで、スプライトシートを利用したアニメーションを実現することができます。onClick()を使ってインタラクションを追加したり、onTick()を使ってアニメーションを追加することも簡単に行えるとのことです。
DOMElement
(13:00)表示クラスからは、DOMElementも紹介されました。DOMElementはHTML要素をEaselJSの表示リストから利用するためのクラスです。デモでは、div領域を他のEaselJSの要素と一緒にアニメーションさせる様子が示されました。テキスト要素のようにcanvasでは扱いにくい表現も、DOMElementであれば簡単に組み合わせられるというのが利点とのことです。
TweenJS
(14:20)CraeteJSの2つ目のライブラリとして紹介された 「TweenJS」は、トゥイーンを使ったアニメーションを実現するためのライブラリです。トゥイーンに表示オブジェクトとその動きを指定するコードと、そのコードの実際の動作がデモによって紹介されました。トゥイーンにはイージングも設定できます。複数のアニメーションを時系列順に指定することもできるようになっています。
SoundJS
(16:45)CreateJS の3つ目のライブラリ 「SoundJS」は、音声をWebで容易に扱えるようにするものです。様々な種類のオーディオに対応する抽象化された共通のAPIが定義されており、オーディオの種類によってコードを使い分ける必要がないようになってます。
PreloadJS
(18:00)最後に紹介された「PreloadJS」は、アセットの読み込みをスムーズにするためのライブラリです。キューに対して必要なアセットを指定すると、バックグラウンドで読み込みを行い、読み込み状況を伝えるイベントを発生させます。