Mtk's Blog: [Android] OpenGLでプロ生ちゃんをアニメーションさせる

How to make PRONAMA-CHAN run
前回はOpenGL APIを使って画像を表示アプリを作りました。
今回はOpenGLで画像をパラパラマンガのようにアニメーションさせます。

アニメーションを表示させるに当たり、プログラミング生放送で公開されている「プロ生ちゃん(暮井慧)」のドット絵画像を使います。
※「プロ生ちゃん」の利用ガイドラインはこちら

512×512ピクセルの画像にプロ生ちゃんのドット絵パターンを並べてみました。
一つのパターンは64×64ピクセルです。

※以下、「パターン」という言葉をプロ生ちゃん一人分の画像という意味で使用します。

全部で16パターンありますが今回は上の段の6パターンを使ってプロ生ちゃんが走っているように見えるアプリを作ります。

このブログを書いている時点の開発環境は次の通りです。
・Windows8 (64bit)
・Eclipse Juno (32bit) (XP互換モードで起動)
・Android SDK r21.0.1

画像ファイルは kurei_kei.png というファイ名で保存しプロジェクトの
res - drawable-mdpi
にコピーします。
resフォルダーの下に drawable-nodpi というフォルダーを作ってそこに画像ファイルをコピーしてさい。
drawable-nodpi 以外のフォルダーに保存した画像は端末の解像度に応じて自動でスケーリングされるようです。(2014年5月31日訂正)

※ ic_launcher.png はAndroid-SDKにデフォルトでインストールされるアイコン画像です。

gl.glTexCoordPointer でテクスチャの表示範囲(マッピング)を指定しします。
1つのパターンは画像8分の1のサイズなので幅と高さはそれぞれ 0.125 です。
マッピングは横方向は左から右に向かって、縦方向は上から下に向かってプラスになるので、左上のパターンを例にとると座標は下の様になります。

マッピング座標をハードコーディングしてもいいのですが、将来パターンが増えた場合に備えて計算で求めることにしました。
今回のソースでは、パターンごとのマッピング座標は配列の keiCoordsBuffs[] にバッファします。順番は次の通りです。

1から6までのパターンを0.1秒ごとに差し替えてアニメーションさせます。

アクティビティ(MainActivity.java)

package jp.fujiu.GLPronamachan;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLSurfaceView;
import android.opengl.GLU;
import android.opengl.GLUtils;
import android.opengl.GLSurfaceView.Renderer;
import android.os.Bundle;
import android.view.MotionEvent;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class MainActivity extends Activity {
 private MainSurface surface = null;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  surface = new MainSurface(this);
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }
 
 // タッチイベント処理
 private float touchedX = 0;
 private float touchedY = 0;

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
  case MotionEvent.ACTION_MOVE:
   float x = event.getX();
   float y = event.getY();
   surface.setCameraPotision((touchedX - x), (touchedY - y));

   touchedX = x;
   touchedY = y;
   break;
  case MotionEvent.ACTION_DOWN:
   touchedX = event.getX();
   touchedY = event.getY();
   break;
  }
  return true;
 }

 // OpenGLのViewクラス
 private class MainSurface extends GLSurfaceView implements Renderer {
  // カメラの位置
  private float cameraX = 0;
  private float cameraY = 0;

  // カメラの移動量
  private float cameraDist;

  // 頂点座標
  private float apexs[] = new float[] { -0.5f, -0.5f, 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, 0.5f, };
  // 頂点座標バッファ
  private FloatBuffer apexBuff;

  //テクスチャのパターン用
  private static final int PATTERN_X = 8;
  private static final int PATTERN_Y = 2;
  private int patternIndex = 1;
  private long changedTexureTime = 0;
  
  // 頂点テクスチャバッファ
  private FloatBuffer[] keiCoordsBuffs = new FloatBuffer[PATTERN_X * PATTERN_Y];
  
  private int[] textures = new int[1];
  private int textureId = 0;

  void setCameraPotision(float x, float y) {
   // 移動量が極端に大きい場合は無視
   if (Math.abs(x) > 100 || Math.abs(y) > 100) {
    return;
   }

   cameraX += x / cameraDist;
   cameraY += -y / cameraDist;

   // 画像が画面の外に出ない様にブレーキ
   if (cameraX > 1){
    cameraX = 1;
   }
   if (cameraX < -1){
    cameraX = -1;
   }
   if (cameraY > 1){
    cameraY = 1;
   }
   if (cameraY < -1){
    cameraY = -1;
   }
  }

  public MainSurface(Context context) {
   super(context);
  }

  @Override
  public void onSurfaceCreated(GL10 gl, EGLConfig config) {
   // 頂点バッファの生成
   apexBuff = makeFloatBuffer(apexs);
   
   // マッピング座標のバッファを作成
   final float COORD_DIST = 0.125f;
   float coords[] = new float[8];
   for (int i=0; i<PATTERN_Y; i++){
    for (int j=0; j<PATTERN_X; j++){
     coords[0] = j * COORD_DIST;
     coords[1] = (i+1) * COORD_DIST;
     coords[2] = (j+1) * COORD_DIST;
     coords[3] = coords[1];
     coords[4] = coords[0];
     coords[5]=  i * COORD_DIST;
     coords[6] = coords[2];
     coords[7] = coords[5];
     keiCoordsBuffs[i* PATTERN_X + j] = makeFloatBuffer(coords);
    }
   }
   
   // テクスチャ管理番号割り当て
   gl.glDeleteTextures(1, textures, 0);
   gl.glGenTextures(1, textures, 0);
   textureId = textures[0];

   // テクスチャ管理番号バインド
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);

   // 画像ファイルをロードし、テクスチャにバインド
   Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.kurei_kei);
   
   GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
   //ドット絵をテクスチャに表示するときはGL_LINEARよりGL_NEARESTのほうがにじまない
   gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
   gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_NEAREST);

   bitmap.recycle();
  }

  @Override
  public void onSurfaceChanged(GL10 gl, int width, int height) {
   cameraDist = (float) (width / 2);

   gl.glViewport(0, 0, width, height);
   gl.glMatrixMode(GL10.GL_PROJECTION);
   gl.glLoadIdentity();
   GLU.gluPerspective(gl, 45.0f, (float) width / (float) height, 0.1f, 100f);

   // 背面塗り潰し色の指定
   gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);// 黒
  }

  @Override
  public void onDrawFrame(GL10 gl) {
   // 画面クリア
   gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

   gl.glPushMatrix();

   // カメラ
   GLU.gluLookAt(gl, cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0);

   gl.glPushMatrix();

   // 頂点配列の指定
   gl.glVertexPointer(2, GL10.GL_FLOAT, 0, apexBuff);
   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

   // 0.1秒ごとに表示するテクスチャを切替える
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);
   long currentTime = System.currentTimeMillis();
   if (currentTime > changedTexureTime + 100){
    changedTexureTime = currentTime;
    // テクスチャ配列の変更
    gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, keiCoordsBuffs[patternIndex]);
    patternIndex++;
    if (patternIndex > 6){ patternIndex = 1;}
   }
   
   // テクスチャーの有効化
   gl.glEnable(GL10.GL_TEXTURE_2D);
   gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

   // テクスチャ描画
   gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
   
   // テクスチャーの無効化
   gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
   gl.glDisable(GL10.GL_TEXTURE_2D);
   gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

   gl.glPopMatrix();

   gl.glPopMatrix();
  }
 }

 // 頂点の配列をバッファーに変換するメソッド
 private static FloatBuffer makeFloatBuffer(float[] values) {
  ByteBuffer bb = ByteBuffer.allocateDirect(values.length * 4);
  bb.order(ByteOrder.nativeOrder());
  FloatBuffer fb = bb.asFloatBuffer();
  fb.put(values);
  fb.position(0);
  return fb;
 }
}

※特別な権限(Permission)は不要なのでマニフェストは省略します。
Target SDK Version が4以上の設定でビルドできます。
Android1.6以降で動作します。

実際に走っている姿は躍動感があります。
前回のソースを元にしているのでフリックで画像を移動できます。

ドットバイドット表示するために gl.glTexParameterf のパラメーターを指定しているのですが機種によって対応が異なるようです。

Mtk's Blog

2013年5月25日土曜日

[Android] OpenGLでプロ生ちゃんをアニメーションさせる

0 件のコメント:

コメントを投稿