ブラウザゲームのプロトタイピングに役立つJavaScriptライブラリ

ブラウザで動くゲームのプロトタイプを作るとき、もちろんPhaserとかの機能満載のゲームエンジンを使ってもいいのだが、こういったエンジンは多彩な機能に応じてAPIが豊富すぎて、使いこなせるようになるまでが若干面倒なことがある。そういった時、もっと軽量のJavaScriptライブラリを機能ごとに組み合わせた方がお手軽に作れるのではないか。そう思って、ゲームで使う機能ごとのライブラリを探してみた。

グラフィックス

p5.jsが役立ちそう。p5.jsはビジュアルデザイン向けとして有名な言語ProcessingをJavaScript向けライブラリとして提供したもの。似たものとしてProcessing.jsもあるが、こちらは元のProcessing言語をブラウザ上で動かすことに主眼を置いており、ライブラリとして使う分にはp5.jsの方が使いやすい。

Get Started見れば分かるように、createCanvasしてellipseするだけで楕円がすぐ書ける。円とか矩形とかでキャラを代用して表示する描画はすごく簡単にできる。draw関数が一定時間ごとに呼び出されるので、ゲームループもこれで実現できる。

当たり判定

Sat.jsでいいのではないか。線、円、ポリゴンの当たり判定が簡単に判定できる。一つ問題があって、p5.jsと組み合わせるとき、p5.jsもSat.jsもそれぞれ独自の2次元Vectorを持っていて、それらの変換が必要なこと。ライブラリを組み合わせるとこういった問題がまま起こる。

物理エンジンが必要ならMatter.jsとかかしらん。Matter.jsは描画もしてくれるから、これ使うならp5.jsは不要かもしれん。

キー入力

ゲーム向けキー入力をハンドリングするライブラリはあまり見つからない。世の中のキー入力ライブラリは複数キーのコンビネーションを扱うためのものがほとんどで、ゲーム向けにあるキーが今押されている、ちょうど今押された、今離された、みたいな情報を返すものはあまり無い。

かろうじて見つけたのはgame-keyboard

ゲーム用ならWASD入力に応じて上下左右の移動量を返す専用関数なども欲しいところだ。

ユーティリティとか言語とか

ゲームに限った話ではないが、コレクション操作などを簡単にするためにlodashを入れておくといろいろ捗る。

あとJavaScriptを素で書いてもいいが、最近はなんらかのAltJSのサポートを受けた方が便利なことが多い。個人的にはTypeScriptVisual Studio Codeの組み合わせが手堅いと思っている。ES6をBabelを使って書くのも今風か。

オブジェクト管理というかタスクシステムというかアクターというか

ゲーム内のキャラクタ群を管理して1フレに1回アップデートしてくれるアレ。これもこの機能単独のライブラリは見つけられなかった。まああまりに地味すぎてライブラリにするモチベーションが無いからかもしれん。最低限のものは以下の作りでもいける。update()がfalseを返したら削除する実装。

var actors = [];
function updateActors() {
  actors = _.filter(actors, (a) => a.update() !== false);
}

ゲーム向けMath

ゲームでよく使うclampとかwrapとかを備えたMathライブラリ、ってのも見つからない。PhaserのMathとかUnityのMathfに含まれるユーティリティ関数群を備えたライブラリがあってもよさそうな気がするのだが。

まあ自分でNumberを後から拡張してもいいよね。

interface Number {
  clamp(min?: number, max?: number): number;
  wrap(min?: number, max?: number): number;
}
Number.prototype.clamp = function(min: number = 0, max: number = 1): number{
  return this < min ? min : (this > max ? max : this);
}
Number.prototype.wrap = function(min: number = 0, max: number = 1): number{
  var w = max - min;
  var v = this - min;
  return v >= 0 ? v % w + min : w + v % w + min;
}

音は、プロトタイプにはいらない、よね?どうしても何か鳴らしたかったらjsfxとか。

複数ライブラリを組み合わせてゲームを作るのは現実的なのか

ライブラリを組み合わせてカスタマイズしたオレオレゲームエンジンみたいのが簡単に作れるのは楽しい。が、いざライブラリを探してみると結構足りてないパーツがあるってのと、Vectorの衝突みたいにライブラリを組み合わせる際に出てくる問題があるのがネック。車輪の再発明を避けつつ、自前ゲームエンジンを作って遊んでみる時にはいいアプローチかも。