1. Live2Dでユニティちゃんを
微妙に動かしてみた
2014/01/18 noshipu

2. Unityを始めた理由(noshipu脳内調べ)
その他(19%)
嫁に会うため(81%)

3. MMDモデルが作られてない
2D嫁を動かしたくない？

4. そんな人に
Live2Dをおすすめ！

5. 自己紹介とスライド説明
★名前★
のしぷ
★Twitter★
@noshipu
FF14はHades鯖でやってるよ
★このスライドについて★
Live2Dの勉強記録です。
Live2D初めて１週間ですので、詳しくないですmm
このスライドをきっかけに一緒にLive2D始めよう！

6. Live2Dってなに？
魅力あふれるキャラクターや原画が、
2Dのまま立体的に動く！(公式引用)
動画を見ればすごさがわかる！3Dモデルじゃないか疑う
→http://www.youtube.com/watch?v=grzAbtw4zdI
→http://www.youtube.com/watch?v=YrLnF7CQ8Ac

7. Live2Dってなに？
最近のぬるぬる動く2Dキャラは結構Live2Dだったりする
企業でアドベンチャー作るなら、もはや必須レベル？
[導入実績]
・サモンナイト5
・恋愛リプレイ
(^q^)くおえうえーーーるえうおおお
・俺妹 ポータブル ・ガールフレンド(仮)
・やはりゲームでも俺の青春ラブコメはまちがっている。
...他多数

8. 今までは 立ち絵
↓
これからは 動く絵

9. Live2DとUnity
【ニュースリリース】2013/12/20
サイバーノイズ、「Unity」向けの開発ツール
「Live2D Cubism SDK for Unity」の提供を拡大
http://www.live2d.com/news/unity_full_release
これにより非営利目的であれば条件付きで、
Unity用のSDKを個人、学生、サークル等で
使用できるように！
※リリースするには別途申請が必要

10. 前置き終わり
ここから、実際に作業した過程になります
絵を描き始めてから
Unity上で微妙に動くところまでは
ざっくり説明しますので、よろしくお願いします
前提条件として
Live2Dであつかう素材はCubism Editorという
Windowsソフトで作成します(Macは準備中とのこと 1/17現在)。
また、Unityは無償版で動きます

11. 準備

12. 1.Live2Dのツールを取得
Live2D SDK for Uniryのダウンロードに申請が必要
ここから申請
http://www.live2d.com/products/cubism_sdk
SDKのダウンロード許可がメールで届くので、
そこからSDKをダウンロード。
また、Cubism Editorの無料版をダウンロード
http://www.live2d.com/download

13. ２.とりあえずサンプル
Unityのサンプルプロジェクトが２つ
入ってるので、さわってみる
sampleApp1
アプリ「しずくの時間」のしずくさんが入ってる
これ起動するだけで感動。Live2Dすごい
simple
シンプル構成。
ソースも１ファイルなので、
こっちを参考にしてくのがおすすめ

14. ３.チュートリアル動画みる
公式ドキュメントに使い方が書いてあるので、
動画ともに見て、読んで作業の流れを把握する
Live2D Cubism Documents
http://sites.cybernoids.jp/cubism/
チュートリアル動画
http://sites.cybernoids.jp/cubism/video/tutorial

15. ４.作るものを決める
作るキャラクターと
どのくらい動かすかを決めておく。
自分はせっかくなので、
ユニティちゃんを使うことにした。
動きもあくまで動作確認用なので、
そんなにつけない想定で進めることに。

16. ユニティちゃんって？
知ってる人ばっかだと思うけど、
一応説明・・
Unity公式キャラクター
オープンソース系ヒロイン！
今春デビュー

17. 製作

18. おおまかな作業の流れ
絵を準備

19. おおまかな作業の流れ
絵を準備
パーツごとに
ポリゴン設定

20. おおまかな作業の流れ
絵を準備
パーツごとに
ポリゴン設定
パーツの
回転、動きを
設定

21. おおまかな作業の流れ
絵を準備
パーツごとに
ポリゴン設定
パーツの
回転、動きを
設定
Unityで
モデルを制御

22. 絵を準備
１．レイヤーごとに絵をかき分ける
頭だけレイヤ分けて書いたら、
ユニティちゃん劣化してしまった
ntnyさんごめんなさいorz
２．下絵とパーツテクスチャを作成
・下絵
・動かすパーツを集めたテクスチャ
上記の2枚をpngで吐き出す
※無料版だと読み込めるテクスチャが
1024*1024までの1枚だけなので注意 。
←レイヤー分けする

23. パーツごとにポリゴン設定
１．ポリゴンを設定
Live2D Cubism Modelerを開いて、
下絵とテクスチャを読み込ませる
設定したいパーツを選択して、
テクスチャ編集からポリゴンを設定する
２．下絵に揃えて配置
下絵に綺麗に重なるように配置する
※目など1箇所ずつ作るので、一気にやらないこと
(例)両目いっしょに。まゆげ二ついっしょに
顔を設定するで！
ポリゴンを
いい感じに設定する
１、２を繰り返し
パーツを配置し終えた状態

24. パーツの回転、動きを設定
１．デフォーマをつける
ポリゴンを動かす面や軸をつけていく
デフォーマを作成から作る
パーツのポリゴンが全て収まるように設定す
る
２．パラメータにそった動きをつける
パラメータにキーをおいて動きをつける
中間のパラメータの動きは
自動で補完してくれる
※タイムライン上に、
キーフレームごとに動きをつくる感覚に似てる
※モーションもこのタイミングで別ツール使って、作るみたいですけ
ど、ここは今回やれなかったです
目の設定。
一番右側を見ているときの
設定をしている

25. Unityでモデルを制御1
モデルの読み込み、表示
※さっきまで作ってた modelをmoc形式で吐き出し、
○○.moc.bytesという名前にして Assetsにいれておく
テクスチャもAssetsのどこかにいれておく
Start()で
// モデルのロード
Live2D.init();
live2DModel = Live2DModelUnity.loadModel(”つくったmocファイル”);
live2DModel.setTexture( 0, ”つくったテクスチャ” ) ;
OnRenderObject()で ※Live2D用の更新メソッド
// モデルの描画
live2DModel.update();
live2DModel.draw();
サンプルを参考にして作っていくとわかりやすい

26. Unityでモデルを制御2
パラメータの変更
感覚的にはMecanimのパラメータ変更をする感じ
OnRenderObject()で ※Live2D用の更新メソッド
// 目のX座標パラメータを動かす
live2DModel.setParamFloat( "PARAM_EYE_BALL_X" , touch_point.x ) ;
モデル.変更する型(変更するパラメータ, 変更する値);
これでかわる

27. とりあえず
前髪と目玉の
２箇所だけ動くように

28. 微妙に動いた！
DEMO
http://noshipu.mydns.jp/afg/UnityChan/UnityChan.html
前髪はオートで、目はクリックした方向を見るように

29. ざっくり感想

30. ・絵をかけるようになりたい…
・ポリゴンの設定の仕方や、
デフォーマの設定はなれないと大変そう
・オリキャラ描いて
デフォーマがっつり設定したい
・モデルさえ作れれば、
Unityで扱いやすい！
・2D絵はやっぱりかわいい
・ユニティちゃんのリリース楽しみ！

31. ご清聴ありがとう
ございました