Live2D作成およびTyranoScript実装の備忘録

この記事について

初めてLive2Dを作成してみて、ハマった個所・注意点や対処方法をメモしておきます。
（まだ細かい部分は作成中なので、随時更新していきます）

ソフトウェアの操作方法やモデルの作り方は色々情報が転がっていると思いますので、ここには書きません。
探すのに苦労した情報やデバックして解決した部分、作成する前に知っておきたかった情報等をメインに書いていきたいと思います。

なお、今回のLive2DモデルはTyranoScriptでの実装を想定しており、原画はGIMPで作成しております。
記載している内容はかなり基本的な事になるかと思いますが、自分と同じように初めて作成する人の手助けになれば幸いです。

【今回使用した製品のバージョン情報】
・Live2D Cubism Editor 3.3.03 (Free版)
・Live2D Cubism Viewer 3.3
・TyranoScript v4 （安定板）
・TyranoRider v4
・GIMP 2.8.16

作業の流れ

自分は以下の流れで作業を実施しました（ちょっと想定が入ってます）

1. 原画の作成/加工（GIMP）
2. Live2Dで基本的な動きの作成（Cubism Editor）
3. Live2Dでアニメーションの作成（Cubism Editor）
4. Live2Dで表情の作成 ※未実施（Cubism Viewer?）
5. TyranoScriptへの組み込み

Cubism EditorはFree/Pro版どっちにするか?

Live2D作成にあたり最初に悩んだのはこの部分です。
自分の結論としては、__まずはFree版で始めてみて対応できない部分が出てきたらPro版ライセンスに切り替える__でしょうか。

Cubism EditorはFree版もPro版も同じソフトウェアで、起動する際に__Free/Pro版のどちらで起動するか選べます__。※恐らく一度ライセンス（トライアル/Pro）を登録するとFree版を選べなくなる（たぶん）
Free版（デフォルト）だと幾つかの機能や上限数に制限があり、Pro版のライセンスを適用する事で制限が解除されるっぽい

なお、Cubism Editorには__42日間のトライアル版（Pro版トライアル）__が用意されています（ありがたや）
※自分の場合、期間限定のPro版機能は「ここぞという時に使いたい！」ので、なるべく温存しようと考えています。

ここで色々調べてみたのですが、トライアル期間の開始タイミングは__無料トライアル版を最初に起動した日から__という事らしく、起動時に間違って「Pro版の無料トライアルを開始」ボタンを押さない限り温存できるはず（たぶん）

なので上述のとおり、まずはFree版で色々試してみてから、Pro版にする必要があるかを検討します。

ちなみにFree版で使ってみて、制限が辛いなぁ感じた部分は以下になります。
※全機能使った訳ではないので、今後増えるかも

・Free版を使ってみて制限が辛い部分3選

1.動きのパラメータ数（動きや変化の種類数）

Free版だと30個までしか登録できないのですが、初期状態で27個作成されています。なので新規に作成できるのは3個。
不要なものは削除したり、別のパラメータに変更できますが、それでも結構ギリギリです。
基本的なモデルを作成するだけなら十分かもしれませんが、モデルに細やかな動き、色々変化をさせようと考えるとかなり厳しいです。
自分は目や眉の動きを左右統一することで節約していますが、アイデアを全て実装するのは難しいですね。。

2.テクスチャアトラス（モデル構成パーツの平面図）

自分のようにSDK（今回はTyranoScript）への組み込みをしようとしている場合、このテクスチャアトラスが必要になります。
モデルを構成するパーツを一つづつ並べた画像になるのですが、こいつはSDKに組み込んだ際の__画質に大きく影響します__。
図にパーツを並べる際に倍率を選択できるのですが、100%以外の倍率は画質が劣化します。（もやっとした感じになります）

それを踏まえた上でのFree版の制限ですが、__2048px x 2048px 一枚のみ__です。
初めて使う場合はイメージが付きにくいと思います（付きにくいですよね？）
参考に自分の作成しているモデルを紹介すると、__立ち絵__で__着せ替えが出来る__ように色々パーツを作成しているのですが、正直全然足りません。。画質の劣化は免れない状況です。。（高画質で表示させたい部分だけ100%、雑で良い部分は低倍率にする、というテクニックがあるみたい）

なのでFree版で作成するなら、__バストアップやデフォルメおよび着せ替えとかしないシンプルなモデル__が良いのかもしれません。
（それ以上を求めるならPro版にしましょうってことですね）

（追記）
レイヤーの肉抜きをした状態でテクスチャアトラスを作成したところ、余裕で足りました（全部100%で）
なんなら3/1以上スペースが余ってます。モデルのサイズにもよるとは思いますが、着せ替えが多すぎなければFree版でも十分対応可能かもしれないですね。ちなみに自分のモデルは幅300px、高さ900pxくらいのサイズにしてます

ちなみに__GIMPで原画を作成した人には重要な注意点があります。
それはレイヤーのサイズをパーツの大きさに合わせておく__こと、です。（これは原画作成の部分で詳しく記載します）

3.パラメータ（動きや変化）のコピーペースト

モデルの動きを作成していると「この動きをちょっとずらしたいなー」と思う時があります。（例えば「X回転の最大値として動きを付けたけど、やっぱもっと大きく動かしたいなー。けど、今作ったやつも一段回下くらいで残しておきたいしなー」って時です）
この時、Pro版なら「形状をコピー」「形状をペースト」でパラメータを複製できるらしいですが、Free版だと出来ないっぽい。
地味に辛い部分です。

ちなみに回避策として、自分はパラメータの最大値を変更してます。最大値を30→40にすることで、40に新しいパラメータを作成できるようになる！（ただ、あくまで回避策なので後々困る可能性も0ではない。。かも？）

作業について

0. まずはじめに！

基本的なことですが、初めてLive2Dを作成する場合は__「まずは公式のチュートリアルを見ておくべき」__ですね。。
自分はちゃんとチュートリアルを見ずに、勢いで作成しちゃいましたが、結局作り直すハメになりました笑
特に__チュートリアル①の「イラストの加工」__は見てから作業するべきだったと後悔しています。。

1. 原画の作成/加工（GIMP）

上述の通り、原画の作成や加工はちゃんとしっかりやっておかないと後々作り直すハメになります。
そういう意味で、作業影響が一番大きい部分ではないでしょうか。。

個人的な教訓は以下です。

・パーツはこれでもか！というほど細かくレイヤーを分割するべし！（特に顔）
・立体的に見せたいパーツはベースと動かす部分でレイヤーを分割するべし！
・揺らす部分は揺れたときに見える裏のレイヤーを意識して着色すべし！
・レイヤーはパーツのサイズに合わせるべし！（GIMPユーザは絶対やっておくべき）
（レイヤー名には日本語使わない方が良いっぽい。化ける。）

●パーツはこれでもか！というほど細かくレイヤーを分割するべし！（特に顔）

これは特に重要な部分です。自分がとても後悔した部分は以下。。

・「眉毛」「睫毛」「白目」「瞳」等々を左右で分けなかった
・「耳と鼻」を「顔の輪郭」レイヤーと一緒にしてしまった

上記のパーツは、レイヤー分けをしなくても何とかなることはなります。ただし、めちゃめちゃ苦労します！！（体験談）

Live2Dは各パーツを動かしたり、変形させたりして立体感を作っていくわけですが、左右が一緒のレイヤーだったり、別々パーツが一緒のレイヤーになっていると、__とにかく動かしずらい！__右目を動かそうとすると左目も一緒に動いて変な形になるし、細かい部分の調整が出来ない。左右のパーツを同じ形にするのも一苦労。時間も倍くらいかかりました（初心者だから?）頑張って目の開閉やリップシンクとか設定したけど、顔のX回転で流石に諦めましたよ。。
特に「顔」は絶対に細かく分けておくべきだと痛感しました。。

●立体的に見せたいパーツはベースと動かす部分でレイヤーを分割するべし！

立体感を出したい部分、「髪」とかですかね。
髪は公式の情報に従って、「前髪」「横髪」「後髪」くらいは分けておくべきです。。（揺れや角度を細かく調整しやすい）
髪が全部纏まって動くと、なんか固い印象になりますが、それぞれのパーツで揺れ幅や角度を細かく調整すると、かなり自然な動きに近づけます。胸なんかも「体のベース」と「胸」でレイヤーを分けると自然な立体感を出すことが出来るらしい。

●揺らす部分は揺れたときに見える裏のレイヤーを意識して着色すべし！

普通にイラスト書く際は全く意識しませんが、動いた際に見える色を意識して着色を追加する必要があります。（これは後からでも比較的簡単に修正できます）前髪が揺れた時に、後ろに肌（おでこ）がなかったら立体感もクソもないですよね。。

●レイヤーはパーツのサイズに合わせるべし！（GIMPユーザは絶対やっておくべき）

これは個人的に超重要です！
GIMPでイラストを作成している人の中には「レイヤーをキャンパスサイズに合わせる」人も居るのではないでしょうか？（自分がコレです）
これが非常にまずい！何がまずいかと言えば__モデルを書きだした時に画質がめっちゃ悪くなります__。（特にFree版！）

少し上に書きましたが、モデルをSDKに組み込む際に「テクスチャアトラス」を作成するのですが、__この時の「パーツのサイズ」=「レイヤーのサイズ」__なのです。
例えば「鼻」。鼻のパーツは全体から見ればかなり小さいパーツですが、レイヤーがキャンパスサイズ（全身サイズ）になっていると、パーツのサイズも全身サイズになり、結果、無駄な余白が凄まじい事になります。前述したとおり、Free版はテクスチャアトラスが__2048px x 2048px 一枚のみ__ですから、パーツのサイズが大きいと、収める為には倍率を下げるしか無いわけです。。（Pro版なら別に良い）

自分はモデルに色々動きを付けて、いざSDK用に書き出す！というタイミングでこれに気が付いたのです。。
出来上がったモデルを見ると、__あれ、なんかモヤモヤしてる。。__と。顔も輪郭もぼやけて、まるで全身モザイク状態。。
原因を調べてようやく上の結論に辿り着いたわけですよ。これが。

という訳で、自分と同じ失敗をした人の為に（居るかな？）リカバリー方法を残しておきます。
最初気づいた時は「おいおい、作り直しか？まいったね、こりゃ」と思いましたが、案外何とかなるもんです。

（補足）レイヤーの肉抜き、差し替え方法

【手順の流れ】

1. GIMPでレイヤーの肉抜き
2. GIMPからpsdに再エクスポート
3. 編集したpsdをCubism Editor（モデル編集中）にドラッグ&ドロップ
4. 編集したpsdを「アートメッシュを追加せずに、PSDファイルを登録」
5. 「プロジェクト」ウィンドウから一つづつ画像を差し替え

1. GIMPでレイヤーの肉抜き

まずは各パーツの余白を全て消します。

・GIMPで原画を読み込んだら、各パーツのレイヤーを一つづつ選択して、「レイヤー」→「レイヤーの自動切り抜き」を実行します。
（この時、パーツ以外の部分にゴミが残っていると、綺麗に肉抜き出来ないので気を付けましょう）

作業はこれだけですが、全てのレイヤーに対して実行していかないといけないので、かなり地道な作業です。

2. GIMPからpsdに再エクスポート

・これはそのままの意味です（割愛）

3. 編集したpsdをCubism Editor（モデル編集中）にドラッグ&ドロップ

・Cubism Editorにモデルを読み込んでいる状態で、編集したpsdをドラッグ&ドロップします。
※モデル設定ウィンドウが開きます

4. 編集したpsdを「アートメッシュを追加せずに、PSDファイルを登録」

・モデル設定ウィンドウに「新規」と「<作成中の.cmo3ファイル>（モデル）」が表示されていると思うので、「<作成中の.cmo3ファイル>（モデル）」を選択します。

・再インポートの設定ウィンドウで<アートメッシュを追加せずに、PSDファイルを登録>を選択します。
※通常差し替える際は「<ベースにした.psdファイル>を差し替え」で自動的に差し替えてくれるのですが、今回のようにレイヤーに大きく手を加えた場合、上手く紐づけされないようです。自分でも試してみたのですが、予期しない所に画像が追加されたりしていて、余計に手間がかかったので、<アートメッシュを追加せずに、PSDファイルを登録>にした方が作業し易いと思います。

5. 「プロジェクト」ウィンドウから一つづつ画像を差し替え

① Cubism Editorで「プロジェクト」ウィンドウを開きます。（開いてない場合は「ウィンドウ」→「プロジェクト」にチェック）
② 併せて「デフォーマ」ウィンドウを開きます。
③ 「プロジェクト」ウィンドウで原画→再エクスポートしたpsdのツリーを展開します（レイヤー画像がずらっと並んでます）
④ 「デフォーマ」ウィンドウから__差し替え先__の画像（パーツ）を選択します
⑤ 「プロジェクト」ウィンドウから__差し替え元__画像（パーツ）を選択し、右クリック→「選択オブジェクトの入力画像として設定」を選択

これで新しい画像（肉抜きしたレイヤー）に差し変わります。
そして、④と⑤を全てのオブジェクトに対して実行していきます（気が遠くなる）

⑥全てのオブジェクトのパーツを差し替えたら完了です。元のpsd（差し替え済み）って書いてるファイルは消しちゃいましょう。

2. Live2Dで基本的な動きの作成（Cubism Editor）

3. Live2Dでアニメーションの作成（Cubism Editor）

4. Live2Dで表情の作成 ※未実施（Cubism Viewer?）

上記は備忘録が出てきたら更新します。

5. TyranoScriptへの組み込み

実装に関して、ここでもハマったのでメモを残しておきます。

余談が長いので先に結論を書いておきます。
Live2Dモデルにモーションを作成/設定しておかないと、モデルが表示されない

とりあえず基本的なモデルが出来たので「TyranoScriptに表示させて動かしてみたい」。
そう思ってモデルを組み込み用に書き出した訳です。

ちなみにTyranoScriptへのLive2D組み込み方法は公式に詳しく書かれています。
https://tyrano.jp/sample/live2d

で、公式の手順をお手本に、わくわくしながらLive2Dを組み込んだ訳ですが、「ん？表示されない。。」となりました。
早速ググってみましたが、それらしき情報を見つけることが出来ません。。

試しにプラグインに入っているサンプルモデルデータを読み込ませてみます。うん、表示されますね。

悪いのは自分のモデルっぽいなーと思いながら、モデルの構成ファイルを見比べて、ようやく結論が出ました。（長くてすみません。）
結論としては、モーション設定が無いと表示できない、という事のようです。

モデル組込

【Live2D モデルデータ出力】
公式に詳しい手順が載ってるので飛ばします。
https://docs.live2d.com/cubism-editor-manual/moc3-file/?locale=ja

【モーション作成】
・Cubism Editorのアニメーションウィンドウで適当なモーションを作成
（とりあえず表示させるだけなら、適当な動きでOK）

・「ファイル」→「組み込み用ファイルの書き出し」→「モーションファイルの書き出し」を選択します

・プラグインのmodelフォルダのフォルダ配下に「motions」フォルダを作成し、その中にモーションファイルを出力
modelフォルダ以下に配置されたフォルダ名がmodel_idです。また、○○.model3.jsonなど関連するファイルもすべて同じ名前にします。
サンプルを見ると、model_id = モデル（キャラクター）名 にしておくのが良さそうです。

【モーション設定】
Cubism Viewerで設定できるっぽいですが、手っ取り早く手で編集しちゃいました
組込用データの関連ファイル<○○.model3.json>をエディタで開きます。
中身はこんな感じ。

{
    "Version": 3,
    "FileReferences": {
        "Moc": "Test.moc3",
        "Textures": [
            "Test.2048/texture_00.png"
        ],
        "Physics": "Test.physics3.json",
        "DisplayInfo": "Test.cdi3.json",
    },
<省略>
}

ここに先ほど作成したモーションをIdleとして登録します。
※モデルをTyranoScriptに表示させた時に自動で再生されるのが「Idle」です。

以下を「FileReferences」の中に追記します。

        "Motions": {
            "Idle": [
                {
                    "File": "motions/○○.motion3.json"
                }
            ]
　　　　 },

追記するとこうなります。

{
    "Version": 3,
    "FileReferences": {
        "Moc": "Test.moc3",
        "Textures": [
            "Test.2048/texture_00.png"
        ],
        "Motions": {
            "Idle": [
                {
                    "File": "motions/○○.motion3.json"
                }
            ]
　　　　 },
        "Physics": "Test.physics3.json",
        "DisplayInfo": "Test.cdi3.json",
    },
<省略>
}

モデルにモーションが紐づけられました。
この状態でようやくTyranoScriptにモデルを表示させられるようになりました！

ちなみにモデルを表示させる方法はすごく簡単です。
公式に詳しく書いてるので、ここでは書きません。
https://tyrano.jp/sample/live2d

おわり

という事で今回はLive2Dの作成とTyranoScriptへの組込みに関する備忘録を書きました。
Live2D自体の作成は動画などもたくさん公開されており、案外何とかなります（めっちゃハマりましたが）
教訓はやはり「チュートリアルはちゃんと見よう」ですね笑

急いで書いたので内容はかなり雑ですが、時間が出来た時に綺麗に整えようと思います。
（備忘録も色々増えそうですし）
あとは説明用に画像なんかも入れようかな。。