ティラノビルダー用Live2Dモデルを作る方法 Cubism3、4、5

# はじめに
ティラノビルダー公式：
[Live2Dを活用したゲーム制作（Cubism3.x 用）](https://b.tyrano.jp/tech/page/live2d_v3)
を見れば、Live2Dモデルを表示させる方法はすぐにわかる。
サイト内にセットアップ済みのLive2D組み込み用データも既に用意していただいている。

でも、そのデータ自体の作り方が現時点ではweb上に見当たらず、質問も多いので解説したい。
(2019年012月20日現在、雑にググった感じ…すでにあったらゴメンなさい)
(2023年11月17日 Cubism5 の対応状況について追記)

#### ティラノではどんなLive2Dデータが必要なのか
結論から話すと、

- モーションデータが~~最低1個は必須、無いと表示すらできない~~(表示できた)
- そのモーションデータをモデル設定ファイルに紐付ける必要がある
- Live2D 5(SDK5)で書き出したモデルでも現状可能、回転デフォーマのブレンドシェイプを使ったモーションも可
- ただし、色替えパラメータには現状未対応(yranoBuilder 2.0.4.b standard janにて確認)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/548be26c-fb7f-6c7d-8199-2234bfa3c9fe.png)
SDK5で書き出しても問題ないが…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/f9e1029e-7a4e-0cdb-8e28-338854b34047.png)
色替えパラメータには対応していない模様

## 対象読者と必要知識、開発環境
### 想定する読者レベル

- Live2Dで1体以上何かモデリングしたことがあるひと
- ティラノビルダーに自作Live2Dモデルを表示させたいひと

![usa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/1df62740-fcad-f38e-f86c-26713f696c2e.png)


### Live2Dの想定バージョンや環境
- Live2D Cubism3 (4でも3として書き出せばできる筈たぶん...)
- ティラノビルダーV184以降
- Windows 10

## 組込み用ファイル作成
#### 組込み用ファイルとは？
.cmo3はLive2D Modelerで扱うエディターの為の編集形式である。
データとしては無駄な情報が含まれていてゲームに使う用途としては向いていない。
なので、組込み用の.moc3という形式に変換してやる必要がある。

モーションに関しても.can3のままでは使えないので、組込み用に書き出してやる必要がある。

### テクスチャアトラス編集
#### テクスチャアトラス編集とは？
moc3ファイルの書き出しを選ぶと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/e5350729-617c-e302-a22e-a71fe5bc254b.png)
警告が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/28fb948b-9f16-e98f-dc78-3beeb8ddc757.png)

そのままだと書き出しできないので、テクスチャアトラス編集という作業をしてやる必要がある。
これは画像の情報を1枚(もしくは複数枚)のPNG画像に全てぎゅうぎゅうに詰め込む作業になる。
ファイルサイズが軽くのなるのでこの方がコンピュータにもメモリにもやさしくてゲーム向きである。

#### アトラスの編集方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/8f60504a-eee6-92dc-d780-7715dda45c72.png)
まず、テクスチャアトラス編集ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/93087651-a4da-abab-77cc-7d30017a8d3d.png)
面倒くさがりのひとは2048×2048の1枚でOKを押す。
個人制作ならほとんどのケースでそれで困らない筈。

ここでは、解説の為に1024×1024のカツカツサイズで説明する。
(スマホゲーム案件とかだとそのくらいであることが多い)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/c7c64718-e031-98e8-3a6c-ee7bafbc2edb.png)
どれか1つ適当にオブジェクト選択してみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/ed8d0940-8f85-f8db-21c7-9b8d8ad43764.png)
原画に対する倍率が表示されており、100%を切っている。
1024×1024 1枚では収まり切らなかったので、自動的に縮小して配置されている。このままだと、実際のゲーム画面では表示がモザイク状に荒くなる可能性がある。
#### 試しに小さくしてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/d2ed6be0-df95-cbd9-fe8a-f71155bac420.png)
40%程度だとあまり劣化がわからないと思う。
なので、試しに前髪オブジェクトだけ極端に小さくしてみる。
赤いバウンディングボックスの角をドラッグするか倍率の欄に直接数値を打って、思い切り小さくしてみよう。
OKボタンを押すと、アトラスの編集内容が確定、キャンセルボタンを押すと編集内容が無かったことになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/6fba8381-002a-9904-8b7e-869a26e6c8e0.png)

キャンバス上で「テクスチャアトラス表示」になり、前髪がモザイク状になっていることを確認できる。
(Tキーのショートカットで「テクスチャアトラス表示」←→「モデル用画像表示」を切り替え)
(ファイルメニューからも切り替え可能)
これが実際のゲーム画面の上の表示イメージになる。

スマホ案件などでテクスチャサイズの制約が厳しい場合は、優先順位を付けて目立つオブジェクトほど倍率を上げて、比較的どうでもいい部分は倍率を低めにしておく…などのトリアージが必要になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/1024836b-2eb9-c555-f23c-6d93b2cf5b81.png)

#### Cubism3以降のテクスチャアトラス編集のすばらしさ
アトラス編集上で一度小さく配置してしまっても、内部的には.cmo3ファイルが100%のテクスチャ情報(PSDデータ)を保持している。なので、後から幾らでも配置倍率を弄ることができる。小さくしてしまったものを大きく再配置しても画質が劣化しない。神！！
#### テクスチャアトラス編集まとめ
- まつ毛、目、口、眉、前髪、横髪、など表情に関するものは目立つので、可能な限り高い倍率を確保
- 描画順が低く、ユーザーがあまり見ない箇所、実質隠れて見えない箇所などは低めの倍率に
- 再配置するときには、他のオブジェクトに重ねて踏ん付けないようにする(表示がおかしくなる)
- ゴマ粒のような鼻の点やまつ毛の細かい部品など小さすぎるオブジェクトは100%の倍率に
（見やすく、選択しやすくなるので100%にしておくと作業上便利！踏ん付け防止にも）
- 作業時間があるなら、可能な限り高い倍率で収まるようにぎっちり敷き詰める(ちょっとしたパズルゲーム)
- 回転させてもいいが、なるべく90度単位、最悪45度単位で(半端な角度だと劣化するので)
- できれば、関連するオブジェクトは近づけて綺麗に並べてあるとベスト
- 最終的な使用目的や原画サイズにも依るが、PSDの原画が縦2千ピクセルくらいあるなら50%もあれば十分

### ~~旧ID→新IDの変換~~(不要になったので、この項を削除)

### まばたきリップシンクの設定
ティラノ上では台詞に合わせてリップシンクができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/e6522af3-6c71-7b38-10d2-81317eb05e0f.png)
ついでにまばたきの設定もやっておこう(物理設定画面等で自動でまばたきしてくれるようになる)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/22e2dc56-21b4-ddb0-1f15-b37aa8b6789c.png)

### 組み込み用ファイル書き出し
IDを新形式に変換したら(しなくてもいいが)、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/f5e0247c-14eb-926f-6aab-0cad54bc0c40.png)
ファイルメニューから「組込み用ファイル書き出し」→「moc3ファイル書き出し」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/8e312e9e-ead2-125b-247a-9f6d5035cb03.png)
設定項目はデフォルトのままで恐らく問題ない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/fa0184c9-7d19-9f6e-0d53-c65cd50acc68.png)
半角英数のキャラ名フォルダを作り、そのフォルダの中にフォルダと同名で.moc3ファイルを保存する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/59dbf833-17b9-7508-e474-e691846eec5b.png)
(例では「nekochan」フォルダ内に「nekochan.moc3」という名前で保存。

- nekochan.1024(テクスチャサイズによって名前が変わる)
- nekochan.moc3
- nekochan.model3.json
- nekochan.physic3.json

が生成される。
nekochan.1024の中にはテクスチャアトラス編集で敷き詰めたPNG画像が入っている。

### Animatorで組込み用モーションファイルの書き出し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/dd34c5a1-b229-b137-2631-13d01ecd1cda.png)

#### シーン名
タグ名が実質的なモーション名になる。
シーン名は書き出したときに、そのままファイル名になるので、半角英数で設定すること。
公式のhiyoriちゃんに倣うなら
「半角キャラ名_m01」
のような命名になる。
「m01」とかじゃなくsmileのようなわかりやすい名前でもいいが、エディタ上でシーンの並び替えができず、名前順になっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/9fe6920c-e067-a2ec-a1b5-f2851925ae59.png)
書き出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/ad2b5a32-f838-b414-ecd3-c09f9723c14b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/603228c5-f510-be8a-1b4d-e461a9477fec.png)
「motions」というフォルダを作ってその中に保存する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/94488723-fa36-f9a3-914d-b0abfe43ceee.png)

## Viewerでモデル設定ファイルの設定
#### モデル設定ファイルを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/cf2cd2e1-338a-f0d7-2ae8-c39721c90905.png)
半角キャラ名.model3.jsonファイルをドラッグ&ドロップ(以下D＆D)して開きます。

###motionsフォルダ
nekochanフォルダ内に「motions」という名前のフォルダがあり、
ここにアニメータから出力したモーションファイルが入った状態にしておく。
入れておいた状態でViewerにフォルダごとD＆Dする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/efc30156-b841-a885-b156-10fa4e44cc3b.png)
Viewer内にmotionsフォルダができます。+ボタンを展開することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/50361b20-fee7-3009-1fc1-431587048d04.png)
#### 注意！
Viewerは、D&D時点でのファイルの相対パス(位置関係)を覚えている。
よくある典型的なミスとして、

- デスクトップに適当に作ったフォルダ内にモーションを出力→
- D&DでViewerに放り込む→
- その後になって半角キャラ名のフォルダ内にmotionsフォルダを移動する

…っとやってしまと、D&D&時点でのファイルパスと違ってしまって読み込まれなくなってしまいまう。
#### モーションのグループ名
各モーションにグループ名を付ける。
この**グループ名がティラノビルダー上での実質的なモーション名**になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/7586d25d-6fd4-b6d1-2ea6-fe7698f14fa5.png)


アイドリングモーションに設定したいモーションには「Idle」と設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/726d0a17-a92c-c130-055c-29fed01f883d.png)
他のモーションも設定していく。
自分でわかりやすい名前にしよう。
(頭文字は大文字が推奨)

#### グループ名の被り
同じグループ名を設定したモーションが複数ある場合、いずれかのモーションがランダムで再生されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/d5d362e0-1465-479b-10d4-acaf4d3c2bf1.png)
例えば、アイドリング(待機)モーションに使いたいモーション2種ともに「Idle」グループ名を設定しておけば、ティラノビルダー上で「Idle」の再生を指定すればいずれのかのモーションがランダムで再生されます。

#### モデル設定ファルの保存
設定し終わったら、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/bbb91f76-462d-bbed-1411-3822db1607ad.png)
モデル設定ファイルを上書する。

念のため、モーション設定ファイルをビューワに再度D&Dしてみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/9313d634-db04-93dc-09f9-0a38b045a60b.png)
motionsフォルダやグループ名の設定が残っていたら正しく設定できている。
これでティラノビルダーにインポート可能なデータができた。

#### 余談 モデル設定ファイルって何？
json形式というのは、Live2D特有のものではなく、プログラムの世界では一般的なファイル形式である。適当なテキストエディタで中を見ることできる。
大雑把に説明すると、.moc3ファイルやテクスチャファイル、物理設定ファイルが何処のフォルダにあって、なんて名前のファイルなのか？…等の各種設定が記述されている。

「モーションファイルが何処にあるのか？ の記述が無かったので、ビューワ上でモーションファイルの設定をして紐付け、保存しました」…っというのが一連の作業の意味である。もちろん、直接テキストエディタで編集することも可能である。

```json:半角キャラ名.motoins3.json(モデル設定ファイル)

{
	"Version": 3,
	"FileReferences": {
		"Moc": "nekochan.moc3",
		"Textures": [
			"nekochan.1024/texture_00.png"
		],
		"Physics": "nekochan.physics3.json",
		"DisplayInfo": "nekochan.cdi3.json",
		"Motions": {
			"Idle": [
				{
					"File": "motions/nekochan_m01.motion3.json"
				}
			],
			＜以降省略＞
}
```
## その他、注意事項
### Animatorのモーション
これはティラノ用モデルに限ったことではないが、

- Animatorの「配置トラック」による移動や拡大は無視される

っということに注意が必要である。
もし、左右に移動したりこちらに近付いたり遠のいたりするモーションを作りたい場合は、配置トラックによる座標、拡大率ではなく、専用のパラメータを作ってモーションを作る必要がある。

### ティラノ上での拡大表示
内部的に拡大に耐えうるテクスチャ解像度が十分にあったとしてもシャギってしまう(恐らく、100%の大きさに表示したものをそのまま拡大処理している)。
モデルを小さく作りすぎた場合は、Cubism Editor上で「ファイル」→「モデルのリサイズ」しで大きくして書き出し直した方がよい。

### モデルやモーションの更新方法
「Live2D追加」ボタンで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/c28c2334-5aeb-c4b4-9ba0-89227e23e967.png)
上書き更新しても最新版が反映されないようなので、
保存場所に直接データを上書きした方がよい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/4eae50fc-067e-4679-94f5-45a11ea1a200.png)


## 更新履歴
#### 2021/11/12
- グループ名被りのランダム再生について追記。

#### 2019/12/19
- 存在を思い出して、続きを記述、修正

#### 2019/09/20
- 取り敢えず投稿…していたのを長い間放置