Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

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

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

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

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

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

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

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

CAATの機能と特徴

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

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

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

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

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

CAATのデモ

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

複雑なパス制御

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

ビヘイビア管理

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

タイマー管理

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

衝突の検出

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

シーンの切替

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

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

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

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

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

まとめ

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

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

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

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

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

それでは、また!