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

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

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

※ HTML5対応ブラウザ(ChromeやSafari、Firefox、IE9以上)でご覧ください。

有名な絵画っぽいもの

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

Box2D Drop

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

Blur Light

130215_blur
EaselJSのぼかしの表現を使って作成したシンプルなグラフィックデモです。canvasタグにはFlashのように描画モードを設定できるオプション「compositeOperation」があるのですが、それを利用してグラフィックがかさねあわさるとより明るくなるように工夫しています。ただ、ブラウザ間のレンダリング負荷に大きな差があるので注意が必要です。こちらも新しいiPadや最新のスマートフォンでも滑らかに動かすことができます。


加賀 篤史

加賀 篤史

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