— What, are you a quadratic? — No, no, no, no, no, no

I. Introduction to Live2D

Live2D is a word frequently used in mobile games and network live broadcast in recent years, and its popularity is not decreased (even the Ark of tomorrow has a Klohil can move it). Most people should have a basic understanding of Live2D, so we will not repeat the official definition or the content of Baidu Encyclopedia. Live2D is the technology that makes paper people move.

Dynamic paper figures are in the middle of 2D and 3D, with more actions and expressions than static vertical paintings, which are more vivid. Compared with vertical drawing and 3D modeling, the combined effect has less sense of fragmentation and violation, and is more natural. Here is a demonstration of the effect:

A Live2D model consists of a MOC3 file, a map folder, and a series of JSON configuration files:

.├ ── Mark.2048 │ ├─ Mark.model3.json ├─ Mark.physics.json ├─ Mark.physics.json └ ─ ─ motions ├ ─ ─ mark_m01. Motion3. Json ├ ─ ─ mark_m02. Motion3. Json ├ ─ ─ mark_m03. Motion3. Json ├ ─ ─ mark_m04. Motion3. Json ├ ─ ─ Mark_m05. Motion3. Json └ ─ ─ mark_m06. Motion3. JsonCopy the code

All the textures are grouped together in texture_00.png and look messy, even a bit messy:

These are not the above source files, but the Demo files in the official SDK Demo provided by us. We also use the official SDK to add Live2D to the App.

Cubism SDK Demo

The Cubism SDK is written in C++ and supports a wide range of platforms.

Loading the Live2D model in the native App uses a combination of Android and OpenGL.

The Demo implementation is a full-screen GLSurfaceView, Java code only added GLSurfaceView Renderer and Activity#onTouchEvent callback, All concrete implementations are achieved through JNI calling native functions:

    // Activity#onStart
    public static native void nativeOnStart();
    
    // Activity#onPause
    public static native void nativeOnPause();
    
    // Activity#onStop
    public static native void nativeOnStop();
    
    // Activity#onDestroy
    public static native void nativeOnDestroy();
    
    // GLSurfaceView.Renderer#onSurfaceCreated
    public static native void nativeOnSurfaceCreated();
    
    // GLSurfaceView.Renderer#onSurfaceChanged
    public static native void nativeOnSurfaceChanged(int width, int height);
    
    // GLSurfaceView.Renderer#onDrawFrame
    public static native void nativeOnDrawFrame();
    
    // Activity#onTouchEvent MotionEvent.ACTION_DOWN
    public static native void nativeOnTouchesBegan(float pointX, float pointY);
    
    // Activity#onTouchEvent MotionEvent.ACTION_UP
    public static native void nativeOnTouchesEnded(float pointX, float pointY);
    
    // Activity#onTouchEvent MotionEvent.ACTION_MOVE
    public static native void nativeOnTouchesMoved(float pointX, float pointY);
Copy the code

GLSurfaceView is a SurfaceView rendered by OpenGL. Using Android native OpenGL can save the APK space occupied by the game engine and avoid the explosion of APK volume. It is suitable for non-game apps. In the APK built by Demo project, the so library added to show Live2D is only 350+ KB, and the model files that occupy a large space can also be downloaded from the network after the application is started.

I worked overtime today, and I didn’t want to give up the three days of punching in, so I modified the content of fishing once, just as a popular science reading… Hopefully this article will keep you hydrated during the dry winter months. (Laughter)

The plan of encapsulating Live2DView has not been given up. It happens that I can’t go home during the Spring Festival. I hope it can be done.