CreateJSを使ってインタラクティブなHTML5デモを作ってみた

35

CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。

有名な絵画っぽいもの

CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。

Box2D Drop

CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ&ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます。

Blur Light

EaselJSのぼかしの表現を使って作成したシンプルなグラフィックデモです。canvasタグにはFlashのように描画モードを設定できるオプション「compositeOperation」があるのですが、それを利用してグラフィックがかさねあわさるとより明るくなるように工夫しています。

加賀 篤史

クリエイティブディレクター。最近はゲームアプリの企画/ディレクション/UIデザインなどを主な業務としています。個人プロジェクトとしてActionScript 3.0ライブラリ「Tween24」等を開発。

この担当の記事一覧