本日開催のCreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。
※ HTML5対応ブラウザ（ChromeやSafari、Firefox、IE9以上）でご覧ください。
有名な絵画っぽいもの
CreateJSとCSS3を用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSS3で作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。
- デモはこちらから（※Chrome推奨）
Box2D Drop
CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます。新しいiPadでも滑らかに動きます。
Blur Light
EaselJSのぼかしの表現を使って作成したシンプルなグラフィックデモです。canvasタグにはFlashのように描画モードを設定できるオプション「compositeOperation」があるのですが、それを利用してグラフィックがかさねあわさるとより明るくなるように工夫しています。ただ、ブラウザ間のレンダリング負荷に大きな差があるので注意が必要です。こちらも新しいiPadや最新のスマートフォンでも滑らかに動かすことができます。
- デモはこちらから (※ Chrome、Safari、IE10推奨）