Canvasをより手軽に使いやすくするフレームワーク「KineticJS」
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。
HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。
サンプル。ボタンを押すとオブジェクトが動く。
こちらは星をドラッグアンドドロップできる。
世界地図のベクター画像。
ビルのマップ。マウスに反応して格好いい。
動物の絵と影をマッチさせるゲーム。
ここからは実際に利用されている例。ロボットアバターを作成する。
こんな感じに自由に選べる。
かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。
ひげを載せる遊び。これもKineticJSで出来ていたのか！
弾をよける無茶なインベーダー。
Chrome上で動くゲームにも使われている。
KineticJSのコードを見ると分かりますが、ステージというオブジェクトの中にレイヤーを追加していって、さらにドローしたオブジェクトを追加していくといった具合で非常に分かりやすくコーディングができます。追加したオブジェクトをグループ化したりするのも簡単です。アニメーションやイベントのハンドリングも同じくとても分かりやすいです。
KineticJSはHTML5/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
KineticJSはとても分かりやすいコーディングが可能です。ある意味でFlashを使って専用のIDEをベースにゲームを作ったりするよりも分かりやすいかも知れません。実際、既に多数のゲームやWebサイトで取り入れられています。下手にFlashを使ってバナーを作るよりも、スマートフォンに対応したKineticJSのが応用が利く可能性が高いです。
HTML5のCanvasを使えばドローが行えるのはみんな知っていることですが、実際にできないのはそのための手順がとても面倒であるからに他なりません。それを手軽にしてくれるのがフレームワークです。現状感じている面倒な作業があれば、それはフレームワーク化する価値があるものなのかも知れません。
via KineticJS - HTML5 Canvas Drawing Made Easy - The Changelog - Open Source moves fast. Keep up.