Live2DのCubism SDK

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

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

Cubism SDK

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

プログラムの構成としては，

  • モデルの表示
display
1
2
3
4
5
6
7
8
9
void display(void)
{
	glClear(GL_COLOR_BUFFER_BIT);
	...
	live2DModel->update();
	live2DModel->draw();
	glFlush();
}
  • テクスチャ読み込み
loadGLTexture
1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}
  • モデル初期化
init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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