Mtk's Blog: [Android] アナログ時計のアプリを作ってみました

Analog clock on OpenGL
先日、時計が壊れてしまいました。デジタル時計は身近なところにありますが、アナログ時計は意外と少ないのでアプリを作ってみました。
画像の回転して表示する処理が必要なのでOpenGLを利用します。

今回の開発環境は次の通りです。
・64bit版 Windows8
・32bit版 Eclipse3.7 (Windows XPモードで使用)
・Android-SDK r22.3

針の画像です。

左から秒針、分針、時針のつもりです。
針の画像それぞれのピクセル数は32×128です。OpenGLで扱う画像なので128×128ピクセルにしたかったので一番右の黒い塗りつぶしの領域は使用しません。

Eclipseのパッケージ・エクスプローラーで、プロジェクトの res フォルダーの下に
drawable-nodpi
というフォルダーを作り針の画像を配置します。

以下ソースです。

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

package jp.fujiu.analogclockGl;

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

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.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(getApplicationContext());
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }

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

  // 針ポリゴンの頂点座標
  private float needle[] = new float[] { -0.125f, -0.5f, 0.125f, -0.5f, -0.125f, 0.5f, 0.125f, 0.5f, };
  // 頂点座標バッファ
  private FloatBuffer secBuff;
  private FloatBuffer minBuff;
  private FloatBuffer hourBuff;

  //秒針画像の頂点
  private float[] secNeedleCoords = new float[]{
   0, 1,
   0.25f, 1,
   0, 0,
   0.25f, 0
  };
  
  //分針画像の頂点
  private float[] minNeedleCoords = new float[]{
   0.25f, 1,
   0.5f, 1,
   0.25f, 0,
   0.5f, 0
  };
  
  //時針画像の頂点
  private float[] hourNeedleCoords = new float[]{
   0.5f, 1,
   0.75f, 1,
   0.5f, 0,
   0.75f, 0
  };
  
  // 各針の頂点テクスチャバッファ
  private FloatBuffer secCoordsBuffs;
  private FloatBuffer minCoordsBuffs;
  private FloatBuffer hourCoordsBuffs;
  
  private int[] textures = new int[1];
  private int textureId = 0;
  
  //時間
  int sec;
  int min;
  int hour;
  int preSec = -1;
  
  //針の角度
  float secDegree;
  float minDegree;
  float hourDegree;


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

  @Override
  public void onSurfaceCreated(GL10 gl, EGLConfig config) {
   // 頂点バッファの生成
   secBuff = makeFloatBuffer(needle);
   minBuff = makeFloatBuffer(needle);
   hourBuff = makeFloatBuffer(needle);

   secCoordsBuffs = makeFloatBuffer(secNeedleCoords);
   minCoordsBuffs = makeFloatBuffer(minNeedleCoords);
   hourCoordsBuffs = makeFloatBuffer(hourNeedleCoords);

   // テクスチャ管理番号割り当て
   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.clock_needles);

   GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
   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();
   
//   //ドットバイドット表示
//   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);
  }

  @Override
  public void onSurfaceChanged(GL10 gl, int width, int height) {
   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);
   int size = width>height ? height : width;
   gl.glViewport((width-size)/2, (height-size)/2, size, size);
   
   // 背面塗り潰し色の指定・黒
   gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
  }

  @Override
  public void onDrawFrame(GL10 gl) {
   //現在時刻から各針の角度を算出
   Calendar now = Calendar.getInstance();
   sec = now.get(Calendar.SECOND);
   if (sec != preSec){
    preSec = sec;
    secDegree = (float) sec * 6;
    min = now.get(Calendar.MINUTE);
    minDegree = (float) min * 6 + secDegree/60;
    hour = now.get(Calendar.HOUR);
    hourDegree = (float) hour * 30 + minDegree/12;
   }
   
   // 画面クリア
   gl.glClear(GL10.GL_COLOR_BUFFER_BIT|GL10.GL_DEPTH_BUFFER_BIT);

   gl.glPushMatrix();

   // カメラ
   GLU.gluLookAt(gl, cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0);
   
   // テクスチャーの有効化
   gl.glEnable(GL10.GL_TEXTURE_2D);
   gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);

   //アルファブレンドの有効化
   gl.glEnable(GL10.GL_BLEND);
   gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
         
   gl.glMatrixMode(GL10.GL_PROJECTION);
         
   //秒針の表示
   gl.glPushMatrix();
         gl.glLoadIdentity();

   // 頂点配列の指定
   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
   gl.glVertexPointer(2, GL10.GL_FLOAT, 0, secBuff);
   
   gl.glRotatef(secDegree, 0, 0, -1);
   
   gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, secCoordsBuffs);
   
   // テクスチャ描画
   gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

   gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
   
   gl.glPopMatrix();
   
   
   //分針の表示
   gl.glPushMatrix();
         gl.glLoadIdentity();
         
   // 頂点配列の指定
   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
   gl.glVertexPointer(2, GL10.GL_FLOAT, 0, minBuff);
   gl.glRotatef(minDegree, 0, 0, -1);
   
   gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, minCoordsBuffs);
   
   // テクスチャ描画
   gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

   gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

   gl.glPopMatrix();
   
   
   //時針の表示
   gl.glPushMatrix();
         gl.glLoadIdentity();
         
   // 頂点配列の指定
   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
   gl.glVertexPointer(2, GL10.GL_FLOAT, 0, hourBuff);
   gl.glRotatef(hourDegree, 0, 0, -1);
   
   gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, hourCoordsBuffs);
   
   // テクスチャ描画
   gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

   gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
   
   gl.glPopMatrix();

   //アルファブレンドの無効化
   gl.glDisable(GL10.GL_BLEND);
   
   // テクスチャーの無効化
   gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
   gl.glDisable(GL10.GL_TEXTURE_2D);
   
   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以降で動作します。
SH-03C(実機)、Android-SDK付属のエミュレーター、Blue Stacksで動作することを確認しています。

動作保証はできませんがとりあえず動作するようです。
SH-03Cで実行してみた画像です。

針の角度は1秒ごとに変化するようにしました。

これだけだと現在時刻が分かりにくいですね。
針の画像をかっこよくしたり文字盤の画像を追加すると実用性が上がるかもしれません。

関連ブログ
[Android] ストップウォッチアプリの表示をC言語でスムーズに改造する
[Android] ストップウォッチアプリを作ってみました
[Android] 方位センサーを使ってコンパスアプリを作る
[Android] OpenGLでプロ生ちゃんをアニメーションさせる
[Windows8][Android] Can't bind to local 8600 for debugger
[Android] 端末の傾きに立方体を連動させる
[Android] フリーサイズの画像をOpenGLのテクスチャに表示する
[Android] Android-NDKでテクスチャを表示するには
[Android] OpenGLで頂点の多いポリゴンを扱うには

以上、参考になれば幸いです。

Mtk's Blog

2013年12月28日土曜日

[Android] アナログ時計のアプリを作ってみました

0 件のコメント:

コメントを投稿