Display the Live2D Model

Basic flow to display the Live2D model

1. Initialization    
a. Create an instance (load a moc file)
b. Associate with the texture
c. Associate with the graphical environment ( it is not needed depending on the platform)
d. Specify the position and the size

2. When updating
a. Update the point
b. Draw

During the process above, the flow of initialization is a platform dependent code.
And the reference of specifying the position may differ depending on the environment. (We try to make it as similar as possible in the sample.)


1-a. Create an instance (load a moc file)
First we create an instance of Live2D model.
You can make the operation of display or animation from this instance.
A model class like Live2DModelXXX ("Live2DModelIPhone" for iPhone, for example) is prepared for each platform.

To load it from a moc data, use the loadModel function defined as a static function of each Live2DModelXXX class.
There are two ways provided to load it from the file pass or from the byte array for most platforms.

You can choose from one of them as below for loading;


Live2DModelXXX* live2DModel = Live2DModelXXX::loadModel( path );

or

Live2DModelXXX* live2DModel = Live2DModelXXX::loadModel( byteArray, size );






1-b.Associate with the texture

After loading the moc file and the texture file, you need to set to associate them to each other.
You can use the
setTexture function for texture setting.
First parameter is the model texture number set by the Modeler tool.
Second parameter is the texture.
Its shape may be different according to the platform (graphic environment).
For example, if it is OpenGL, it becomes an integar made by glGneTextures.


live2DModel->setTexture( 0 , texture_00 );
live2DModel->setTexture( 1 , texture_01 );
live2DModel->setTexture( 2 , texture_02 );



1-c. Associate with graphical environment

You may need to make settings for the model if it is required to refer to the graphic engine when drawing depending on the platform.
Initialization of OpenGL or DirectX are not executed inside the Live2D, so you need to initialize them outside.

It is not needed for iPhone.

For Android,
public void onDrawFrame(GL10 gl){
live2DModel.setGL( gl );
...
    
For Flash,
live2DModel.setGraphicsContext( context3D );


For DirectX,
LPDIRECT3DDEVICE9 g_pD3DDevice; 
live2DModel->setDevice(g_pD3DDevice) ;



1-d. Specify the position and the size

You can draw a model if you make all of the settings so far, however, the position and the size are far too different to display on the screen in many cases.
The setting size (
reference) of the model is from upper left as the origin toward right down on the screen if you do not specify anything.
Specify the position and the size by setting the matrix for the setMatrix function.
Choose a matrix with the size of 4x4.
A 16 length alignment with float shape, and the order is based on OpenGL.
You can get the model size with getCanvasWidth(),getCanvasHeight().

Example of the screen setting with OpenGL
Set the middle of the screen as an origin, upper left (-1, 1), lower right (1, -1)
glViewport( 0, 0, deviceWidth, deviceHeight );
glMatrixMode( GL10.GL_PROJECTION ) ;
glLoadIdentity() ;
glOrthof( -1, 1, 1, -1, 0.5f, -0.5f );
Position setting of the model
This is to set the middle of the screen and the width as of the model.
The order is fixed directly in this example, however it is generally set using a class for matrix.
float matrix[16];
matrix[0] = 2/live2DModel->getCanvasWidth();//Rate of magnification of x axis
matrix[5] = 2/live2DModel->getCanvasWidth();//Rate of magnification of y axis
matrix[12] = -1;//Movement of x axis
matrix[13] = 1;//Movement of y axis

live2DModel->setMatrix( matrix );





2-a. Update a point

You need to invoke it to create an animation, as the point of each frame is calculated by the update function.

live2DModel.update();



2-b. Draw

The model is drawn by the draw function.

live2DModel.draw();