Live2Dという技術があります。
http://www.live2d.com/
二次元のイラストを3D化せずにそのまま動かせるという夢の技術。
最近だとFaceRigと組み合わせたこんなのが話題になったりした。
www.4gamer.net
3年くらい前にYoutubeで紹介動画を見た時からずっと応援している技術なんだけど、このLive2Dでキャラを動かすのを自分でも試してみた。
Cubism EditorでLive2Dモデルを作ってみる
Cubism Editor | Live2D
どうやらこのCubism EditorというソフトウェアでLive2Dモデルが作成出来るようなので、インストールした。
とりあえず公式のチュートリアルページを見ながら見よう見まねでやってみる。
入門チュートリアル - Live2D Cubism 2 マニュアル
元の絵はこんな感じです。
Live2Dの仕組みをざっくり説明すると、イラストのパーツ(目とか髪とか)を福笑いのように別テクスチャとして配置して、それをずらしたり歪ませたりする動きを設定する…という感じ。
なので、まずはパーツの切り出しを行う必要があります。
行いました。
実際には作り始めて見ないとどんな風に切り分ければいいのかよく分からなかったので5回くらい作業やり直してる。
(フリーモードだとパーツのサイズとかに色々制限があったりもする)
切り出したパーツをテクスチャとして取り込み、頑張って歪ませたりして動きのパターンを設定していく。
Cubism Animatorでアニメーションを作ってみる
上で作成したモデルを付属のCubism Animatorというソフトウェアに読み込ませると、モデルを動かしたアニメーションが作成出来る。
こんな感じ。
動画のコマごとにモデルのパラメータを設定するだけで簡単にアニメーションが作れます。
そして実際に完成したアニメーションGifがこちらになります。
アニメーションや3Dの知識が全くなくても半日くらいでなんかそれっぽい動く絵が出来たぞ！
やったね！
と、アニメーションGifを作っただけで終わってしまったらAndroidエンジニアとしては面白くないので、Androidアプリとして動かしてみる。
Android用SDKがあったのでこれを使おう。
Android - Live2D Cubism 2 マニュアル
なんかサンプルがEclipseプロジェクトだったり、説明の殆どがEclipseの使い方でAPIの使い方についての説明が全然なかったりして不安になるが…。
とりあえずモデルが表示されるだけだったサンプルコードをちょっと書き換えてタッチイベントに反応するようにしてみた。
public class Live2dSurfaceView extends GLSurfaceView {
private SampleGLRenderer renderer;
public Live2dSurfaceView(Context context) {
super(context);
renderer = new SampleGLRenderer();
setRenderer(renderer);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
renderer.updateAngle(event.getX());
return true;
}
class SampleGLRenderer implements Renderer {
private Live2DModelAndroid live2DModel;
private final String MODEL_PATH = "live2d/model.moc";
private final String TEXTURE_PATHS[] = {"live2d/model.2048/texture_00.png"};
@Override
public void onDrawFrame(GL10 gl) {
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.setGL(gl);
live2DModel.update();
live2DModel.draw();
}
@Override
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();
float visibleWidth = modelWidth * (3.0f / 4.0f);
float margin = 0.5f * (modelWidth / 4.0f);
gl.glOrthof(margin, margin + visibleWidth, visibleWidth * height / width, 0, 0.5f, -0.5f);
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
try {
InputStream in = getContext().getAssets().open(MODEL_PATH);
live2DModel = Live2DModelAndroid.loadModel(in);
in.close();
for (int i = 0; i < TEXTURE_PATHS.length; i++) {
InputStream tin = getContext().getAssets().open(TEXTURE_PATHS[i]);
int texNo = UtOpenGL.loadTexture(gl, tin, true);
live2DModel.setTexture(i, texNo);
}
} catch (IOException e) {
e.printStackTrace();
}
}
public void updateAngle(float param){
Log.d("test", param / 30 + "");
live2DModel.setParamFloat("PARAM_ANGLE_Z", param / 30);
}
}
}
こんな感じ
一応なんとなく動かせたけど、多分ほとんどの人はUnity用SDKを使ってるんだろうなぁ。
おまけ
決まった動きするキャラを表示させたいだけだったら、↓のライブラリとかでgifをそのまま画像として表示させた方が楽な気がした。
https://github.com/koral--/android-gif-drawable
xml version="1.0" encoding="utf-8"
<RelativeLayout xmlnsandroid="http://schemas.android.com/apk/res/android"
xmlnstools="http://schemas.android.com/tools"
androidlayout_width="match_parent"
androidlayout_height="match_parent"
androidpaddingBottom="@dimen/activity_vertical_margin"
androidpaddingLeft="@dimen/activity_horizontal_margin"
androidpaddingRight="@dimen/activity_horizontal_margin"
androidpaddingTop="@dimen/activity_vertical_margin"
toolscontext="me.kirimin.live2dsample.MainActivity">
<pldroidsonroidsgifGifImageView
androidid="@+id/image"
androidlayout_width="match_parent"
androidlayout_height="match_parent"
androidsrc="@drawable/girl"
androidlayout_alignParentBottom="true"
androidlayout_centerInParent="true"/>
<TextView
androidlayout_width="match_parent"
androidlayout_height="wrap_content"
androidtext="Live2Dだよ！！！！！！！"
androidminLines="4"
androidbackground="#CCCCCCCC"
androidpadding="8dp"
androidlayout_alignBottom="@+id/image"/>
</RelativeLayout>
こんな感じで。
現在プレイ中のライン
