これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」

ホーム > JavaScript > これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」

これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」

Posted by opaken on 2012年7月4日 11:09 カテゴリー: JavaScript

前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。

誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。

これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか？筆者もそのうちの一人です。

しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。

そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。（CAATは、Canvas Advanced Animation Tookitの略）

「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。

CAATの機能と特徴

オンスクリーンエンティティ
カスタムマトリックススタック
ゲームループフック
シーン管理、シーントランジション
アフィン変換とアルファ透明度のアプリケーションのための補間
完全なピクセルベースの表現
複雑なパス定義
ビヘイビア
シームレスな2Dボックス統合
シーン毎のタイマー数無制限
座標計算
マウス、キーボード、加速度センサーからの入力システム
リソース管理とプリロード。
スプライト、図形、テキスト、パス、補間、等の描画
容易に拡張可能なフレームワーク
オープンソース（MITライセンス）
主要なキャンバス対応のブラウザで動作可能（Internet Explorerはバージョン9以上が必要）

CAATのレンダリングエンジン

CAATのレンダリングエンジンは、CanvasだけでなくWebGLやCSSにも対応しています。

これらは、１つのコードベースでレンダリングを切り替えることができるようになっています。

デモでは、SumonというゲームをCanvas版、WebGL版、CSS版の３つが用意されており、動きの違いを確認することができます。

CAATのデモ

CAATのデモを見るとどのようなことができるのかが分かります。まずは自分の目で見てみるのが一番ですね。

複雑なパス制御

パスに沿って魚と数字が動くデモです。パスのポイントをマウスで移動すると追従します。
右側のアイコンで移動周期と速度を切り替えることもできます。

ビヘイビア管理

魚が順番に出現して、それぞれの魚が別々の行動を行うデモです。このような自然と魚が泳いでいるシーンを作ることができます。

タイマー管理

草が風になびいて時間と共に景色（背景）の変化を作っているデモです。夜空の星やホタルが飛ぶなどの細かい演出があり、見ているだけで癒されます。

衝突の検出

マウスに追従して円が動きます。円同士が衝突するとバウンドするデモです。複雑な形状の衝突判定もできそうですね。

シーンの切替

複数のシーンを別々で管理して切り替えるデモです。シーンの切替時もアニメーションさせることができます。

CAATのチュートリアルとソース

CAATのチュートリアルも用意されているので、デモとあわせて作り方を見ていくとよいと思います。

APIのドキュメントがあるのもうれしいですね。

GithubからCAATのソースをダウンロードすることができます。

まとめ

「CAAT」を使えば、JavaScriptだけで高度なゲームを作ることができます。

他にもゲームのフレームワークはたくさんありますが、デモやチュートリアル、APIがきっちりと整備されているので、初心者でもとっつきやすいと思いますよw

iPhoneやiPadでも軽快にデモのアニメーションが動いたので、スマホ向けのゲームの基盤として利用しても面白いかもしれません。

とりあえずGithubからソースをダウンロードして、コードリーディングするだけでも勉強になるかもしれません。

是非、この週末ゲーム作りにチャレンジしてみてください。

それでは、また！

【コーディングスピードが一気に加速するHTMLエディタ】
コーディングしながらリアルタイムに結果を確認することができるブラウザ上で動作するHTMLエディタです。とても便利なので是非チェックしてみてください。
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」

【近未来的なインターフェースを体験しよう】
パソコンについているウェブカメラを利用して、その映像をブラウザのWebRTC機能を使って取り込み、顔認識で機体を操作するゲームです。面白いので是非チェックしてみてください。
WebRTCを使って顔コントローラーで遊ぶKinect風ゲーム「FaceKat」

【Kinectの世界がブラウザで体験できる】
Chromeバージョン21から標準でWebRTCが使えるようになったので、Kinectのようなゲームがどんどん登場してきています。面白いので是非チェックしてみてください。
Chromeがゲーム機になる！WebRTCを使ったダンスゲーム「BeHero Tap Dance」

【3Dグラフィックスの現場で使えるサービス】
ファイルをアップロードするだけで3Dモデルの共有ができるサービスです。様々な3Dファイルフォーマットに対応しているので、こちらもあわせてチェックしてみてください。
3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」

【画期的な3Dモデルテクノロジー】
顔写真をアップロードするだけで簡単に3Dで動く顔が生成できる技術です。デモが用意されているので是非試してみてください。
これはすごい！一枚の顔写真から自分の顔の3Dモデルが作れるサービス「Vizago」