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

 

WebGL(texutre切り取りとMultipleTexture)

たぶん久々の更新。

webglの勉強を続けていますが、やっとちょっと使い方がわかってきた。

FlagmentShaderとVertexShaderの使い方がだいたいわかった。
webglはopengles2.0と似ていました。

やり方がわからなくて悩んでいるところは、
MultipleTextureのやり方と画像範囲の切り取りとどうやって描画するのが、一番効率がいいのかで悩んでいた。

MultipleTextureのやり方はたぶん解決して、テクスチャの切り取りのやり方もできたから、
後はどうやって描画するのが正しいやり方なのかをわからないといけない。
そういうことが乗っているサイトが見つからないので、どうやって描画するのが正しいやりかたなのかがわからない。

fpsも試してないので、DrawImgaeと比べて早くなっているかもわからない、
というか最初からwebglでやる必要がなかったんじゃないかとも思っています。
かれこれ1ヶ月くらい取り組んでも何もゲーム的なものを作ってないから、全然楽しくないのです。

これで、webglで早く描画できれば取り組んだ意味があるんですが、


後は、最近はセガの本と数学と物理も勉強しています。
プログラマーのスキルを少しでも磨いて、今後に役立てたいです。

セガと私

最近は、webglの勉強とゲームプログラマーになる前に覚えて起きたい技術(以下セガ)を読んだりしています。

セガはchapter12の回す、伸ばす、動かすのところをやっています。
そうです、画像の回転とかをやっています。
じっくり理解しながら、そしてソースを読んだり実行したりしながらやっているので、進むのにやたらと時間がかかりますが、面白いです。

まだ中間地点くらいで、これから難しくなりそうなので、理解できるかどうか不安。
せっかく買ったんだから、理解してものにしないと意味がない。といいつつもう買ってから2年も経っているのに半分もすすんでない。
これだけ内容があったら、この値段は納得でございます。

とりあえず、今年中にはこの本を一通り読み終えてスキルアップができればと思います。


WebGLは2dのテクスチャを張るさいに、どうやったらうまく画像を切り取って貼り付けることができるのかを模索しながら、チュートリアルなどで色々勉強中。
3Dに特化したサイトは色々ありますが、2dテクスチャの扱い方について詳しく乗っているサイトが見つからないので、四苦八苦しています。
2dテクスチャの扱い方についていいサイトがあったら教えください。


早くつくらないと今年ももう少しで終わってしまうと落ち込んだ。