前回はOpenGL APIを使って画像を表示アプリを作りました 。
今回はOpenGLで画像をパラパラマンガのようにアニメーションさせます。
アニメーションを表示させるに当たり、プログラミング生放送で公開されている「プロ生ちゃん(暮井 慧)」のドット絵画像を使います。
※「プロ生ちゃん」の利用ガイドラインはこちら
512×512ピクセルの画像にプロ生ちゃんのドット絵パターンを並べてみました。
一つのパターンは64×64ピクセルです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvuOxFMaGzufUqVVlQugj4vbRF4RuacmcMzYslBALhIFgHWS27SYhnFHlQ-VzXjK1KIeWHRU-RhibvSifiu0XV-1P8kSsPT9RkjXKIDxxGtmiZuV80oVp0LDxzz0XDeW0_INylFkMbvBM/s320/kurei_keis_64x64.png)
※以下、「パターン」という言葉をプロ生ちゃん一人分の画像という意味で使用します。
全部で16パターンありますが今回は上の段の6パターンを使ってプロ生ちゃんが走っているように見えるアプリを作ります。
このブログを書いている時点の開発環境は次の通りです。
・Windows8 (64bit)
・Eclipse Juno (32bit) (XP互換モードで起動)
・Android SDK r21.0.1
res - drawable-mdpi
にコピーします。
drawable-nodpi 以外のフォルダーに保存した画像は端末の解像度に応じて自動でスケーリングされるようです。(2014年5月31日訂正)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KMteu6X4B1nuMxuM3763A03tn_DxO82i-2PjtuxA5LidX-txVGGLcp1ia3O9sPNMabe2T_XGT9-yZSb_C0O3dNyFIP7HnGJ-ABh5BD5SjSq5mzIO0JooVGekgr5QerEoG2f5cP-MJRQ/s320/kureikei_drawable.png)
※ ic_launcher.png はAndroid-SDKにデフォルトでインストールされるアイコン画像です。
gl.glTexCoordPointer でテクスチャの表示範囲(マッピング)を指定しします。
1つのパターンは画像8分の1のサイズなので幅と高さはそれぞれ 0.125 です。
マッピングは横方向は左から右に向かって、縦方向は上から下に向かってプラスになるので、左上のパターンを例にとると座標は下の様になります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDh4P-y2c9iAMerYhq8LDKOBfjWEvbiNCfJxi1_kdFCZoVFYSVKFe6Wea2abfJ76aJl1Aph5N1vjUfhyphenhyphenUa84MDQpKKaCNIkmJRgBxC-Ri977melv_yxZBDwOdmyXKfpn3Y9E65y_6XaD0/s320/kurei_kei_mapping.png)
マッピング座標をハードコーディングしてもいいのですが、将来パターンが増えた場合に備えて計算で求めることにしました。
今回のソースでは、パターンごとのマッピング座標は配列の keiCoordsBuffs[] にバッファします。順番は次の通りです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaM1FcQLUhaEHDex4zZZIwiDAuGddiA0d7XqdANAzaNz0XKxseGkcmEEetiXpL6G9strSIVyPEtL1Pgapsf658tCWNOh3pA1D8ptadk3vl1MQZakATtbMa5s2f5zCs3hqd4-8s62kCELs/s320/index.png)
1から6までのパターンを0.1秒ごとに差し替えてアニメーションさせます。
アクティビティ(MainActivity.java)
※特別な権限(Permission)は不要なのでマニフェストは省略します。
Target SDK Version が4以上の設定でビルドできます。
Android1.6以降で動作します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3SGovs30HNcl8c8ImsHzgy99a0X1dO9p59iJKa0ZTOduS36UfZr_CKg9MYa2fhi7B-uLve6IS1FUYQv58hKMCY9LrR8EIJ8N69UFFGym_pLaeY-FSJYY17AcBp0GaMKCCD36aJQXk-s/s320/running_pronama.png)
実際に走っている姿は躍動感があります。
前回のソースを元にしているのでフリックで画像を移動できます。
ドットバイドット表示するために gl.glTexParameterf のパラメーターを指定しているのですが機種によって対応が異なるようです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcA_UlZY3d85DOzYds_ssAymQ2DICIwNaF8llqIDkN7GGvcnZEEmGzg9Oc2THkCbjuLahy7DblGV8zSKdtZoLV2e9RWBNHykFpKyxRSb0WoKiNqYeXMc2eRwNwMS1Ke-xIh-vtE2JB7GM/s320/hikaku.png)
関連ブログ
[Android] OpenGLで簡易画像ビュアーを作る
[Android] OpenGL ESで文字を表示する
[Android] OpenGLで頂点の多いポリゴンを扱うには
[Android] OpenGLでシャープ製端末用3D(立体視)アプリケーションを作る
[Blender] obj2opengl.plをJava用に改造する
[Windows8][Android] Can't bind to local 8600 for debugger
以上、参考になれば幸いです。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。