【Android】用Cubism 2制作自己的Live2D——來制作動態壁紙吧！

前言-

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

 

---

---

 

下面就是我自己嘗試的結果了：

 

 

-