【Android】アンドロイドでOpenGLを使ってみる（2Dテクスチャ描画編）

前回（【Android】アンドロイドでOpenGLを使ってみる（準備編））からの続きでOpenGLを使ってみます。
OpenGLといったら3Dというイメージがありますが、
今回は2D機能だけを使い奥行きのないペラペラしたオブジェクトにテクスチャを貼ってみる方法を紹介してみます。

AndroidでOpenGLを使う良い解説本はないものかと本屋をウロウロしていると。

OpenGL ESを使ったAndroid 2D/3Dゲームプログラミング
見つけました。さっそく買って読んでみたんですが、とっても解りやすいです（＾ω＾）

今回は2D機能だけですが、上記の本では3Dを使った描画処理も紹介しています。
（とっても使いやすいHyperMotion3Dは筆者の大西武さんのサイトからDLできます）

この本の内容を参考にしながら2Dテクスチャを使った描画処理を紹介してみます。

2次元スプライト用のクラスを作成する

私はまったくグラフィック関連の知識がないのでテクスチャと聞いてピンと来なかったのですが、
オブジェクト表面に貼り付けられるシールのようなものと考えればよいそうです。

テクスチャに貼り付ける画像はpngを用意します。

みんな大好き比那名居天子さんです。
画像のサイズは２の累乗にしないといけないらしいので、512x256にしてあります。

HyperMotion3DのクラスSprite2Dを参考にしながら、
上記のpng画像の読込と描画を行うSampleSpriteクラスを作成します。

・SampleSprite.java

01import java.io.IOException;
02import java.io.InputStream;
03import javax.microedition.khronos.opengles.GL10;
04import javax.microedition.khronos.opengles.GL11;
05import javax.microedition.khronos.opengles.GL11Ext;
06 
07import android.content.res.Resources;
08import android.graphics.Bitmap;
09import android.graphics.BitmapFactory;
10import android.opengl.GLUtils;
11 
12public class SampleSprite {
13    //テクスチャNo
14    public int textureNo;
15    //表示位置
16    float  pos_x;
17    float  pos_y;
18    float  pos_z;
19    //テクスチャ（画像）の位置とサイズ
20    int    texX;
21    int    texY;
22    int    texWidth;
23    int    texHeight;
24    //配置する時の幅と高さ
25    float  width;
26    float  height;
27 
28    public void setTexture( GL10 gl, Resources res, int id ){
29        InputStream is = res.openRawResource(id);
30        Bitmap bitmap;
31        try{
32            bitmap = BitmapFactory.decodeStream(is);
33        }
34        finally{
35            try{
36                is.close();
37            }
38            catch(IOException e){   }
39        }
40        gl.glEnable(GL10.GL_ALPHA_TEST);
41        gl.glEnable(GL10.GL_BLEND);
42        gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
43        gl.glTexEnvf(GL10.GL_TEXTURE_ENV, GL10.GL_TEXTURE_ENV_MODE, GL10.GL_MODULATE);
44        //テクスチャIDを割り当てる
45        int[] textureID = new int[1];
46        gl.glGenTextures(1, textureID, 0);
47        textureNo = textureID[0];
48 
49        //テクスチャIDのバインド
50        gl.glBindTexture(GL10.GL_TEXTURE_2D, textureNo);
51        //OpenGL ES用のメモリ領域に画像データを渡す。上でバインドされたテクスチャIDと結び付けられる。
52        GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
53        //テクスチャ座標が1.0fを超えたときの、テクスチャを繰り返す設定
54        gl.glTexParameterx(GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT );
55        gl.glTexParameterx(GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT );
56        //テクスチャを元のサイズから拡大、縮小して使用したときの色の使い方を設定
57        gl.glTexParameterx(GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR );
58        gl.glTexParameterx(GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR );
59 
60        texX      = 0;
61        texY      = bitmap.getHeight();
62        texWidth  = bitmap.getWidth();
63        texHeight = -bitmap.getHeight();
64        pos_x     = 0;
65        pos_y     = 0;
66        pos_z     = 0;
67        width     = bitmap.getWidth();
68        height    = bitmap.getHeight();
69    }
70 
71    public void draw( GL10 gl){
72        gl.glDisable(GL10.GL_DEPTH_TEST);
73        //背景色を白色で塗りつぶし
74        gl.glColor4x(0x10000, 0x10000, 0x10000, 0x10000);
75        //テクスチャ0番をアクティブにする
76        gl.glActiveTexture(GL10.GL_TEXTURE0);
77        //テクスチャIDに対応するテクスチャをバインドする
78        gl.glBindTexture(GL10.GL_TEXTURE_2D, textureNo);
79        //テクスチャの座標と幅と高さを指定
80        int rect[] = { texX,  texY,  texWidth, texHeight};
81        //テクスチャ画像のどの部分を使うかを指定
82        ((GL11) gl).glTexParameteriv(GL10.GL_TEXTURE_2D,GL11Ext.GL_TEXTURE_CROP_RECT_OES, rect, 0);
83        //描画
84        ((GL11Ext) gl).glDrawTexfOES( pos_x, pos_y, pos_z, width, height);
85 
86        gl.glEnable(GL10.GL_DEPTH_TEST);
87    }
88}

なかなか長くなってしまいました（´ω｀）
アルファとかブレンドなどグラフィック関連の言葉がわからず逐一調べてなんとなく理解…。

・setTexture関数
　リソースIDからBitmapのインスタンスを取得。
　その後はしばらくOpenGLの初期設定（内容は書いてある通りだと思います）
　60～68行目あたりで画像の座標、幅と高さをセットしています。

・draw関数
　描画処理です。
　setTexture関数でセットした通りの内容を描画してくれるはずです。

実際にGLSurfaceViewの中で2Dテクスチャを描画してみる

前回の記事で作成したからっぽのRendererクラスに処理を追加します。

・SampleRenderer.java

01import javax.microedition.khronos.egl.EGLConfig;
02import javax.microedition.khronos.opengles.GL10;
03import android.content.Context;
04import android.opengl.GLSurfaceView.Renderer;
05import android.opengl.GLU;
06 
07public class SampleRenderer implements Renderer{
08 
09    private Context context;
10 
11    //2次元スプライト
12    SampleSprite tenshi_img = new SampleSprite();
13 
14    public SampleRenderer(Context _context){
15        context = _context;
16    }
17 
18    @Override
19    public void onDrawFrame(GL10 gl) {
20        // 描画用バッファをクリア
21        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
22        tenshi_img.draw(gl);
23    }
24 
25    @Override
26    public void onSurfaceChanged(GL10 gl, int width, int height) {
27        gl.glViewport(0, 0, width, height);
28        gl.glMatrixMode(GL10.GL_PROJECTION);//プロジェクションモードに設定
29        GLU.gluOrtho2D(gl, 0.0f, width, 0.0f, height);//平行投影用のパラメータをセット
30    }
31 
32    @Override
33    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
34        //背景色をクリア
35        gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
36        //ディザを無効化
37        gl.glDisable(GL10.GL_DITHER);
38        //深度テストを有効化
39        gl.glEnable(GL10.GL_DEPTH_TEST);
40        //テクスチャ機能ON
41        gl.glEnable(GL10.GL_TEXTURE_2D);
42        //透明可能に
43        gl.glEnable(GL10.GL_ALPHA_TEST);
44        //ブレンド可能に
45        gl.glEnable(GL10.GL_BLEND);
46        gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
47 
48        tenshi_img.setTexture(gl,context.getResources(),R.drawable.sample_img);
49 
50    }
51}

・34～46
　OpenGLの設定です。
・48
　リソースIDを渡してテクスチャをセットしています。
・20～22
　画面をクリアして、テキスチャを描画。

【実行結果】
OpenGLで2Dテクスチャを描画してみる実行結果01

SampleSpriteクラスのsetTexture関数を変更すると、
画像の位置を変えたり画像を引き伸ばして表示できます。

1    pos_x     = 50; //右に移動
2    pos_y     = 200;   //上に移動
3    pos_z     = 0;
4    width     = bitmap.getWidth()*2; //縦に二倍引き伸ばし
5    height    = bitmap.getHeight();
6}

【実行結果】

ぐんにょり。

桜花満開/テンシホタル

iPhoneアプリ、Androidアプリ、プログラム、同人活動など色々やってます

【Android】アンドロイドでOpenGLを使ってみる（2Dテクスチャ描画編）

2次元スプライト用のクラスを作成する

実際にGLSurfaceViewの中で2Dテクスチャを描画してみる

関連記事

“【Android】アンドロイドでOpenGLを使ってみる（2Dテクスチャ描画編）” への2件のコメント