どうも、刺たん*1参謀のおのだです。
どうした？
Vtuberになろうかなと思って。
なにする？
Live2Dを学びます。
Live2Dってなに？
すごいやつです。
最近だとホロライブ6期生のクロヱちゃんのモデリングがすごくて感動したので見ろ。
要は2Dの絵をパーツ分けして可動域をつけて”歪ませたり”しながらぐりぐり動かそうという話です。
それでは参ります。
1. 絵を描く
とりあえず動かすための素材(PSD*2)を作ります。
今回は自分のアイコンであるこれ↓を元に制作を進めます。
これはjpgファイルなので、Photoshop上でこの画像をトレース*3して新しくLive2D用のPSDファイルを作ります。
1-1. 画像のトレースとパーツ分け（下調べ）
おのだには大きく二つの課題があります。
- イラストがわからない、経験がない
- Live2Dのパーツ分けがわからない
おのだはデザイン科出身ですがイラストとは縁遠いため、なんもわからん。
IllustratorならまだしもPhotoshopは正直ほとんどわからん。
Live2Dのパーツ分けは当たり前ですが全くわかりません。
むかちき*4投げやり人間なので「髪の毛一本ずつ分ければええか？？？」ぐらいの勢いです。
1に関してはもうノリと勢いでやっていくしかないです。
僕の手にあるのはMacbookのトラックパッドと幼少期からちょっとだけ自信のある手先の器用さだけ。
2に関しては公式サイトに超丁寧なチュートリアルがあるので、これを参考にします。
正直この公式チュートリアルのリンクだけでこの記事を開いた価値がある。
1-2. パーツ分けの指針決定
前述の超丁寧なチュートリアル（以下、バイブル）によると、分けるべきパーツは次の通りです。
- 髪
- 前髪
- 横髪
- 後ろ髪
- 顔
- 目（まつげ・目玉・白目）
- 鼻
- 眉
- 口（上唇・下唇・口内）
- 輪郭
- 耳（右耳・左耳）
- 体
- 首
- 胴体
- 腕
- 足
- （服）
服はバイブル上だと胴体に含まれていて存在しなかったので勝手に足しました。
今回作っていくキャラクターは首から上だけなので、体は首以外不要です。
ところで、おのだはLive2Dの裏側を想像するに「一つのパーツに対して複数のパターンの画像を用意して角度ごとに平行移動+素材切り替えで対応してるんだろうな」と想像していました。
実際は「パーツごとにメッシュ化して角度に応じて歪ませる」感じです。
パーツ分けのアイデア
バイブルとそれに付属していたサンプルのPSDファイルを参考にし、パーツ分けを以下のように決定しました。
多分あってるよな、という感じ。
歴戦のエンジニアとしては工程全体の中盤あたりで「目玉もっと分けないとダメか..」となる予感がヒシヒシとします。
（見えて）無いものを補う必要があることに気づいたのでこういったエリア分けになってます。
これらを以て、次の作業に進みます。
1-3. Photoshop上での作業の前に
ところで、元画像が横を向いてるのは大丈夫なのですか？
心の中のおせっかいおのだ
いや、大丈夫か大丈夫じゃないかわからんです。
というのも、例としてイラストレーターVtuberのしぐれうい（以下、ういママ）はこのように↓元々少し左向きのモデルです。参考のために見ろ。
ういママのモデルデータが左向きベースで作られているのか、ただういママがいつも左を向いてるのかは実際わかりませんが、少なくともこの角度までの横向きであれば全く違和感なく視聴できます。
むしろ可愛いまであります。
今回使用する画像の場合は、ほんの少しだけ正面を向かせる必要がありそうです。
続きは#2で..
余談: 無いものを補うということ
例えば今回の場合、一番の問題となるのは「口」です。
お気づきの通り、本来であれば口は「上唇・下唇・口内」のパーツに別れるべきですが、今回は見送っています。
理由としては補完に労力がかかりすぎるからです。
これは例えばレスポンシブ対応のWebサイトのコーディングを依頼された際、デザイナーから横幅1080pxを想定したPCサイトのデザインデータのみが送られてきている状況と同じです。
「横幅2560pxになったら余白は右にとる？左にとる？左右に取る？それともウインドウいっぱいまで広げる？」
「どのサイズからメニューを畳んでハンバーガーメニューにする？ハンバーガーアイコンは線3本？4本？太さは？間隔は？色は？アニメーションは？」
等々、考え始めるとデザイン素人のエンジニアには恐ろしくて到底決定できないパラメータが無限に存在します。
というか、そんなものはエンジニアの仕事ではない。
何せ、髪・首・目玉程度であれば自分でもササッと描きたせるので、完全に新しいパーツが必要になる口に関しては今回は見送ります。
脚注
※1 刺たん… 指定暴力団「刺身たんぽぽ同好会」
※2 PSD… Adobe社の定番画像編集ソフト、Photoshop（フォトショ）のやつ
※3 トレース… 元の画像をなぞって別の画像を作ること
※4 むかちき… ホロライブ2期生の百鬼あやめがむかついたときに発した言葉
Onoda is me 