live2Dで目の回るアニメーションを作り、mp4で出力。それをunityでグルグル回すアプリ をswiftアプリ に！

何がなんだかわからないけど、とにかくできたからメモ。


まず目の回るアニメーションを作る。

これをlive2dで作るために、psdという形式で絵を作らないといけない。

psdはたくさんの絵をレイヤー別にまとめておける。

元絵を動かしたいパーツごとにレイヤーで分ける。

今回の元絵はこれにした。![publicdomainq-0024376ojc.jpg](https://qiita-image-store.s3.amazonaws.com/0/197731/823a015d-a858-612d-7742-dcc1815426b5.jpeg)

https://publicdomainq.net/sharaku-0024376/



これを目とか眉毛とか口とかレイヤーわけしていく。

psdの作れるソフトはフォトショップが有名みたいだけど、お金ないのでfirealpacaにした。


アルパカ開いてjpgの画像をドロップ

<img width="1128" alt="スクリーンショット 2018-08-24 22.12.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/1f62187a-0fcd-d21c-07fd-9bd2c2da74db.png">

こんな感じになる。

これから切り抜いていく。

切り抜きたいパーツの分だけ元絵を複製。
<img width="474" alt="スクリーンショット 2018-08-24 22.14.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/28b4c23a-e993-0d33-d6da-160d41141415.png">

新しい何もないレイヤーを追加
<img width="454" alt="スクリーンショット 2018-08-24 22.17.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/9ce78c2a-bef7-6f96-347b-9c5d564637b4.png">

新しいレイヤーとコピーした下絵1枚だけ表示
<img width="417" alt="スクリーンショット 2018-08-24 22.20.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/c0ececcb-aee2-e623-e4a3-a39abf61c591.png">

何もない新しいレイヤーが上にあることに注意

切り抜きやすいように「command + +」で画面を拡大。
spaceボタン+ドラッグで絵を動かして、切り分けたいパーツを中心に持ってくる。

今回は眉毛を切り抜いてみる。
<img width="1371" alt="スクリーンショット 2018-08-24 22.23.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/1867b1c4-a759-a4ab-0dd0-bf3591fd53dc.png">
↑
眉毛を拡大してきた図
何もないレイヤーを選択した状態で
<img width="421" alt="スクリーンショット 2018-08-24 22.25.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/c7a203d2-d3b8-78db-a8b0-9a6484a159b4.png">

ペンを選択し、緑色にする。

緑で眉毛を大きく囲む
<img width="661" alt="スクリーンショット 2018-08-24 22.28.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/61a2aad8-6585-ff5c-6baa-a0bfef72bea9.png">


レイヤーの順番を入れ替える。
緑色でお絵描きしたレイヤーを下絵の下に
<img width="408" alt="スクリーンショット 2018-08-24 22.29.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/f8d3104d-45ab-220f-71bd-e4781aac3ebf.png">
この状態でクリッピングを押す。
<img width="1229" alt="スクリーンショット 2018-08-24 22.31.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/596ee172-6cbf-fef6-4065-3d96b660a69d.png">

眉毛だけが取り出せる。

これだと絵が二枚なので合体して眉毛だけにするために
<img width="404" alt="スクリーンショット 2018-08-24 22.32.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/184e6e02-970d-6282-bfaa-3f12a26b5709.png">

このボタンでくっつける。

で、レイヤーの名前を左眉毛とかにする。

これを繰り返してパーツに分ける。

最後に残った顔面の輪郭には、元目があったところ、口があったところを綺麗にしておく。
眉毛が動いた時に下が見えてしまうので肌色で塗っておく。




自然になるように塗る方法

普通に塗りつぶしてもいい

スポイトで近くの色を取り、塗ってもいい

近くのところからコピペで消してもいい
<img width="950" alt="スクリーンショット 2018-08-24 22.36.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/2acd6ace-803c-be69-85a7-430362d479c6.png">

選択してコピーし、別のレイヤーに消すための部品を作る
<img width="1094" alt="スクリーンショット 2018-08-24 22.39.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/8f83edfe-1f5c-40ef-1a58-ed3ebed4afb4.png">

これを眉毛のところに貼って、眉毛を消す
<img width="812" alt="スクリーンショット 2018-08-24 22.44.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/760e2de1-518d-9c20-61da-1e49fc411bcd.png">

選択範囲の変形を選択

動かして、消す

<img width="558" alt="スクリーンショット 2018-08-24 22.46.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/f88ef6b5-8e6a-bca3-d6f5-49454d474e3e.png">


そして、先ほどと同じように結合のボタンを押す。

そんな感じでパーツ分けする。


これをpsd形式で書き出す
ファイル→書き出し→psd

そのファイルをlive2Dで開く

modelerで動きをつける


![スクリーンショット 2018-08-24 22.50.41.png](https://qiita-image-store.s3.amazonaws.com/0/197731/683d9dd6-5078-aeb3-b615-f2e3fad58094.png)

animatorで開く

グルグルアニメーション作る

![settei.gif](https://qiita-image-store.s3.amazonaws.com/0/197731/0576c2d5-73cd-9cd9-91b9-9f1b7f42a81c.gif)

できたらmp4で書き出し

<img width="800" alt="スクリーンショット 2018-08-24 23.03.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/aa18e96e-992b-afeb-445e-40a203743d08.png">


<img width="528" alt="スクリーンショット 2018-08-24 23.03.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/26d5696b-21bd-21e4-c01c-8fda29f1e55e.png">


ここからはunityで作業

まずファイルを作る
2Dのテンプレートを用意

シーンを作る
<img width="417" alt="スクリーンショット 2018-08-24 23.07.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/85393724-04d2-be80-fd63-b1eb28016616.png">


<img width="775" alt="スクリーンショット 2018-08-24 23.07.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/d8afc9d7-9866-de22-bc5c-4e04a17ce2a4.png">

ios用にbuild settingsを選択してswitch Platformをおす

<img width="1019" alt="スクリーンショット 2018-08-24 23.10.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/b0733fa5-8850-8c53-b271-a62a65cdcb01.png">

丸を作る。

表示する
<img width="966" alt="スクリーンショット 2018-08-24 23.11.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/6e5eef1b-dc9b-281a-fee7-93d76bf3dcc5.png">

ここに動くmp4を入れる

<img width="424" alt="スクリーンショット 2018-08-24 23.16.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/4e1bb456-3824-a5d2-d11b-a3e6359b8973.png">

videoplayerを作る


<img width="359" alt="スクリーンショット 2018-08-24 23.18.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/dc030a2b-d27c-4796-ea21-54c335282615.png">

video playerのinspectorでmaterial overrrideを選択

<img width="1468" alt="スクリーンショット 2018-08-24 23.20.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/ccfbc05f-6ad8-07e4-d32e-b13225bba558.png">
先ほど作ったmp4を入れておきvideo playerにつなぐ

<img width="709" alt="スクリーンショット 2018-08-24 23.22.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/798d1111-9f1a-bc3c-f6e8-c83bef79fba1.png">
これと丸をつなぐ

これで再生ボタンを押すと

<img width="399" alt="スクリーンショット 2018-08-24 23.24.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/9e52275a-b8a9-0e60-108e-58e4f59431c9.png">
丸の中に顔が表示された

main cameraのところで背景を黒に
円の大きさをトランスフォームのスケールで大きくして
再生すると
<img width="254" alt="スクリーンショット 2018-08-24 23.29.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/dc7d3ec2-8f9d-c33a-f080-b769c34bbd67.png">

目を回した絵が表示された。

あとはこれをグルグル回せば良い。


スクリプトを作る
<img width="719" alt="スクリーンショット 2018-08-24 23.31.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/5c14593b-b92d-3574-933f-c6dd5e1e9046.png">


中身は

<img width="543" alt="スクリーンショット 2018-08-24 23.33.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/197731/b3254526-d81f-8f36-0254-0828f26d2417.png">

タッチしたらくるくる


これをビルドしてxcodeを使えばアプリ として動く。