阅读 2127

[Android]摸鱼计划:给 App 也加一个 Live2D 吧 | 七日打卡

—— 什么,你也是二次元?
—— 不不不,二不起二不起

一、Live2D 简介

Live2D 这个词在近些年的手机游戏和网络直播中经常出现,而且热度不减(就连明日方舟都有一个可露希尔会动了呢),应该大多数人都对 Live2D 有基本的了解了,这里就不重复官方的定义或者百度百科的内容了,Live2D 就是让纸片人动起来的技术

动态的纸片人介于2D和3D中间,比静态立绘的效果多了动作和表情,更加生动;又比立绘加3D建模的组合效果少了割裂感和违和感,更加自然。下面看一个效果展示:

迫害阿米娅

一个 Live2D 的模型包含一个 moc3 文件,一个贴图文件夹和一系列的 json 配置文件构成:

.
├── Mark.2048
│   └── texture_00.png
├── Mark.moc3
├── Mark.model3.json
├── Mark.physics3.json
├── Mark.userdata3.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.json
复制代码

所有的贴图都集中放在了 texture_00.png 里,看起来乱乱的,甚至有点掉 san:

Mark_texture

上面这些并不是上面的展示效果源文件,而是官方提供的 SDK Demo 中的演示文件,我们要在 App 中添加 Live2D 也是使用官方 SDK。

二、Cubism SDK Demo

Cubism SDK 用 C++ 编写,支持的平台相当广泛,目前可以说是适配全平台了:

Cubism SDK

在原生 App 中加载 Live2D 模型用到的是 Android+OpenGL 的组合。

Demo 的实现是一个全屏的 GLSurfaceView,Java 代码中仅添加了 GLSurfaceView 的 Renderer 和Activity#onTouchEvent 的回调,所有的具体实现都是通过 JNI 调用 native 函数实现的:

    // 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);
复制代码

GLSurfaceView 是使用 OpenGL 进行渲染的 SurfaceView,使用 Android 原生支持的 OpenGL 可以省掉游戏引擎占用的 apk 空间,避免 apk 体积暴涨,适合非游戏类的 App 使用。Demo 项目构建的 apk 中,为展示 Live2D 增加的 so 库仅有 350+ kb,占空间较大的模型文件也可以在启动应用后从网络下载。


今天加班,又不想放弃坚持了三天的打卡,就拿曾经的摸鱼内容修饰了一下,就当是科普读物吧…希望这篇文章能在干燥的冬天给你补充水分(笑)

封装 Live2DView 的计划还没有放弃,正好春节不能回家了,希望可以做出来吧。