前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。
誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。
これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか?筆者もそのうちの一人です。
しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。
そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。(CAATは、Canvas Advanced Animation Tookitの略)
「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。
CAATの機能と特徴
- オンスクリーンエンティティ
- カスタムマトリックススタック
- ゲームループフック
- シーン管理、シーントランジション
- アフィン変換とアルファ透明度のアプリケーションのための補間
- 完全なピクセルベースの表現
- 複雑なパス定義
- ビヘイビア
- シームレスな2Dボックス統合
- シーン毎のタイマー数無制限
- 座標計算
- マウス、キーボード、加速度センサーからの入力システム
- リソース管理とプリロード。
- スプライト、図形、テキスト、パス、補間、等の描画
- 容易に拡張可能なフレームワーク
- オープンソース(MITライセンス)
- 主要なキャンバス対応のブラウザで動作可能(Internet Explorerはバージョン9以上が必要)
CAATのレンダリングエンジン
CAATのレンダリングエンジンは、CanvasだけでなくWebGLやCSSにも対応しています。
これらは、1つのコードベースでレンダリングを切り替えることができるようになっています。
デモでは、SumonというゲームをCanvas版、WebGL版、CSS版の3つが用意されており、動きの違いを確認することができます。
CAATのデモ
CAATのデモを見るとどのようなことができるのかが分かります。まずは自分の目で見てみるのが一番ですね。
パスに沿って魚と数字が動くデモです。パスのポイントをマウスで移動すると追従します。 右側のアイコンで移動周期と速度を切り替えることもできます。
魚が順番に出現して、それぞれの魚が別々の行動を行うデモです。このような自然と魚が泳いでいるシーンを作ることができます。
草が風になびいて時間と共に景色(背景)の変化を作っているデモです。夜空の星やホタルが飛ぶなどの細かい演出があり、見ているだけで癒されます。
マウスに追従して円が動きます。円同士が衝突するとバウンドするデモです。複雑な形状の衝突判定もできそうですね。
複数のシーンを別々で管理して切り替えるデモです。シーンの切替時もアニメーションさせることができます。
CAATのチュートリアルとソース
CAATのチュートリアルも用意されているので、デモとあわせて作り方を見ていくとよいと思います。
APIのドキュメントがあるのもうれしいですね。
GithubからCAATのソースをダウンロードすることができます。
まとめ
「CAAT」を使えば、JavaScriptだけで高度なゲームを作ることができます。
他にもゲームのフレームワークはたくさんありますが、デモやチュートリアル、APIがきっちりと整備されているので、初心者でもとっつきやすいと思いますよw
iPhoneやiPadでも軽快にデモのアニメーションが動いたので、スマホ向けのゲームの基盤として利用しても面白いかもしれません。
とりあえずGithubからソースをダウンロードして、コードリーディングするだけでも勉強になるかもしれません。
是非、この週末ゲーム作りにチャレンジしてみてください。
それでは、また!