見出し画像

動く立ち絵はいいぞ(えもふり編)

 ゲーム制作者が自由な記事を作るアドベントカレンダー 12/17の記事です! お相手は普段きつねのてぶくろ図書館というサークルでティラノスクリプト製ノベルゲームを作っている私、紫靂せちるがお送りいたします!

はじめに

 動く立ち絵、いいと思いませんか? 何がいいって、動くこと。キャラが瞬きする、口パクする、呼吸をする、生きていることを感じさせてくれる。最高じゃないですか。でも実装にはハードルがある……ソフトはどう使うの? モデリングは? キャッシュはどれだけ食うの? そんなお悩みに、私が答えれる範囲で答えていけたらと思います。今回はモデリングまで取り上げるので、ティラノスクリプトに限らずUnityや他のツールの方も参考にしていただけるかと! 

Q.2Dアニメーションソフトには何があるの?

 まずはソフトの紹介から。偏見にまみれていますが、お付き合いください。ちなみにこの記事でメインでお伝えするのは「えもふり(E-mote)」です。

Live2D

 Vtuberの立ち絵でもおなじみLive2D。ティラノスクリプトではLive2D公式プラグインCubism4.x対応版で動きます。 読み込んだPSDに自分でメッシュや変形枠(デフォーマ)を設定して、動きを付けていきます。

<魅力的なところ>
・えもふりプラグインよりもティラノ公式が更新してくれている。
・それゆえ、えもふりプラグインより軽そう(体感)
・頑張ればVtuberの立ち絵が移植できそう。
・無料版がある。(※ただしデフォーマー(変形できる枠)の上限が50、追加できるパーツの数が30)
・パーツ分けしたパーツの名前を自由に設定できる。
・ 可動域やモーションに自由度が高い。
・頑張れば手や足もある程度自由に動かせる。

・物理演算が入れれる。

<悩みどころ>
・モーションを作るのが大変。
有料版(Pro版)はそこそこお値段がかかる。
・デフォーマーやパーツ、アートメッシュ割を増やしすぎると重くなってしまう。
・物理演算を入れると重くなってしまう。
・かといってアートメッシュを減らしすぎると動きが硬くなる。
・ティラノの場合、先駆者の情報はあまり多くはない。

<特筆事項>
・口パクはlipパラメーターでvoconfigとシンクロさせる。
(lip_seとse_bufの番号を合わせるらしい。)
([playse]と[playbgm]はhtml5=trueにしておかないと効果音等で口パクしてしまうらしい。)
(えもふりとは方法が違う)

 個人的に今のところ本格的に使ってない理由はモーションを作る手間を渋っているからです……。Live2D課金はしているし、Vtuberのモデリングはしているんですけどね。(隙あらば自語り)

えもふり(E-mote)

 今回メインで取り上げる予定のえもふり(E-mote)。えもふりはいいぞ!! と言いたいところですが、やはりメリットとデメリットは存在するので、それも述べていきたいなと思います。えもふりがFREE版、E-moteがPRO版です。私はまだE-mote触れてません……。ティラノスクリプトでは、E-mote公式プラグインで動きます。こっちはテンプレートにPSDを流し込んで、テンプレートを加工していく感じの運用です。

<魅力的なところ>
・パーツ数に合わせたテンプレートを使用する。
(シンプルテンプレート、ベーシックテンプレート)
モーションのテンプレートが存在する!
(※シンプルテンプレートとベーシックテンプレートでデフォルトのモーションは若干異なるが互換性はある)
・微調整しなくてもモーションがある程度まともに動くことが多い。
・微調整すると可動域等を改善することができる。
公式さんがめちゃくちゃ応援してくれる。

<悩ましいところ>
重い。同時にたくさんのキャラを出すとめちゃくちゃ重い。
(※どこで読んだか忘れたけど4キャラ出すと固まるらしい。未検証。3キャラはいけた。)
・ティラノ制ゲームの場合、キャッシュクリアができない為、ゲームが長くなる場合はキャッシュを貯めない設定にする必要がある。
ティラノのプラグインが最新版えもふりに対応していない。
※対応版の3.9.6のえもふりを使う必要がある
(※新しいバージョンのファイルを古いバージョンで開くことはできないため、間違えてモデリングした場合はパラメータを手動でコピーして貼り付けないとダウングレードできない)
(※ベーシックテンプレートで目が消える事象が最新版だと起こる)

・(えもふりの場合、今のところ)ティラノとUnityしかSDK出力できない?
・Live2Dのデフォーマー程は変形に自由度がない。
・対応バージョンを使っても、シンプルテンプレートの場合、怒り目変形・哀し目変形が反映されない。
(※ベーシックテンプレートのように画像を準備してあると反映する)
・テンプレートのパーツ名とpsdのパーツ名を揃えなければいけない。
E-mote(有償版)はインディーズ契約なら無料で使える!
(※ティラノでも使えるらしい?(未検証))
・情報が少ない。めちゃんこ少ない。

<特記事項>
・リップシンクするには、リップシンク用のモーションを生成する必要があり、slotを分けて2行でリップシンクとモーションを設定しないといけない。

えもふり×ティラノの情報の少なさは本当に辛いです。
そんな中で数少ない情報量の多い記事がこちらなので、
併せてご参照いただけると嬉しいです。

 個人的にはモーションがある程度自動生成されるのが魅力。私はLive2Dのモデリングとモーション制作から逃げたくて、制作した作品()でえもふりをチョイスしたところがあります。実際端折れた工程は多いと思います。ただ、上記の通り微妙にパーツが消えてしまう場合があったり、目の変形がうまくいかなかったりする場合は存在するのですが………。

Spine

 ごめんなさい!未履修です!ティラノスクリプトではSpine公式プラグインで動きます。比較的新しいプラグインだから最適化されていそう? また、買い切りがあるのも魅力的。ゲーム特化の2Dアニメ―ションだそうなので、他にもいいことがあるかも!

その他のソフトは……?

 2Dアニメーションというくくりだと、MohoProやAnimeEffectがありますね。ティラノスクリプトやおそらく他ゲームに埋め込む手段としては微妙かもしれませんが、gifや連番pngにするんだったらMohoProは個人的に好きです。ボーン使えるし物理演算使えるしメッシュも割れるし。AnimeEffectもおそらく同様の感じで、gifや連番pngを作るのならいいんじゃないかなと思いますが、私は未履修です。

 というわけで、今回は実際にゲームに組み込んでリリースするところまで持って行った、「えもふり」を例に挙げて制作ハックをつらつらと書いていこうと思います!

えもふり(E-mote)はいいぞ!

結局えもふりの魅力って……?

 E-mote公式が簡単短時間を謡っているように、省エネルギーで 立体的な体の可動域が約束さることに加え、モーション作成の省略または簡易化できることじゃないでしょうか!
(※もちろん、ガチればガチるほど、「これがえもふり!?」と思うようなモデルを作ることは可能です。)

さぁ!モデリングだ!

 実際にモデリングされてる方の動画を紹介しておきます!

 ちなみにうp主さんこと熊猫三郎さんは、完成品モデルもめちゃすごいので、よかったら皆さん見てクレクレ!

 というわけで、実際にモデリングして導入するまでのエトセトラを私なりに言っていきたいと思います。

Q.シンプルテンプレートとベーシックテンプレート、結局どっちを使えばいいの?

 テンプレート一覧を見てもらったらわかる通り、えもふりには4つのテンプレートがあります。個人的には「ベーシックテンプレート」を使った方がいいと思います!正面か斜めかはなんとかなるかと思います!
 それぞれ長所と短所を挙げていくと……

★シンプルテンプレート

えもふりシンプルテンプレートを開いた画面


<メリット>
・準備するパーツ数が少ない。
えもふりチュートリアルはこっちのテンプレートで説明されている。
・こっちのテンプレートでもパーツを追加することで多様なポーズを表現可能。
・ADV用表情集がデフォルトで入っている。

<デメリット>
・脚を表現できない(脚まで描画すると、工夫をしないと脚がメッシュ変形でめくれる)
・ティラノスクリプトだと、怒り目、哀し目が表現できない。(半目以外の変形だと瞼に瞳が貫通してしまうようです。)

 ちなみに、弊サークルの作品では、「噫、井戸に流るる」の立ち絵はこちらのテンプレートで作られています。工夫でポーズや人外の表現を行うことができたのは特筆に値するポイントだと思っています。

実際に使った立ち絵のモーション例(シンプルテンプレート)

 このモデルは前腕のパーツを腕パーツと分けて追加パーツ扱いにすることで、腕の自然な動きを再現することになりました。衣装違い、ポーズ違いはこの方法だと実装が難しいため、別モデルを準備して[emote_chara_hide]や[emote_chara_delete]を繰り返して出したり消したりすることで実装しました。

★ベーシックテンプレート

えもふりベーシックテンプレートを開いた画面

 最初見たときカオスさに笑ったのはきっと私だけではないはず……。

<メリット>
・想定されているパーツ数が多い。
・脚パーツを入れることができる。
・腕パーツ差分を入れることができる。
・怒り目、哀し目差分を入れることで瞳が瞼を貫通する変形を回避できる。
・涙パーツもデフォルトで入れれる。
E-moteチュートリアルはおそらくこっち。

<デメリットってほどではないけど……>
・ADVゲーム用のテンプレートが入っていない。
(※類似のものは入っている)
(※シンプルテンプレートから移植することもできる)
・腕パーツは1つにしておかないと腕差分で切り替えるとき困りそう。

 弊サークルの中では、「〇マルみえ! やきにくおーこく!」及び「〇マルみえ! やきにくおーこく!2 ートリあえずご賞味あれ♬ー」にて、ベーシックテンプレートで立ち絵を作りました。立ち絵をたくさん作るのには向いていなくても、ディティール凝ることができるのが魅力ですね!

実際に使った立ち絵のモーション例(ベーシックテンプレート)

 上の立ち絵は腕差分を使っていないので、シンプルテンプレートの時の例と同様腕を追加パーツにしてあります。また、脚をLとRで分けるのを忘れていたので脚も追加パーツです。追加パーツの汎用性は高いです。モデリングの可能性が無限大です!

PSDの準備

 Live2Dを触ったことがある方は、取り込むPSDのレイヤ名は自由に名づけることができたかと思います。ですが、えもふりはテンプレートにPSDを流し込むという仕様上、レイヤ名に自由がありません。

テンプレートを落としたzipの中身

 個人的には、使わないで1からレイヤを作っていった方が楽なんじゃないかと思ったりもするのですが、テンプレートのZIPを落とすとデフォルトキャラが表示されてるPSDファイルの基本画像.psdと、空のグループフォルダと最低限えもふりに必要なパーツ(腰や原点の座標取得とか)のみ入っているプレーン画像.psdが添付されています。もちろん空から作って、チュートリアル等を参考にしながら原点を打っても大丈夫なので、必要な方は使いましょう。

プレーン画像.psdの中身

 チュートリアルやテンプレートを参考にしつつ、パーツ分けした画像を準備することで、次の工程に移ります。

 前述のとおり、慣れた方は前腕を追加パーツにしたり(腕には上腕を入れる)、アクセサリの追加パーツを追加したりといろいろできるので是非挑戦してみてください!

 ちなみにレイヤーの順序は表示順に関係あるので、フォルダの通りじゃなく表示したいものが上のレイヤに来るように自分で調節すると吉です。あと、名前が若干間違えていても後で設定しなおせますが、面倒くさいのでレイヤ名はちゃんと合わせることを強くお勧めしたいです。フォルダはえもふりには反映されないので、好きにまとめてしまってオッケーです!また、パーツを省略することも可能なので、いらないなーと思ったら入れなくてもなんとかなります。

PSDをインポートする

 というわけで実際に準備したPSDをえもふりに流し込んでいこうとおもいます。今回はベーシックテンプレートで説明していこうかと思います。

①えもふりをDLする。
 Unityあるいはその他ツールの方は違うかもしれませんが、ティラノスクリプトの方はバージョン3.9.6を落としてください。あとから直すのめちゃくちゃ面倒くさいです。

⓶テンプレートを開く
 えもふりを開き、「ファイル>テンプレートを開く」を選択。出てきたファイル選択ウィンドウから、「ベーシックテンプレート_正面タイプ_190607.emttmpl」を開く。(数字は違うかもしれないので、拡張子で判断してください)

テンプレートを開くはここ。プロジェクトじゃないよ。

 そうすると、ゴテゴテに仮装しているテンプレ子ちゃんが出てきたと思います。このテンプレ子ちゃんにPSDをインポートしていきます。

③PSDを開く
 「ファイル>PSDをインポート」を選択し、インポートするPSDファイルを選択します。

とりあえず取り込んだのがこちら。解像度の差の暴力。

 こんな感じで、現在のインポート状態が表示されます! このとき、レイヤ名が間違えていたり、未設定だったりすると画像が表示されません。

口通常開きが認識していない!

 このように、認識していないと表示されないので、

認識していないボタンを押してレイヤを選択!

 認識していないボタンを押してレイヤを選択することができます。これによって間違えたレイヤが選択されている場合に変更もできます。お便利だ!

 また、レイヤにゴミが入っていたりすると、これまたアニメーションが上手くいきません。そういうときは、

明らかにでかい目の枠(青点線)

この明らかにデカい目の点線枠を

小さくしたよ

ドラッグで小さくしてサイズを合わせると、アニメーションが上手くいきます。

 この設定はPSDを流し込むたびにできるので、PSDを流し込んで微調整しましょう!テンプレートじゃなく、過去に作ったえもふりプロジェクトでもPSDを流し込むことができますが、大体点線の枠がおかしい形になっていてうまく読み込まないので、手動で微調整が必要であることを特記しておきます。それでも体のモーションが流用できるのは嬉しいよね。「噫、井戸に流るる」キャラクターのポーズ差分は、プロジェクトに差分を流し込んで作り込んだものもあります。(手の枠とかは調節しなおしました)

 シンプルテンプレートはこれより項目数が少ないので楽なのですが、自由度は下がってしまうし、その分追加パーツでゴリ押す量が増えるので大変です。

とりあえず動かしてみたら……

 インポートしたら、とりあえず動く状態になっていると思います。動かしてみて、満足がいく形だったでしょうか?  顔の形は? 可動域は?

目の枠もズレてるし、腕がもげてる。

 あんまりにもズレが酷い場合は、前述の選択枠から紹介する必要がありますが、小さい場合はメッシュを動かしたり、パーツの属性を変えることで解決させます。

パーツの属性を変える

 まず基本となるパーツの物理演算そのものを変える方法を紹介します。主に追加パーツで行います。メッシュ変形より先に行わないと、メッシュが消えちゃいます。

こうやって変える

 実際上記の図の中から好きな物を選んで試行錯誤してもいいのですが、収集が付かなくなったら「独立」にしてメッシュ変形でゴリ押したほうが楽だと思います。

メッシュをいじる

 物理演算枠のメッシュをいじって変形度合いを変えます。追加パーツではほぼ必須ともいえる工程。全体的に魔改造するなら、 顔>髪>胴体>手足の順が好みです。一番バランスがとりやすいし。大きいパーツから小さいパーツの順に作り込んでいくことを意識するとやりやすくなると思います!

 で、メッシュをいじる時のポイントなんですが、私自身教えてもらうまで気づかなかった機能を使うと楽になります。

これのモードとメッシュ変形のところを

↓↓↓↓↓

こうじゃ!!!便利なものがでてきたじゃろ!!!

 これにより、ミラー編集(左右対称に編集できる)できたり、パーツを疑似的に回転させたり、太らせたり細らせたり拡大させたり縮小させたりできます!お便利だ!!!!

 あとは心行くまでパーツを魔改造しましょう!!!

 ちなみに、変形したメッシュのパラメータをコピーすることもできます。

メッシュ変形を右クリックしたやつ

 メッシュ変形を右クリックすることによって出てくるボックスで、なんとパラメーターがコピペできます! しかも左右反転コピペもある! やったー! これでだいぶ楽できるんですよ!

モーションをいじくろう!

 ……といいつつ、私はあまりモーションをいじってないので、説明が最小限になってしまうかもしれません………。

この水色のバー見るだけでくらっとするよね。

 この水色のバーの数字を変えることで、各顔のパーツや体の角度を変えることができます。値をいじってみたらなんとなくわかると思います。
 タイムライン編集の各モーションは右クリックで複製できたりするので、複製した上で魔改造しちゃいましょう!

シンプル手プレートのADV用モーションをベーシックテンプレートでも使いたい。

 使いたいですよね。「大好き」のモーションとか可愛いし。その移植の方法を説明します。

①シンプルテンプレート(あるいはシンプルテンプレートで作ったプロジェクト)を開く

⓶タイムライン編集の中のAVG用タイムラインセットを右クリック、「フォルダ内すべてのタイムラインをJSONファイルにエクスポート」して、保存。

これ一見見つかりづらいところにありますよね。

③ADG用タイムラインセットをインポートしたいプロジェクトファイルを開き、フォルダを作り、右クリックし「タイムラインをJSONファイルからインポートする」を選択。

 これでだだだだだっとタイムラインにタイムラインセットがインポートされたと思います! やったね!

リップシンクモーションを作る

 どうせなら口パク実装、したいですよね。えもふりにはモーションと差分モーションを合成する機能があります。

「差分用途」にチェックがついているパラメーターが合成できる。

 口パクは差分モーションを準備することで実装することができます!かといって1個1個タイムラインに点を打っていくわけではありません。ある程度自動で設定してくれます! 嬉しい!

①まずボイスを準備する。
 16bit(32bitではない)wavファイルを準備します。ボイスは作りたいタイムラインの数だけちゃんと分割しましょう。

こんな感じ

⓶ボイスを読み込ませる
 ファイル>ボイスボリュームを解析するを開きます。

 出てきたウィンドウの出力形式を、個別csv形式でなくjsonタイムライン形式にして、OKを押します。入力フォルダと出力フォルダもこの時設定してしまいます。(出力されるファイル名は固定です)

jsonタイムライン形式

③ボイスのリストが表示されるので、変換開始を押します。成功すると、出力フォルダにvoicetimeline.jsonというファイルが生成されています。このjsonファイルは名前を変更しても大丈夫です。

④上記のタイムラインセットのインポートの要領で、ボイスのフォルダを作ってから右クリックで、先ほど作ったタイムラインのjsonを用いタイムラインセットのインポートを行います。

これでボイスの差分ファイルができあがりました!

 ティラノスクリプトでは通常モーションをslot=0、口パクモーションをslot=1にして同時再生することによって、リップシンクが実現します。詳しくは近日この記事の続編で書こうと思っています。

こんな感じのコードだよ


リップシンクの差分合成の落とし穴

 ところでリップシンクには差分合成の落とし穴があります。それは、差分の方が優先度が低いということ。(slot=0と1逆にしたらいけるんかな・・・そこは試してないです)つまり、「大好き」のような口が開くモーションの場合、開いた後の口より口が小さくなることがなく、口があまりパクパクしないという弱点があるのです。

 これの回避法は……地道に「口パク」パラメータを消すこと

下の方にあるよ。選択してDeleteで消えます。

  地道かもしれませんが1個1個消していった方がキレイに口パクします。ちなみにベーシックテンプレートのsample_しっかり系表情セットには口パクが設定されていなので、こちらだけ使うんだったらこの作業は不要です。

さぁ!エクスポートだ!

 ここからはティラノとUnityだけの話になるのですが、ファイルからエクスポートするを選ぶと組み込みファイルがエクスポートされます!

ちなみに各モーションから「動画を出力する」を選択すると、gifやwmvなど動画で出力もできるので、gifや連番画像が必要な方はお試しください。


というわけで

 以上が「えもふりはいいぞ!」モデリング編です。メッシュをいじれ!とか言いましたが、端折ればパーツ分けだけでなんとなく動きます。嬉しいね。
 モーションを作りたくなさ過ぎて、デフォルトのモーションしかほぼゲーム内で使っていないのですが、それでもかわいく動くのが魅力のえもふり。
工夫の仕方によってはいろんなゲームで使えると思います!
 動く立ち絵はいいぞ!! 是非触ってみてはいかがでしょうか!! うちの子動かす動画を出力するだけでも超たのしい!! 幸せになろう!!

 ティラノに組み込むときはまたいろいろ躓いたので、それは別記事にまとめたいと思います………。

最後に。

しれっと番宣を途中途中にはさんでいましたが、自作ゲームの宣伝をしたいと思います! 自作ゲームのアドカレだからね! そりゃそうか!

 シンプルテンプレートで作った一本道中編ADVゲーム「噫、井戸に流るる」です。和風ファンタジーです。一部動画を使っているため、スマホは非推奨+DL版プレイを推奨しています。心温まる系和風ファンタジーです!ホラーじゃないよ!

 この2作がベーシックテンプレートを使った掌編です。三重県松阪市を応援する萌え萌えな感じのゲームです! 眼鏡をはずして2口目までご賞味あれ! すべて食べると意味がわかる系1本道ノベルです。

 えもふりを用いた作品は上記の3つですが、きつねのてぶくろ図書館では他にも図書館の蔵書のように多種多様なノベルゲームを制作・公開しております! よろしければお気に入りの一冊を探してみてくれると嬉しいです!

 それでは、ここまでお読みいただき、ありがとうございましたー!!!


この記事が参加している募集

ゲームの作り方

この記事が気に入ったらサポートをしてみませんか?