ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

Webでのゲーム開発に。JavaScript向け物理エンジンまとめ

アクションゲームやパズルゲーム、シューティングゲームの当たり判定など様々なところで使われるのが物理エンジンです。各プラットフォームごとにエンジンが開発されていますが、今回はHTML5/JavaScriptに注目して紹介します。

Box2DJS

Box2DJS
有名な物理エンジンであるBox2DをJavaScriptにポーティングしたエンジンになります。若干昔のエンジンで、prototype.jsに依存しています。ただ、IECanvasを使えばレガシーなIEにも対応できるのが利点です。

Box2DJS - Physics Engine for JavaScript

LiquidFun

LiquidFun
Googleが開発した流体をシミュレートできる物理エンジンです。ベースはBox2Dになります。C++、JavaそしてJavaScriptに対応しています。

https://www.youtube.com/watch?v=yXLmdu810BQ

LiquidFun

Matter.js

Matter.js
スマートフォンでの動作も考慮された軽量な物理エンジンです。Canvasでのレンダリングに加えて、WebGLによるレンダリングもサポートしています。ブラウザはIE8以上からサポートしています。

スマートフォン向けには軽量であることに加えて、タッチイベントやレスポンシブへの対応も行われています。スローモーションにしたり、逆にスピードアップすることもできます。

Matter.js - a 2D rigid body JavaScript physics engine

Physijs

Physijs
three.jsに対応した3D物理エンジンです。デスクトップであってもパワーをかなり使います。ジェンガのデモは良くできていて一度体験して欲しいと思います。

Physijs - a physics plugin for threejs

box2dweb

box2dweb
Box2DFlash 2.1aをJavaScriptに移植したエンジンです。2011年くらいからアップデートされていませんが、今でも動作します。

box2dweb - Box2DFlash port to javascript - Google Project Hosting

ammo.js

ammo.js
Bulletという有名な物理エンジンをEmscriptenを使ってJavaScriptに変換したライブラリになります。WebGLを使っているので大量のオブジェクトもスムーズに書き出せるようになっています。

kripken/ammo.js

cannon.js

cannon.js
上記ammo.jsにインスパイアされた3D物理エンジンです。ammo.jsと同じくBulletをJavaScriptに変換したエンジンになります。Three.jsとの親和性が高いようです。

schteppe/cannon.js


いかがでしょうか。JavaScriptでも高いパフォーマンスで出力できるのが分かるかと思います。デスクトップはもちろん、スマートフォンにおいても当たり判定が必要なゲームなどで使うと良さそうです。

Webブラウザで遊んでできたデータの保存はぜひニフティクラウド mobile backendを使ってください!

ニフティクラウドmobile backend mbaas ご紹介 概要資料