Live2DのCubism SDK

2015-01-13 NPR

最近プログラミングで触っているLive2D Cubism SDKの紹介です．

Live2Dは，２次元イラストの絵を立体的に動かす表現技術です．制作フローも紹介されているように，原画を動かしたいパーツ毎に切り分け，視点や表情パラメータに応じて変形させることにより，イラスト画像を立体的に動かすことができます(デモ動画)．

Cubism SDK

多くのプラットフォームに対応しており，Unity，OpenGL，DirectXといった環境で動かすことができます．僕が研究でもっぱら使っているのはOpenGL環境ですが，OpenGLでも簡単に動かすことができました．初めてLive2Dのプログラムをする際には，サンプルプログラムのSimpleLive2Dのsimpleプロジェクトからスタートするのが良さそうです．

プログラムの構成としては， - モデルの表示

void display(void)
{
    glClear(GL_COLOR_BUFFER_BIT);
    ...
    live2DModel->update();
    live2DModel->draw();

    glFlush();
}

テクスチャ読み込み

int loadGLTexture(const char* path)
{
...
glEnable(GL_TEXTURE_2D);
glGenTextures(1 , &id);

glBindTexture(GL_TEXTURE_2D, id);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);

gluBuild2DMipmaps(GL_TEXTURE_2D, GL_RGBA, width, height, GL_RGBA, GL_UNSIGNED_BYTE, image);
return id;
}

モデル初期化

void init(void)
{
glClearColor(0.0, 0.0, 1.0, 1.0);
live2DModel = live2d::Live2DModelWinGL::loadModel("haru.moc") ;

const char* TEXTURES[] = {
    "texture_00.png" ,
    "texture_01.png" ,
    "texture_02.png" ,
    NULL ,
} ;

for( int i = 0 ; i < 1000 ; i++ ){
    if( ! TEXTURES[i] ) break ;

    int tex =loadGLTexture(TEXTURES[i]);

    if( tex < 0 ) printf("failed");
    live2DModel->setTexture( i , tex ) ;
}
live2DModel->setPremultipliedAlpha(false);
}

のあたりをいじりつつ，自分用にカスタマイズしていけば，ビューワーやインタラクティブなゲームを作成可能だと思います．

参考文献

[1] Live2D: http://www.live2d.com/ [2] Cubism editorによる制作フロー: http://www.live2d.com/about/flow [3] Live2Dデモ動画: http://www.live2d.com/wp/wp-content/themes/Live2Dv2/movie/live2d_pv.webm