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