Cubism SDK‎ > ‎プラットフォーム‎ > ‎Android‎ > ‎

プロジェクトの作成

Last update: 2014/06/04

ここでは、Android のプロジェクト作成から Live2D モデルを表示するまでの手順を説明します。

用意するもの
  • Eclipse (Android SDKのインストールが済んでいるもの。ここでは、Eclipse 4.3.2 Kepler SR2 for Windowsのバージョンを使用します
  • Live2D ライブラリ (ダウンロードしたLive2D SDK の「lib」フォルダにある「live2d_android.jar」。
    ここでは、1.0.02のバージョンを使用します)
  • Live2D のリソース
本来は、Live2Dのリソースは作成するモデルに応じてそれぞれ準備します。
ここではサンプルプロジェクトの「ハル」のリソースを使って説明をしていきます。

simple/assets/haru/
  • haru.moc
  • haru.1024/texture_00.png
  • haru.1024/texture_01.png
  • haru.1024/texture_02.png



◆プロジェクトの作成と下準備

新規プロジェクトを作成して、必要なファイルをインポートしていきます。

メニューバーの「ファイル」 > 「新規(N)」 > 「その他(O)...」をクリック。



表示されたウィンドウの「Android」 > 「Android アプリケーション・プロジェクト」を選択して「次へ(N) >」をクリック。



アプリケーション名、プロジェクト名、パッケージ名を設定し「次へ(N)」をクリック。
以降は任意で設定してください。



最後に、デフォルトで作成されるクラスの名前を設定して「完了(F)」をクリック。



Live2D SDKの、/sample/simple/ assets/haru を、Eclipse上のプロジェクトの assetsフォルダにドラッグアンドドロップします。



Live2D SDKの、/lib/live2d_android.jar を、Eclipse上のプロジェクトのlibsフォルダにドラッグアンドドロップします。



これでファイルのインポートは終了です。
次はインポートしたライブラリ(live2d_android.jar)のパスをプロジェクトに設定します。


Eclipse上のプロジェクトのルートフォルダで右クリックし、「プロパティー(R)」をクリックします。



開かれるウィンドウの、「Java のビルド・パス」 > 「ライブラリー(L)」 > 「jar 追加(J)」をクリックします。



プロジェクト内のlibsフォルダ内にある「live2d_android.jar」を選択して「OK」をクリックします。



以下の画像のようになっていれば完了です。




OpenGLの設定

次はLive2Dのモデルを表示させるための、OpenGLの設定を行います。

プロジェクト作成時に生成されていたクラスか、その一つ上のディレクトリを右クリックして、「新規(N)」 > 「クラス」をクリック。
クラス名を設定して「完了(F)」をクリック。
ここでは、クラス名を「SampleGLSurfaceView」とします。



SampleGLSurfaceViewクラスにGLSurfaceViewクラスを継承させ、必要な関数を追加します。

  1. public class SampleGLSurfaceView extends GLSurfaceView
  2. {
  3.        
  4. }



  1. public class SampleGLSurfaceView extends GLSurfaceView
  2. {
  3.     public SampleGLSurfaceView(Context context)
  4.     {
  5.         super(context);
  6.                
  7.     }
  8. }



SampleGLSurfaceViewクラス内に、描画用のレンダラーを内部クラスとして作成し、不足している関数を追加します。

  1. public class SampleGLSurfaceView extends GLSurfaceView
  2. {
  3.     public SampleGLSurfaceView(Context context)
  4.     {
  5.         super(context);
  6.         
  7.     }
  8.        
  9.        
  10.     class SampleGLRenderer implements Renderer
  11.     {
  12.         
  13.     }
  14. }



  1. public class SampleGLSurfaceView extends GLSurfaceView
  2. {
  3.     public SampleGLSurfaceView(Context context)
  4.     {
  5.         super(context);
  6.         
  7.     }
  8.        
  9.        
  10.     class SampleGLRenderer implements Renderer
  11.     {
  12.         @Override
  13.         public void onDrawFrame(GL10 arg0) {
  14.             // TODO 自動生成されたメソッド・スタブ
  15.             
  16.         }

  17.         @Override
  18.         public void onSurfaceChanged(GL10 arg0, int arg1, int arg2) {
  19.             // TODO 自動生成されたメソッド・スタブ
  20.             
  21.         }

  22.         @Override
  23.         public void onSurfaceCreated(GL10 arg0, EGLConfig arg1) {
  24.             // TODO 自動生成されたメソッド・スタブ
  25.             
  26.         }
  27.     }
  28. }



SampleGLSurfaceViewクラスのコンストラクタでの初期化を記述します。

  1.     private SampleGLRenderer renderer ;
  2.  
  3.     public SampleGLSurfaceView(Context context)
  4.     {
  5.         super(context);
  6.  
  7.         renderer = new SampleGLRenderer() ;
  8.         setRenderer(renderer) ;
  9.     }








SampleGLRendererクラスのonSerfaceCreated()でモデルの初期化を、onSurfaceChanged()でビューの初期化を行います。

  1.     class SampleGLRenderer implements Renderer
  2.     {
  3.         private Live2DModelAndroid      live2DModel ;
  4.         private final String MODEL_PATH = "haru/haru.moc" ;
  5.         private final String TEXTURE_PATHS[] =
  6.             {
  7.                 "haru/haru.512/texture_00.png" ,
  8.                 "haru/haru.512/texture_01.png" ,
  9.                 "haru/haru.512/texture_02.png"
  10.             } ;
  11.  
  12.         @Override
  13.         public void onDrawFrame(GL10 gl)
  14.         {
  15.             // TODO 自動生成されたメソッド・スタブ
  16.         }
  17.  
  18.  
  19.         @Override
  20.         public void onSurfaceChanged(GL10 gl, int width, int height)
  21.         {
  22.             gl.glViewport(0 , 0 , width , height) ;
  23.  
  24.             gl.glMatrixMode(GL10.GL_PROJECTION) ;
  25.             gl.glLoadIdentity() ;
  26.  
  27.             float modelWidth = live2DModel.getCanvasWidth();
  28.             float visibleWidth = modelWidth * (3.0f/4.0f);
  29.             float margin = 0.5f * (modelWidth/4.0f) ;
  30.  
  31.             gl.glOrthof(margin, margin+visibleWidth, visibleWidth*height/width, 0, 0.5f, -0.5f);
  32.         }
  33.  
  34.  
  35.         @Override
  36.         public void onSurfaceCreated(GL10 gl, EGLConfig config)
  37.         {
  38.             try
  39.             {
  40.                 InputStream in = getContext().getAssets().open(MODEL_PATH) ;
  41.                 live2DModel = Live2DModelAndroid.loadModel(in) ;
  42.                 in.close() ;
  43.  
  44.                 for (int i = 0 ; i < TEXTURE_PATHS.length ; i++)
  45.                 {
  46.                     InputStream tin = getContext().getAssets().open(TEXTURE_PATHS[i]) ;
  47.                     int texNo = UtOpenGL.loadTexture(gl , tin , true) ;
  48.                     live2DModel.setTexture(i , texNo) ;
  49.                 }
  50.             }
  51.             catch (IOException e)
  52.             {
  53.                 e.printStackTrace();
  54.             }
  55.         }
  56.     }




最後に、onDrawFrame()でモデルの描画を行います。

  1.     class SampleGLRenderer implements Renderer
  2.     {
  3.         private Live2DModelAndroid      live2DModel ;
  4.         private final String MODEL_PATH = "haru/haru.moc" ;
  5.         private final String TEXTURE_PATHS[] =
  6.             {
  7.                 "haru/haru.512/texture_00.png" ,
  8.                 "haru/haru.512/texture_01.png" ,
  9.                 "haru/haru.512/texture_02.png"
  10.             } ;
  11.  
  12.         @Override
  13.         public void onDrawFrame(GL10 gl)
  14.         {
  15.             gl.glMatrixMode(GL10.GL_MODELVIEW) ;
  16.             gl.glLoadIdentity() ;
  17.             gl.glClear(GL10.GL_COLOR_BUFFER_BIT) ;
  18.             gl.glEnable(GL10.GL_BLEND) ;
  19.             gl.glBlendFunc(GL10.GL_ONE , GL10.GL_ONE_MINUS_SRC_ALPHA) ;
  20.             gl.glDisable(GL10.GL_DEPTH_TEST) ;
  21.             gl.glDisable(GL10.GL_CULL_FACE) ;
  22.  
  23.             live2DModel.setGL(gl) ;
  24.  
  25.             live2DModel.update() ;
  26.             live2DModel.draw() ;
  27.         }
  28.  
  29.  
  30.         @Override
  31.         public void onSurfaceChanged(GL10 gl, int width, int height)
  32.         {
  33.             gl.glViewport(0 , 0 , width , height) ;
  34.  
  35.             gl.glMatrixMode(GL10.GL_PROJECTION) ;
  36.             gl.glLoadIdentity() ;
  37.  
  38.             float modelWidth = live2DModel.getCanvasWidth();
  39.             float visibleWidth = modelWidth * (3.0f/4.0f);
  40.             float margin = 0.5f * (modelWidth/4.0f) ;
  41.  
  42.             gl.glOrthof(margin, margin+visibleWidth, visibleWidth*height/width, 0, 0.5f, -0.5f);
  43.         }
  44.  
  45.  
  46.         @Override
  47.         public void onSurfaceCreated(GL10 gl, EGLConfig config)
  48.         {
  49.             try
  50.             {
  51.                 InputStream in = getContext().getAssets().open(MODEL_PATH) ;
  52.                 live2DModel = Live2DModelAndroid.loadModel(in) ;
  53.                 in.close() ;
  54.  
  55.                 for (int i = 0 ; i < TEXTURE_PATHS.length ; i++)
  56.                 {
  57.                     InputStream tin = getContext().getAssets().open(TEXTURE_PATHS[i]) ;
  58.                     int texNo = UtOpenGL.loadTexture(gl , tin , true) ;
  59.                     live2DModel.setTexture(i , texNo) ;
  60.                 }
  61.             }
  62.             catch (IOException e)
  63.             {
  64.                 e.printStackTrace();
  65.             }
  66.         }
  67.     }





ビューの呼び出し

デフォルトで作成されたMainActivityクラスのonCreate()から、上で設定したビューを呼び出し、画面として設定します。

  1. package jp.live2d.sample;
  2.  
  3. import jp.live2d.Live2D;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6.  
  7. public class MainActivity extends Activity {
  8.  
  9.         @Override
  10.         protected void onCreate(Bundle savedInstanceState) {
  11.                 super.onCreate(savedInstanceState);
  12.  
  13.         Live2D.init();
  14.         SampleGLSurfaceView view = new SampleGLSurfaceView(this) ;
  15.         setContentView( view ) ;
  16.         }
  17. }



完成



最終的なコードは以下になります。


MainActivity.java
  1. package jp.live2d.sample;
  2.  
  3. import jp.live2d.Live2D;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.view.Menu;
  7.  
  8. public class MainActivity extends Activity {
  9.  
  10.         @Override
  11.         protected void onCreate(Bundle savedInstanceState) {
  12.                 super.onCreate(savedInstanceState);
  13.  
  14.         Live2D.init();
  15.         SampleGLSurfaceView view = new SampleGLSurfaceView(this) ;
  16.         setContentView( view ) ;
  17.         }
  18.  
  19.         @Override
  20.         public boolean onCreateOptionsMenu(Menu menu) {
  21.                 // Inflate the menu; this adds items to the action bar if it is present.
  22.                 getMenuInflater().inflate(R.menu.main, menu);
  23.                 return true;
  24.         }
  25.  
  26. }


SampleGLSurfaceView.java
  1. package jp.live2d.sample;
  2.  
  3. import java.io.IOException;
  4. import java.io.InputStream;
  5.  
  6. import javax.microedition.khronos.egl.EGLConfig;
  7. import javax.microedition.khronos.opengles.GL10;
  8.  
  9. import jp.live2d.android.Live2DModelAndroid;
  10. import jp.live2d.android.UtOpenGL;
  11. import android.content.Context;
  12. import android.opengl.GLSurfaceView;
  13.  
  14. public class SampleGLSurfaceView extends GLSurfaceView
  15. {
  16.         private SampleGLRenderer                renderer ;
  17.  
  18.         public SampleGLSurfaceView(Context context)
  19.         {
  20.                 super(context);
  21.  
  22.                 renderer = new SampleGLRenderer() ;
  23.                 setRenderer( renderer ) ;
  24.         }
  25.  
  26.  
  27.         class SampleGLRenderer implements Renderer
  28.         {
  29.                 private Live2DModelAndroid      live2DModel ;
  30.                 private final String MODEL_PATH = "haru/haru.moc" ;
  31.                 private final String TEXTURE_PATHS[] =
  32.                         {
  33.                                 "haru/haru.512/texture_00.png" ,
  34.                                 "haru/haru.512/texture_01.png" ,
  35.                                 "haru/haru.512/texture_02.png"
  36.                         } ;
  37.  
  38.                 @Override
  39.                 public void onDrawFrame(GL10 gl)
  40.                 {
  41.                         gl.glMatrixMode(GL10.GL_MODELVIEW ) ;
  42.                         gl.glLoadIdentity() ;
  43.                         gl.glClear( GL10.GL_COLOR_BUFFER_BIT ) ;
  44.                         gl.glEnable( GL10.GL_BLEND ) ;
  45.                         gl.glBlendFunc( GL10.GL_ONE , GL10.GL_ONE_MINUS_SRC_ALPHA ) ;
  46.                         gl.glDisable( GL10.GL_DEPTH_TEST ) ;
  47.                         gl.glDisable( GL10.GL_CULL_FACE ) ;
  48.  
  49.                         live2DModel.setGL( gl ) ;
  50.  
  51.                         live2DModel.update() ;
  52.                         live2DModel.draw() ;
  53.                 }
  54.  
  55.  
  56.                 @Override
  57.                 public void onSurfaceChanged(GL10 gl, int width, int height)
  58.                 {
  59.                         gl.glViewport( 0 , 0 , width , height ) ;
  60.  
  61.                         gl.glMatrixMode( GL10.GL_PROJECTION ) ;
  62.                         gl.glLoadIdentity() ;
  63.  
  64.                         float modelWidth = live2DModel.getCanvasWidth();
  65.                         float visibleWidth = modelWidth * (3.0f/4.0f);
  66.                         float margin = 0.5f * ( modelWidth/4.0f ) ;
  67.  
  68.                         gl.glOrthof(margin, margin+visibleWidth, visibleWidth*height/width, 0, 0.5f, -0.5f);
  69.                 }
  70.  
  71.  
  72.                 @Override
  73.                 public void onSurfaceCreated(GL10 gl, EGLConfig config)
  74.                 {
  75.                         try
  76.                         {
  77.                                 InputStream in = getContext().getAssets().open( MODEL_PATH ) ;
  78.                                 live2DModel = Live2DModelAndroid.loadModel( in ) ;
  79.                                 in.close() ;
  80.  
  81.                                 for (int i = 0 ; i < TEXTURE_PATHS.length ; i++ )
  82.                                 {
  83.                                         InputStream tin = getContext().getAssets().open( TEXTURE_PATHS[i] ) ;
  84.                                         int texNo = UtOpenGL.loadTexture(gl , tin , true ) ;
  85.                                         live2DModel.setTexture( i , texNo ) ;
  86.                                 }
  87.                         }
  88.                         catch (IOException e)
  89.                         {
  90.                                 e.printStackTrace();
  91.                         }
  92.                 }
  93.         }
  94. }





Comments