【Android】用Cubism 2制作自己的Live2D——来制作动态壁纸吧!

2023-05-22,,

前言-

Andorid SDK下载  baidu云 提取码:19jm

这次我们就来研究一下官方的例子之一的liveWallPaper,也就是开发Android的动态壁纸

先来看看这个例子运行的结果:

还是蛮可爱的嘛,那么开始吧!



项目的目录-

framework中是live2d要用的必须的类

libs下是开发必须要用的jar包

-GLWallpaperService.jar

-live2d_android.jar

sample下就是重点了live2DRenderer是绘制模型的类、LiveWallpaperService继承自GLWallPaperService

-这个GLWallPaperService类是动态壁纸的基础类,此类为壁纸项目的开发提供了服务接口,通过集成GLWallPaperService类,重写onCreateEngine()等方法实现壁纸功能。

OK!和昨天工作量差不多嘛!开搞!



模型绘制类live2DRenderer-

对于Renderer上一篇文章已经有了简单的了解->点这里跳转

class SampleGLRenderer implements Renderer{

     @Override
//执行渲染工作
public void onDrawFrame(GL10 gl){} @Override
// 渲染窗口大小发生改变或者屏幕方法发生变化时候回调
public void onSurfaceChanged(GL10 gl, int width, int height){} @Override
//surface被创建后需要做的处理
public void onSurfaceCreated(GL10 gl, EGLConfig config){}
}

但是上一个例子中绘制的模型只有头部会左右偏转,并没有实质性的载入动作、物理效果(Motion和Physics)等。

那就看看这些物件是怎么绘制到手机里的吧!

onDrawFrame(GL10 gl)

 public void onDrawFrame(GL10 gl) {
// Your rendering code goes here
//对于OpenGL的设置
gl.glMatrixMode(GL10.GL_MODELVIEW ) ;
gl.glLoadIdentity() ;
gl.glClear( GL10.GL_COLOR_BUFFER_BIT ) ;
gl.glEnable( GL10.GL_BLEND ) ;
gl.glBlendFunc( GL10.GL_ONE , GL10.GL_ONE_MINUS_SRC_ALPHA ) ;
gl.glDisable( GL10.GL_DEPTH_TEST ) ;
gl.glDisable( GL10.GL_CULL_FACE ) ; live2DModel.loadParam(); /*motionMgr是MotionQueueManager.class的,从名字就能看出来的个用于存放Motion(.mtn)文件的队列*/
if(motionMgr.isFinished())
{
/*播放动画需要使用MotionQueueManager的startMotion函数
* 第二个参数可以设定动作结束以后删除与否(设置为true时,Live2D会自动调用delete()函数)
*/
motionMgr.startMotion(motion, false);
}
else
{
/*当然只是Motion肯定不能动的,所以必须调用updateParam()函数设定将正在播放的动作参数设定到模型中*/
motionMgr.updateParam(live2DModel);
}
//暂时保存目前所有数值
live2DModel.saveParam();
/*dragMgr是L2DTargetPoint类的,这个L2DTargetPoint用于管理拖拽的坐标,
关于触碰的获取、设备坐标的变换方法,也是壁纸中点击屏幕的任意一点模型就会看向哪里的实现*/
dragMgr.update(); float dragX=dragMgr.getX();
float dragY=dragMgr.getY(); //调整脸的方向
live2DModel.addToParamFloat(L2DStandardID.PARAM_ANGLE_X, dragX*30);
live2DModel.addToParamFloat(L2DStandardID.PARAM_ANGLE_Y, dragY*30); //调整身体的方向
live2DModel.addToParamFloat(L2DStandardID.PARAM_BODY_ANGLE_X, dragX*10); //调整眼球方向,本例中不需要
/*live2DModel.addToParamFloat( "PARAM_EYE_BALL_X", dragX , 1 );
live2DModel.addToParamFloat( "PARAM_EYE_BALL_Y", dragY , 1 );*/ /*这个类是 Live2D 库中简易使用物理演算的封装类。
不使用也可设置物理演算。
L2DPhysics 类的 load 函数用来读取 JSON 文件。
更新时,调用 update 函数,把参数应用在模型上。*/
physics.updateParam(live2DModel); //配置绘图环境
live2DModel.setGL( gl ) ;
//更新顶点
live2DModel.update() ;
//绘制
live2DModel.draw() ;
}

模型绘制

对于OpenGL这一些配置可以参考上一篇的oDrawFrame()函数



onSurfaceCreated(GL10 gl, EGLConfig config)-

 public void onSurfaceCreated(GL10 gl, EGLConfig config)
{
AssetManager mngr = con.getAssets();
try
{
InputStream in = mngr.open( MODEL_PATH ) ;
live2DModel = Live2DModelAndroid.loadModel( in ) ;
in.close() ;
}
catch (IOException e)
{
e.printStackTrace();
} try
{
//texture
for (int i = 0 ; i < TEXTURE_PATHS.length ; i++ )
{
InputStream in = mngr.open( TEXTURE_PATHS[i] ) ;
int texNo = UtOpenGL.loadTexture(gl , in , true ) ;
live2DModel.setTexture( i , texNo ) ;
in.close();
}
}
catch (IOException e)
{
e.printStackTrace();
} try
{
InputStream in = mngr.open( MOTION_PATH ) ;
motion = Live2DMotion.loadMotion( in ) ;
in.close() ; in=mngr.open(PHYSICS_PATH);
physics=L2DPhysics.load(in);
in.close();
}
catch (Exception e)
{
e.printStackTrace();
}
}

这个就是用流加载Assets文件夹里的文件到需要他的地方了,与上一篇差别不大,多了Motion和Physics的载入,方法也是一样的。



onSurfaceChanged(GL10 gl, int width, int height)-

public void onSurfaceChanged(GL10 gl, int width, int height) {

        gl.glViewport( 0 , 0 , width , height ) ;

        gl.glMatrixMode( GL10.GL_PROJECTION ) ;
gl.glLoadIdentity() ; float modelWidth = live2DModel.getCanvasWidth(); gl.glOrthof(
0 ,
modelWidth ,
modelWidth * height / width,
0 ,
0.5f , -0.5f
) ; glWidth=width;
glHeight=height;
}

也是没什么变化,不过这次我在中文说明书中找到了对这些绘制参数的描述



LiveWallpaperService类-

/*这个GLWallPaperService类是动态壁纸的基础类,此类为壁纸项目的开发提供了服务接口,通过集成GLWallPaperService类,重写onCreateEngine()等方法实现壁纸功能*/
public class LiveWallpaperService extends GLWallpaperService {
public Engine onCreateEngine() {}
class MyEngine extends GLEngine {
public MyEngine() {}
//获取触摸事件
public void onTouchEvent(MotionEvent event) {}
}
}

壁纸类的结构就是这样的,下面是完整代码。

 public class LiveWallpaperService extends GLWallpaperService {
public LiveWallpaperService() {
super();
} public Engine onCreateEngine() {
MyEngine engine = new MyEngine();
return engine;
} class MyEngine extends GLEngine {
Live2DRenderer renderer; public MyEngine() {
super();
// handle prefs, other initialization
renderer = new Live2DRenderer(getApplicationContext());
setRenderer(renderer);
setRenderMode(RENDERMODE_CONTINUOUSLY);
} @Override
public void onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_UP:
renderer.resetDrag();
break;
case MotionEvent.ACTION_MOVE:
renderer.drag(event.getX(), event.getY());
break;
case MotionEvent.ACTION_CANCEL:
break;
}
} public void onDestroy() {
super.onDestroy();
if (renderer != null) {
renderer.release();
}
renderer = null;
}
}
}


下面就是我自己尝试的结果了:

-

【Android】用Cubism 2制作自己的Live2D——来制作动态壁纸吧!的相关教程结束。

《【Android】用Cubism 2制作自己的Live2D——来制作动态壁纸吧!.doc》

下载本文的Word格式文档,以方便收藏与打印。