Creating a project using a sample


This is an explanation of the process from how to create a project of Android to how to display the Live2D model.

◆Things to prepare
  • Eclipse (installed the Android SDK)
  • Live2D library ("live2d_android.jar" in the "lib" folder of downloaded Live2D SDK) 
  • Live2D resources
You need to prepare each of the Live2D resource according to the model. 
In this explanation, we use the resources of the sample project "Haru". 

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



◆Create and prepare a new project

Create a new project, and import required files.

From the menu bar, select "File" > "New" > "その他'.



Select "Android" > "Android Application Project", and click "Next".



Enter the application name, the project name, and the package name, and click "Next".
The rest of the settings are optional.



Enter the class name which is created as a default, and click "Finish".



Drag and drop "haru" in /sample/simple/assets/ of the Live2D SDK into the assets folder of the Eclipse project.



Drag and drop "live2d_android.jar" in /lib/ of the Live2D SDK into the libs folder of the Eclipse project.



File import is completed.
Next, make settings of the imported library (live2d_android.jar) path to the project.

Right-click the root folder of the project on the Eclipse, and click "Properties".



Select "Java Build Path" > "Libraries" > "Add JARs...".



Select "live2d_android.jar" in the libs folder in the project, and click the OK button.



The setting is completed if the window is as follows.




◆Make settings of OpenGL 

Next, make settings of OpenGL to display the Live2D model.

Right-click the package that is generated when creating the project or its upper directory, and select "New" > "Class".
Enter the class name, and click "Finish".
In this example, we enter "SampleGLSurfaceView" as the class name.



Make the SampleGLSurfaceView class take over the GLSurfaceView class, and add required functions.

  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. }



Create a renderer for drawing as an inside class in the SampleGLSurfaceView class, and add the lacking functions.

  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 Method stub generated automatically
  15.             
  16.         }

  17.         @Override
  18.         public void onSurfaceChanged(GL10 arg0, int arg1, int arg2) {
  19.             // TODO Method stub generated automatically
  20.             
  21.         }

  22.         @Override
  23.         public void onSurfaceCreated(GL10 arg0, EGLConfig arg1) {
  24.             // TODO Method stub generated automatically
  25.             
  26.         }
  27.     }
  28. }



Describe the initialization by the constructor of the SampleGLSurfaceView class.

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








Initialize the model by onSerfaceCreated() of the SampleGLRenderer class, and initialize the view by 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 Method stub generated automatically
  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.     }




Lastly, draw the model by 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.     }





◆Invoke the view

Invoke the view that you just made in the previous setting from onCreate() in the MainActivity class created as a default, and make setting of it as the screen.

  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. }



◆Completed



The codes will be as below.


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