canvas + javascript

html5でゲームを作り始める。

もっとも、一年ほど前に、テストでADVは作っているので、Javaのゲーム用ライブラリを移植するのが、今回の主な作業である。

JavaScriptとdivだけで作ろうかと思ったが、それだと演出が根こそぎNGになるため、
html5のcanvasを使う。

とりあえずは、ブラウザにあわせて可変サイズにするところまでは、過去に作っているので、
サイズやFPSを表示するなど、まずは環境作り。

FPSを表示すると、ベンチマークをしたくなる。
というわけで、プリミティブな図形では一番コストがかかる、円を表示してみる。

html5で図形を描く場合、塗りつぶしと枠が別で指定できる。
わざと描画領域が大幅に重なるようにして、ランダムな色で描画するようにしてみる。

このPCでは、3200個で、30FPSの処理落ち無し。ただし、塗りつぶし or 枠のみ。
両方を同時に描画すると、10FPSと極端に下がる。

これを、塗りつぶし6400個にしても、20FPS程度にしかならない。
3200個の半径を倍にしても30FPS出る。
枠と塗りをあわせると、なぜココまで落ちるのだろうか。

また、実行中は、しばらくするとPCのファンの音がうるさくなる。
タスクマネージャで見ると、クアッドコアのCPUが全て50%程度。

本当は60FPS目指したいが、まぁそこまでのゲームを作ることはないだろう。
[PR]
by miries | 2013-10-21 02:26 | ゲームを作る


<< これがダブルバッファの威力か!(違う ドコモさんよー。 >>