【ハンドトラッキング用モデル解説+cmo3/PSDファイル配布】①-1 上腕の制作
Added 2024-12-10 09:22:26 +0000 UTC皆さんこんにちは！乾物ひものです。
前回の記事はこちら↓
【ハンドトラッキング用モデル解説】⓪-2 回転デフォーマをワープデフォーマーで動かす方法の解説
皆さんこんにちは、乾物ひものです。 前回はハンドトラッキングの制作で必要になる技法「背面法」の解説をしました。 今回も技法の解説です。 その名も 「回転デフォーマをワープデフォーマーで動かす」 です！ ……名前が長いですね。 誰が背面法みたいなカッコイイ名前開発して欲しいです；； この長ったらしい技法名で...
今回の記事から具体的な操作の手順が出てくるのですが、なるべく初心者の方にもわかりやすくしよう！を心掛けたところかなりの長文になってしまいました。
なので、「そんなこたぁとっくに分かっとるわい！」という記述が出てきた時は遠慮なく読み飛ばしてくださいませ！！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
さて、ハンドトラッキングの制作講座、いよいよ今回からが本題ですね！
上腕(二の腕)をつくります！
bandicam 2022-12-08 03-44-31-166
上の動画は上腕の完成形です。
描画順や物理演算、影などの質感(ディテール)を突き詰めると、このようにリアルにぐりぐり動かせるのです。
bandicam 2022-12-08 03-57-03-231
上下左右だけでなく、手前にだって動かせちゃいます！立体感つよつよ！
しかしそこまで至るにはパーツ構成などが色々と複雑なので、
まずは下のような上腕単体の単純な変形を作ってみましょう。
bandicam 2024-11-14 06-08-21-938
何故か腕が2本ありますが、作り方を二通り紹介するために2本ご用意しました。
仮に左側の腕をA、右側の腕をBとしましょう。
AとBの作り方の違いは「原画の形」です。
まずAの腕は、このような棒状のパーツから作られています。
腕を手前に突き出すときは、このようにデフォーマを思いっきり縮めています。
……。
「腕を手前に突き出す」とは言ったものの、この画像だけではどうあがいても腕を手前に突き出している状態には見えませんね！
こういう図にしたら分かりやすいでしょうか……？
とりあえずこの講座では、こうやって腕が円形状になっている時が「腕を手前に突き出している時」だということにしておいてください。
円形状といいつつ、Aの作り方では無理やり棒を縮めているだけなので、完全な球体を作ることは難しいです。これがこの手法のデメリットです。
(↑ちょっと歪んでるよね)
半面、腕を上下左右に伸ばした状態が原画そのままの形に近いので、ディティールの制作がしやすいです。これがメリットです。
ではBの腕はどうでしょうか。
BはAと違い、円形のパーツから作られています。
なので、こちらは腕を手前に突き出している状態が原画そのままの形で、
腕を上下左右に伸ばした状態はデフォーマを思いっきり引き伸ばして作っています。
腕を手前に突き出している状態の時は綺麗な円形を作れます(メリット)が、上下左右に伸ばした状態のディティールのコントロールが難しい(デメリット)です。
A・B共にメリット・デメリットがありますので、自分が作りやすいなと思う方を選ぶと良いと思います！
ちなみに私は前回までBの手法を使用してました。
今回の講座執筆のついでにハンドトラッキングのアップデートをしようと思うので、アプデ後はAで作ってみようと思います！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
AとBの違いが分かった所で、具体的な作り方を見ていきましょう！
❶原画の用意
まずは作りたい方の原画を用意します。
Aなら白い棒、Bなら白い丸です。
……え、これだけ？
そう、これだけです！線画はこれをコピペして使いますし、
色の変更もLive2D内で出来ちゃいます。(やり方は後ほど説明します)
なんて便利な時代になったんだ(´;ω;｀)
キャンパスサイズはある程度大きめに作りました。
Aの方が[384px×1072px]、Bの方が[2000px×2000px]です。
腕や指に使うには大きすぎますが、大きすぎる分にはテクスチャアトラス制作時に縮小出来るので余裕をもっておいていいんじゃないかと思います！
お使いのペイントソフトで作れるよ！という方はそちらを使っていただいて大丈夫ですし、作れない！という方は下の配布データをお使いいただいても大丈夫です。
Aのパーツ
Bのパーツ
※↑の二つは本当に2分で作れるただの白い棒と白い丸なので、自分のモデルに取り入れていただいても大丈夫ですｗ商用もＯＫです。好きに使ってくれろ～
❷メッシュ割り
パーツが用意できましたらLive2Dに読み込み、メッシュ割りをします。
(※超絶余談なんですけど、メッシュ打ちって正式名称はメッシュ割りなんですって！書籍執筆の時にLive2D社の方に校正していただいて初めて知りましたｗｗ他にも適当に造語作って使ってる単語多そうでいやはや申し訳ねぇ……)
メッシュの割り方はこんな感じですかね！外側はある程度細かめに。内側はザックリで良いと思います。作ってて細かすぎるなor粗すぎるなと思ったら都度調整します。
※以降の工程は、A・Bで制作法が共通の部分はまとめて解説しています。
❸「乗算色」で色の変更
メッシュを割ったら、色を変えます！
ここを弄ります。
この「乗算色」という機能は、「アートメッシュの色に乗算で色を追加できる」という素晴らしいものでして、それはもう無限大の使い方が出来るのですが、今回みたいに真っ白のパーツに乗算色で色を付けることで……
bandicam 2024-11-14 09-57-24-841
自由～～～に色を変えられちゃいます！！！最高だね！！！！
更に、立ち絵か何かをガイドで読み込んでおいて、その肌色をスポイトツールで読み込むことも可能です。
乗算色のカラー部分をクリック→スポイトツールを押しながら読み込みたい色の場所までドラッグ です！
bandicam 2024-11-14 10-07-20-686
皆さんも是非ご自分のモデルの肌色を読み込んで作ってみてください！！
❹線画パーツの作成(コピペ→乗算色→拡大)
お次は線画パーツの作成です。
先程色を変えたパーツをコピペします。
分かりやすいように名前を変えましょう。私は「腕 塗り」「腕 線画」にしました。
この時大事なポイント！線画パーツは塗りパーツの下に置きましょう！
そうしましたら、一旦塗りパーツを非表示にして、線画の色を変えます。
bandicam 2024-11-14 10-27-51-292
線画の色もお好みでどうぞー！
線画の色を変えたら、塗りパーツを再度表示し、線画パーツをすこーしだけ拡大します。[Shiftキー]+[Altキー]を押しながら拡大させると比率を変えずに、かつ真ん中から拡大出来るので便利です。
するとどうでしょう！
bandicam 2024-11-14 10-32-16-113
わぁ～！！！線画が出来た～！！！！
……とここで、Aの作り方を試している方は「なんかいい感じにならないんだけど！！！！」となっているかと思います。
Aの棒パーツは縦横の比率が違うため、「[Shiftキー]+[Altキー]を押しながら拡大」のあとに更に「[Altキー]を押しながら幅を太く(もしくは狭く)」する必要があります。
bandicam 2024-11-14 10-36-54-996
線画の幅もお好みでどうぞです。お使いのモデルによって線画の太さは様々だと思うので、ご自身のモデルに合わせてくださいませ！
線画の太さは後から変更可能なので、分かんなかったら今は適当でおｋです。
❺腕の奥行き用デフォーマの作成
線画パーツが出来たらデフォーマを作ります。塗りパーツと線画パーツを[Ctrl]キーを押しながら複数選択し、「ワープデフォーマーを作成」ボタンをポチっとします。
変形の分割数やベジェ分割数などは一旦そのままで、名前は「腕 奥行き」とでもしておきましょう！
bandicam 2024-11-14 11-07-48-718
デフォーマを作成したら、デフォーマのサイズを少し大きくします。
[Ctrlキー]+[Altキー]を押しながら拡大することで、中に入っているオブジェクトに影響を与えずにデフォーマのサイズだけを変えることが出来ます！動かすときにデフォーマの線が青くなっていればOKです。
(Bの作り方の場合は更に[Shiftキー]を押すと楽かもです)
bandicam 2024-11-16 03-18-27-632
なぜこのようにデフォーマのサイズを大きくするのか。
この後腕を作りこんでいく過程で、より複雑な動きをさせるために、今作った「腕 奥行き」デフォーマの中に更に調整用デフォーマを作る可能性があります。親になる「腕 奥行き」デフォーマのサイズに余裕を持たせておくことで、中で別のデフォーマによる調整がしやすくなる、という感じです！
❻上腕X・上腕Yのパラメータ作成
パラメータの作成をすっかり忘れていたので今やります。
覚えていた人はいつのタイミングでやっても構いません。
上腕で使うパラメータはこの2つ！
それぞれのパラメータの設定値はこんな感じです。関係ないけど上腕って英語でUpper armっていうんですね。Live2Dやってるとニッチな英単語ばかり覚えていきます……。
パラメータの動きについて、先に説明してしまいます。
(完成形を頭に入れてから作ったほうが分かりやすいと思うので！)
まず、デフォルト状態(上腕X=0,上腕Y＝0)は「腕を前に突き出した状態」にします。
そして、デフォルト状態からみた方向に、腕を伸ばす形で動かします。
動画で見るとこんな感じ！
bandicam 2024-11-16 03-04-45-655
UFOキャッチャーのレバーとか、格ゲー用のコントローラーとかをイメージすると分かりやすいかもです。
(↑こういうやつ)
通常の作り方であれば、Live2Dの腕は「上げるか」「下げるか」の2択なので1パラメータで作ることが多いと思います。
bandicam 2022-12-08 04-26-26-489
しかし、今回のように360°立体的に動かしたい！と言う場合、1パラメータでは上手く行かないことが多いです。「いっぱい動かしたいときはこのまま角度を増やせばいいのだー！」とやってしまうと、ワイパーみたいな動きになってしまいます。
bandicam 2022-12-08 04-28-03-385
立体感のある腕の動きを作るには「X軸」「Y軸」に腕の動きを分けてやるのが大切なのです！
❼腕の奥行きを作る
さて、ここからAとB分岐ポイントです！
今から腕の奥行きを作るのですが、冒頭にお伝えした通り、AとBでは原画に近い腕の形が違います。Aは腕を上下左右に伸ばしたときに近く、Bは腕を前に突き出したときに近いんでしたよね。
原画に近い方の腕の形は作る必要がありません。
「じゃない方」を作ります。
Aの「じゃない方」の動きは「腕を前に突き出したとき」です。
「腕を前に突き出したとき」は、上腕X,Yの数値が0の時、でしたよね！
なので、「上腕X,上腕Y」両方のパラメータに点を打ち、両方の数値が0の時に、丸に近い形になるようにデフォーマをギュギュっと縮めます。
動画で見るとこんな感じ！
bandicam 2024-11-16 03-32-51-659
完全な正円にするのはAの場合難しいので、大体で構いません。
途中、デフォーマの中心部分をギュギュっと縮めている時は[Altキー]を押しながら動かしています。
「[Altキー]を押しながら動かすと中心から動かせる」という原理を覚えておくと、今後の変形が楽になるかと思います！
Bの場合、「じゃない方」の動きは「腕を上下左右に伸ばしたとき」です。
Aと違い、Bのじゃない方の動きは8点あります。
(↑青丸で囲んだところが全部「じゃない方」の動きです)
なので、ひとまずそのうちの1点だけ作り、あとはコピペする作戦でいきます。
先程青丸で囲んだ8点のうちどこか1点を選び、デフォーマをびょーんと伸ばしましょう。長さは適当でおｋです。
bandicam 2024-11-16 03-43-32-790
そうしたら、今作ったデフォーマの形を[Ctrlキー]+[Shiftキー]+[Cキー]でコピーし、
他の7点に[Ctrlキー]+[Shiftキー]+[Vキー]で貼り付けていきます。
bandicam 2024-11-16 03-50-23-372
[Ctrlキー]+[Shiftキー]+[Cキー]=「モデリング>フォームの編集>フォームをコピー」
[Ctrlキー]+[Shiftキー]+[Vキー]=「モデリング>フォームの編集>フォームを張り付け」でも同じことが出来ますが、この動作はめちゃくちゃ×1000多用する動作なので、ショートカットキーを覚えた方が便利です。
ここまで作れたならば、なんかびょんびょんした動きになっていると思いますｗ
bandicam 2024-11-16 03-52-03-288
❽腕の角度用デフォーマを作る(回転デフォーマ→ワープデフォーマ)
先程作ったびょんびょんした動きに角度を付けることによって、「格ゲーのコントローラー」みたいな動きが実現可能になります！
しかし、この角度の作成と言うのがくせ者でして。
腕が上下左右に伸びているときは見たままに角度を作ればいいのですが、
bandicam 2024-11-16 04-12-19-157
上腕Xもしくは上腕Yパラメータの数値が0の時、下の動画のように角度を一瞬で切り替えないといけません！
bandicam 2024-11-16 04-13-18-380
……皆さん、この動き、どこかで見たことがありませんか？
bandicam 2023-04-27 02-37-30-105
そうです。
前回の記事で解説した、「回転デフォーマをワープデフォーマーで動かす方法」です！！！！！
ここで伏線回収をするんですね～～！！！
ということで、小→親の順番に、
「腕 奥行き」デフォーマ→回転デフォーマ→ワープデフォーマ
となるようにデフォーマを作っていきます。回転デフォーマの名前は「腕 固定」
ワープデフォーマの名前は「腕 角度」とでもしておきます。
(↑階層はこんな感じよん)
回転デフォーマとワープデフォーマを只々作ればいい！という訳ではございません。
それぞれのデフォーマの中心を合わせて作る必要があります。
bandicam 2024-11-16 04-24-02-261
(↑それぞれのデフォーマを複数選択してみると、中心が揃っていることが分かります)
まずは回転デフォーマの「角度 固定」
これは簡単です。
上腕X,上腕Yの数値が0の状態で「腕 奥行き」デフォーマの親に回転デフォーマを作成すれば、自然と中心値が合うはずです。
そのままでもいいのですが、下の動画では[Ctrlキー]を押した状態で回転デフォーマの円部分の大きさを変え、線画に重なるようにしています。こうすると中心が合ってるか分かりやすいので！
Aの場合↓
bandicam 2024-11-16 04-28-13-795
Bの場合↓
bandicam 2024-11-16 04-28-50-258
次、更にその親にワープデフォーマを作りますが、恐らくこんな感じで中心がズレてしまうと思います＞＜
bandicam 2024-11-16 04-33-26-080
なので、まずは中心を分かりやすくするために、変換の分割数を「2×2」にし、
[Ctrlキー]+[Shitfキー]を押しながら、薄っすら見えている回転デフォーマの中心と揃うように動かします。
bandicam 2024-11-16 04-37-32-171
このままでもいいのですが、拡大した時にデフォーマのサイズが小さすぎて見づらいので、こちらも[Ctrlキー]+[Shftキー]+[Altキー]である程度拡大してしまいましょう。
bandicam 2024-11-16 04-40-58-556
あとは名前を変えれば、角度用のデフォーマの作成はこれでOKです！
❾腕の角度を作る
さて、あとは「腕 角度」デフォーマでこの動きを作るだけです！
bandicam 2024-11-16 04-44-36-825
※「腕 固定」デフォーマはただ腕の動きを固定するだけのデフォーマなので、何も点は打ちません。
今からどんな難しい動きを作るんだろう……とお思いのそこアナタ！
実は❾の工程は、❶～❾の全工程の中で断トツで簡単です。
まず、上腕Xと上腕Yのパラメータそれぞれに2点ずつを打ち
(※3点じゃないので注意！！)
格ゲーのコントローラーを思い出しながら、その方向にデフォーマを回転させるだけです。([Shift]キーを押しながら回転させると45°ずつ動かせるので便利です。)
bandicam 2024-11-16 04-47-50-663
これだけ。これだけです。
……と言いたいところですが、Ａの作り方の場合はあともう踏ん張り工程があります。
下の動画のように、腕を上側に伸ばしている時(上腕X0,上腕Y10)の腕を、[Shiftキー]を押しながら動かします。(※今回は[Ctrlキー]は押しちゃダメ⚠よ！！！)
親の回転デフォーマの丸が線画とピッタリ重なるところまで動かすといい感じになります。
bandicam 2024-11-16 04-52-25-615
出来たら、[Ctrlキー]+[Shiftキー]+[Cキー]でフォームをコピー→[Ctrlキー]+[Shiftキー]+[Vキー]で他の7点にも貼り付けてしまいましょう。
bandicam 2024-11-16 04-57-47-124
完成～～～～～！！！！！！
bandicam 2024-11-16 04-58-42-686
なんて美しく無駄のない動きなんでしょう；；；；
「なんでたった4点しか打ってないのに「腕 角度」デフォーマは理想の動きをしてくれるのか！？」という疑問を持たれた方も多いと思います。私も最初見たときはシンプル過ぎて目を疑いました。
しかし、この4点のうち、対角線状の点の形を比べてみると、きれーーーーーーーーーに「180°回転させた動き」になっているんです。
「ワープデフォーマを180°回転させるとどうなるか」というのは、前回の記事でお伝えしたかと思います。
中間地点は全ての点が重なって「無(限りなくサイズ0に近い状態)」になる。んでしたよね！
それにくらべ、それぞれの4隅を移動する場合は、ワープデフォーマは90°ずつしか回転しません。前回の記事で記事でお伝えした通り、90°回転させたときはワープデフォーマは少しだけ歪んで小さくなりますが、回転デフォーマがその歪みを打ち消し、単純な角度変化だけを反映させています。
bandicam 2024-11-16 05-10-05-201
以上のような原理によって、このシンプルで無駄が無く美しい動きは作られているのです。いやぁ、美しすぎて惚れ惚れしますね(´;ω;｀)
bandicam 2024-11-16 05-13-29-347
最後に、私の上腕X・上腕Yの構造の変遷を見てみましょう。
これが
こうなって
こうじゃ。
私が(´;ω;｀)←この顔文字を使いたくなるのも納得の簡略具合ですね！！
情報提供をくださったてみけるさん、まかかびさんには改めて心からの感謝をしたいです。
今回の技法をまとめたcmo3ファイルも配布します！
こちらは流用禁止です。自分で作って取り入れてみてね！
次回は、前腕作成に必要となる「角度の打消し」という技法をご紹介しようと思います。それでは～！
