bulletml.jsでjgame.jsのパフォーマンス検証

BulletMLってのがある。
http://www.asahi-net.or.jp/~cs8k-cyu/bulletml/index.html

東方みたいな（って俺東方やったことすけど）弾幕作れちゃうライブラリだ。
それをjavascriptにしてみたbulletml.jsってのがある。
https://github.com/daishihmr/bulletml.js

このbulletml.jsがenchant.jsをサポートしてたので、サンプルを見てみた。
http://9leap.net/games/2364/

githubのものとどうも微妙に違う気がするので、勝手ながらgithubの内容をアップしたのがこっち。
http://tsuge.sub.jp/sugoroku/jgame/index.html
まあ、それなりに遅いけど、結構頑張ってると思う。enchant.jsもv0.6.2だからcanvas描画だしね。

元々bulletml.jsのenchant.js対応がフレームベースなので、ちょっと調整しきれてないけど、jgame.jsでもサポートしてみた。
http://tsuge.sub.jp/sugoroku/jgame/index3.html
爆発や当たり判定やってないからずるだけど、これだけ見るとそれなりに速い。

速いんだが、弾丸の数が2500くらいになると極端に落ちる。特に遅いのがこの瞬間。

この瞬間俺のmac + chrome環境だと多分10fps切ってる。
他はそれなりなんだけど、フレームベースのを時間ベースに直したりもしてないので、コマ落ちし出すともうやばいね。

とりあえずcanvasでこれ以上は無理だろうってくらいのパフォーマンスは出したいんだけど、まだそこまでは出てねぇなぁって感じすかね。
ちなみにcanvasでの限界の上にはWebGLがあって、bulletml.jsはtmlib.jsもサポートしてるのでwebglもいける。サンプルがまた素晴らしい。作者の人がwebgl対応して作ったのがこのサンプルでこれがまた素晴らしい。
http://9leap.net/games/2877/

webglとは勝負する気ないし、webglで書くならjgame.jsはファーストチョイスじゃなくなるんだけど、気が向いたらこのbulletml.jsのサンプルを全部60fpsで動かすにはどうすりゃいいのかを考えてみたい。

bulletml.jsは面白いので、気が向いた人は使ってなんか作ってみればと一応紹介。
弾幕シューティングはやっぱりwebglの領域だと思うけど、多分tmlib.jsと組み合わせるのがベストだと思われる。jgame.jsでサポートするかどうかは未定。

2013年02月16日追記

マップ描画と同じように弾丸を一括描画するようにしたら速度が劇的に上がったので、別記事書きました。
http://d.hatena.ne.jp/tsugehara/20130216/1361031674

今回の分も含めて、TypeScriptのソースコードも公開しています。

2013年02月18日追記

てっきりtmlib.jsの機能でwebgl対応しているのかと思ったら違ったみたいで、bulletml.jsの作者の人が作ったサンプルであるglshooterで使われているwebgl関連の技術は、全部作者の人が自作したそうで。
お詫びしつつ本文訂正しておきます。

ちなみにglshooterはここでソースが公開されてる。
https://github.com/daishihmr/glshooter
MITだし、iPhone 4sで動作確認とれてるそうなので、要チェックかも。