AndroidでOpenGL(テクスチャアニメーション)

2Dゲームでは、キャラクターの動きは、実際の表示位置を動かす方法と、パラパラ漫画のように、複数の画像を切り替えることによって動いているように見せかける方法とを組み合わせて表現します。
(常識ですね)

今回、ゲームを作成するにあたってOpenGLを2D的に使うと決めたのはいいのですが、悩んだのはこのパラパラアニメーションでした。

AndroidでOpenGLというと、サンプルにはこんな感じで書いてあります。

// テクスチャ有効化
gl.glEnable(GL10.GL_TEXTURE_2D);
// テクスチャオブジェクトの指定
gl.glBindTexture(GL10.GL_TEXTURE_2D, texture);

// 頂点配列設定
gl.glVertexPointer(2, GL10.GL_FLOAT, 0, vertices);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

// テクスチャ座標配列設定
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, texCoords);
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

// 色配列設定
gl.glColorPointer(4, GL10.GL_FLOAT, 0, colors);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// 配列の描画
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

// テクスチャ座標配列の無効化
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// テクスチャの無効化
gl.glDisable(GL10.GL_TEXTURE_2D);

glVertexPointer、glTexCoordPointer、glColorPointerでは、あらかじめ作成しておいたFloatBufferを指定します。

ここで問題になるのが、テクスチャ座標を配列として用意しておく必要があるということです。

これだと、アニメーションパターンが少ない時などは、その分パターンに対応するテクスチャ座標を指定したFloatBufferを作成しておけばいいのですが、アニメーションパターンが多くなった時や、ちょっとづつずらして表示してスクロールをさせる場合など、とてもじゃないですけど全部のパターンを用意することはできません。

でも、調べてみたらあるものです。
テクスチャ座標も、一つの座標系なので、座標変換が効くのですね。
なので、

gl.glMatrixMode(GL10.GL_TEXTURE); ←ココと
gl.glTranslatef(0.0f, 0.25f, 1.0f); ←ココ

// テクスチャ有効化
gl.glEnable(GL10.GL_TEXTURE_2D);
// テクスチャオブジェクトの指定
gl.glBindTexture(GL10.GL_TEXTURE_2D, texture);

// 頂点配列設定
gl.glVertexPointer(2, GL10.GL_FLOAT, 0, vertices);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

// テクスチャ座標配列設定
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, texCoords);
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

// 色配列設定
gl.glColorPointer(4, GL10.GL_FLOAT, 0, colors);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// 配列の描画
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

// テクスチャ座標配列の無効化
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// テクスチャの無効化
gl.glDisable(GL10.GL_TEXTURE_2D);

というように、glMatrixModeにGL10.GL_TEXTUREを指定した後の、glTranslatef、glRotatef等の座標変換系の命令は、テクスチャ座標に掛かることになり、上の例では、Y座標に+0.25した位置からテクスチャを貼り付けます。
これを使って、アニメーションパターンが書いてあるテクスチャから対象のパターンだけを切り出せば、パラパラアニメーションができそうです。

ただ、glTexCoordPointerに指定するテクスチャ座標配列を、あらかじめテクスチャ1枚のサイズ÷テクスチャ全体サイズで作成しておく必要があるので、注意が必要です。
また、glMatrixModeにGL10.GL_TEXTUREを指定した後、GL_MODELVIEWに戻すのを忘れると、ポリゴンへの座標変換が有効にならないので、こちらも注意が必要です。

Leave a Reply

This blog is kept spam free by WP-SpamFree.