WebGL2DGame(part1)

せっかくwebglで2Dゲームを作りたいと色々調べてきたので、その過程を記録したいと思います。



１、わからないなりにも、とりあえず描画してみた。


3dのテクニックとかは色々乗っていますが、テクスチャを切り替えるとか、複数だすとか、
具体的にどうやってプログラムを書くのが効率がいいのかが、自分の探した範囲だと
あまりのっていないので、細かい部品を集めながら試していきました。


やっとテクスチャの切り出し方とか、テクスチャの切り替え方法が自分なりにできるようになったので、fpsがどれくらい出るのかをテストしてみたくなりテストしました。


まずは、fpsを表示するためにJavaScriptで時間をとる方法を調べる、これはすぐ終わってコンソール上に出せるようになる。


とりあえず画面に1000個のテクスチャを出しみることにしました。


 

for()でテクスチャのx座標をづらして、1000個描画しています。
テクスチャのサイズは32*32です。
fpsも60でているし、こりゃすげーぞ！なんでも作れるじゃんと興奮して、色々試していると、

あれ、おかしいぞ


gl.drawArrarys(gl.TRIANGLE_STRIP,0,テクスチャ最大数);


で描画していたので、ただつながって描画していただけなのでした。
ほんとアホだわ。
それじゃどうすればいいのかと考えた結果、分ければいいのか(当たり前)と気づいて
forでテクスチャの数だけ描画する方法に切り替えました。


具体的には、

    for(var i = 0; i < num; ++i) {
        gl.drawArrays(gl.TRIANGLE_STRIP, 4 * i, 4);
    }


で、4個ずつオフセットをずらしているので、つながりません。



すると、

重いので、テクスチャの数を200個にして描画しました。
fpsは50くらい、こりゃちょっと使えねーわ。どうしようもしかして時間の無駄だったのかと、
非常にあせるそして落ち込む、しかし考えると、

begininngAndroidGamesという初めてopenglを知った本で、同じように描画して高速描画できていたことに気づいて、そっちのやり方を見てみることにしました。



to be continue