Twitterでバズったモデル、全貌公開！
こんにちは。Live2D公式デザイナーチーム、Live2D Creative Studioです。
早速ですが、皆さんはこのアニメーションをご覧になったことはありますか？
君と七色のホワイトデー。何色のプレゼントが欲しいですか？💙🌈🎁#ホワイトデー #Live2D pic.twitter.com/3Gk1xmWZos
— Live2D Creative Studio (@live2dcs) March 14, 2020
こちらはCreative Studioのスタッフがホワイトデーを題材として制作したアニメーションです。
Live2Dを使用して制作しているのですが、「ここの動き、どうやって作っているんだろう…？」と気になる箇所はありませんか？
今回は制作チームから聞いた見どころや工夫した点を踏まえて、この作品に出てくる男の子「白井くん」のモデルの中身を紹介していきます。
各年代ごとにアニメーションGIFも添えて解説してみたので、是非ご覧ください！
【小学生】飴を差し出す動きのためのパラメータ、お見せします！
まずはアニメーションのはじめに登場する小学生時代の白井くんから紹介していきます！
天使すぎる笑顔に口が勝手に「かわいい～！」と言ってしまいますね！
こちらのモデルからは、飴を差し出す右腕の動きについて紹介します。
まずは使用しているパラメータをお見せします。
小学生の無邪気に飴を差し出す動きを表現するには様々な動きを組み合わせる必要があったため、右腕にはたくさんのパラメータが用意されています。
これらのパラメータは、最初に絵コンテを作成し、絵コンテ通りに動かすのに必要なパラメータをあらかじめ用意したため、後から増えていった訳ではないそうです。
中でも、手を前に出すような動きがついている「右前腕長さ」のパラメータは、立体的な変形が印象的です。
こういった可動域の広い腕を作るときは、動きをつけやすいよう細かく素材を分けるのがコツです。
特にシワごとに素材を分けるとかなり動かしやすいので、可動域を広くしたい時は試してみてください！
次は中学生のモデル紹介です。
【中学生】可愛い笑顔の白井くんですが、実は顔に秘密が…
プレゼントを差し出す笑顔が相変わらずの天使っぷりです。
中学生時代からは、白井くんの顔の秘密について紹介していきます。
顔の秘密？と思われた方、ここだけの秘密ですが…
上の画像の顔は、全て同じ原画を使用して作られているのです。驚きませんか…？
先述の通り、顔の原画は中学生～おじいちゃんまで「大学生の顔」を使用しています。
そこにしわを足したり、少し目の色を変えたり…など、年代ごとのパーツを用意したり、変形を加えて顔を作っています。
では変化の様子をパラメータでご覧ください！
こちらはそれぞれのパーツに調整用のワープデフォーマを作り変形をつけています。
原画を用意せずともパーツを変形させることで違う絵を生み出せる、というのもLive2Dならではの表現です。
顔がどんどん変わる仕組みで言えば、facerigモデルの「GAOO」ちゃんでもおなじみです。
(「・ω・)「がおー#Live2D pic.twitter.com/oZ6t247nd7
— Live2D Creative Studio (@live2dcs) June 22, 2018
では続いて高校生の白井くんを見ていきましょう！
【高校生】思春期真っ盛り！マカロンを出す動きに注目してみました
あの天使のような白井くんの笑顔から一変、冷たい目線に…！
しかししっかりプレゼントは渡し、最後は照れちゃうあたりが堪りません…！
高校生時代からは、マカロンを出す右手の動きについて紹介していきます。
ではパラメータを見てみましょう。
右手の変形は、腕の一連の動きを１つのパラメータにし、その中で一緒につけています。
腕を机の下から出したりする動きは、ここに位置や角度調整用のパラメータの動きを追加することで作られています。
この一連の動きの中でも、特に変形しているのが手です。
Live2Dをやっているユーザーさんならわかると思いますが、絵柄を保ちつつ自然な変形に仕上げるのはなかなか難しいんですよね…
というわけで、手がどんな風に作られているかさらに細かくみていきます。
手の向きが大きく変形していくところでは、指の付け根部分だけ素材を分け、動きに合わせて綺麗に変形させています。
その経過で手の甲の筋が現れるようにしたり、指を手の角度に合わせて変形させています。
絵を切り替えずに元々の素材を使って、腕の角度や動きごとに手のメッシュを変形させていき…先ほどの動きができています。
形状を作っていくのは大変ですが…変形パスやブラシ選択ツールなど便利な機能に助けてもらいつつ、根気と愛で完成させています！
構造的には難しいことをしていないので、皆さんも角度が大きく変わる手の変形、挑戦してみてはいかがでしょうか？
では次に大学生の白井くんを見ていきましょう！
【大学生】アートパス使っていますか？実はこんなところに使用されているんです！
あの高校生時代を経由したあとのこの爽やかな笑顔！とても癒されますね…！
大学生時代からは、左手のプレゼントを差し出す動きについて紹介していきます。
こちらの動きは「プレゼントを取り出す際の動き（=左手変形）」と「プレゼントを置く動き（=左手変形Y）」で作られています。
そして見てほしいのはココ！！「プレゼントを置く動き（=左手変形Y）」で動く筋の部分です！
動きが気持ちよくて見てるだけで幸せな気分になります。
では細かく見ていきましょう！
筋が出たり消えたりする動きは、Live2D Cubism 4.0をお使いの方は何となく察せる方も多いはず...
そう、アートパスで作成しております！ツールバーにあるこちらの機能ですね。
アートパスって…？と思われた方もいらっしゃると思いますので、どんな機能か少し紹介しますね。
アートパスとは、モデル上に直接線を描くことのできる機能です！
色、太さ、透明度、ブラシの質感が自由にカスタマイズでき、これらに変形を加えることでより幅の広い表現を作ることができます。
こちらではそれぞれの指の筋をアートパスで描画しています。
特に見た目が変化する人差し指、中指、薬指の筋のアートパスは動きの途中にいくつかキーを打ち、3段階で変形させています。
アートパスは変形だけでなく不透明度も調整している為、より手らしさが再現されています。
大学生では「プレゼントを置く動き」に注目してみました。
次は新入社員の白井くんです。
大学卒業後、就職した白井くんの様子はどうでしょう...？
【新入社員】原画にはない手を作成！効果的なアートパス使用例
少し疲れている様子…それでも笑顔を見せてくれる姿にときめいてしまいます。
新入社員時代からは、左手のプレゼントを出す動きについて紹介します。
ではパラメータを見ていきましょう。
こちらでは、大学生の時にも紹介したアートパスをよく使っています。
具体的にどのあたりがアートパスなのか、お見せしていきますね。
左手で使用しているアートパスを全てOFFにしてみたいと思います。
なんと、手の甲のほとんどがアートパスで作成されています。
そして以下の画像が使用した原画なのですが...
驚くことに、原画の状態では全く違う手の形状なんです。
（素材は大学生と同じ手を使っている…というのはここだけの秘密です）
ここから手のメッシュを変形させ、足りない素材をアートパスで補って完成させています。
原画では用意していない絵を再現することができる、というのもアートパスの魅力です。
では、どの部分がアートパスで描画されているのか見ていきましょう。
新入社員のモデルで最も特徴的なアートパスは「手の甲の塗り」です。
他のアートパスと比べると比較的広範囲に使用されています。
いくつか太めのアートパスを用意し、手の甲の影を削るような使い方がされています。
不透明度を変えることでぼかすような表現ができるのもアートパスならではです。
他にも大学生で紹介したような、指の付け根の線や甲の影にも使用されています。
こういった簡単な素材であればアートパスで簡単に作成できるので、原画に戻って素材を作成し直す手間が減ります。
アートパス使ってみたい！でも難しそう…と思われた方、大丈夫です。
Cubismの公開マニュアルでは、アートパスの使い方・作り方について詳しく説明しておりますので、是非参考にしながら挑戦してみてください！
※アートパスは組み込み用のモデルには使用できないので注意が必要です。
では、続いて社会人のモデルを見ていきましょう！
疲れた様子だったけど白井くん、大丈夫かな…？
【社会人】こんなプロポーズに憧れちゃう…指輪を差し出す動き
すっかり大人びた白井くん。こんな風にプロポーズされたら断れないですね…♡
「結婚しよう」
新入社員時代からは、左手のプレゼントを出す動きについて紹介します。
ではパラメータを見ていきましょう。
この動き…何度見ても本当に気持ちいいですね…！
仕組みでいえば、この手の動きも「大学生」や「新入社員」と同様に作られています。
用意した元の原画はこちらです。
この原画から、例によって手の構造を考えながら変形をさせています。
右手の小指のように影が不自然になってしまう部分はアートパスを作成して補わせています。
アートパスは本当に便利です…！
社会人時代の白井くんについての紹介は以上になります。
お次はおじさまの白井くんを紹介します！
【おじさま】こだわりまみれ！小物の動き紹介
あのプロポーズから月日が流れ…お互い歳をとりました。今年のプレゼントはなんでしょう？
おじさま時代からは、小物の動きについて紹介したいと思います。
ここまでの年代では手の動きについて大きく触れてきましたが、全年代通して小物の動きもかなりこだわっているのであわせて紹介していきます。
本編ではなかなか目立たない部分ですが…小物の動きも工夫して作られておりとても可愛いので是非ご覧ください！
小物の動きの中でも、特にこだわって制作しているものを紹介します。
まずは小学生の飴です。
動画ではあまり目立たない部分ですが、右手を変形させた時にしっかり角度がつくよう動き付けがされています。
中の飴と外袋で動きの差を付け、立体感が出るよう意識して動き付けがされています。
次に高校生のマカロンの動きです。
マカロンは小物の中でも一番色々な動きが付けられています。
箱の回転や、スライドしたときの箱の反射の光、マカロン1つ1つの動きなど細かく動き付けがされています。
箱が回転する際、縁の線が太くなるように、箱の縁にはアートパスが使用されています。
また、手に持つ用のマカロンと机に置く用のマカロンを用意し、モーション中に素材を切り替えることで動きを制御させています。
小物の動き、いかがでしたでしょうか？
些細な部分にもこだわって制作しているのが伝わると大変嬉しいです！
では、続いておじいちゃん時代の紹介です。
【おじいちゃん】こう作られていたのか、机の落ち影...！マスク用素材とフォームアニメーション
おじいちゃんになっても白井くんは素敵です。いくつ歳をとっても、こんなホワイトデーがいいですね！
腕の動きについては他の年代で紹介済みですので、おじいちゃんのモデルでは机の落ち影について紹介していきたいと思います！
乗算で落ち影を作成するのもありですが…
思い通りの色味を再現するために今回はその手を使わず、「マスク用の素材」と「クリッピング」を使って作成されています。
まず、通常用の机(影がない状態)と、影用の机(全面影色の机)の2種類、机を用意します。
そこにマスク用の素材を用意し、
マスク用の素材に、影用の机をクリッピングすれば…
マスクの範囲だけ、影用の机が表示される仕組みになっています！
この後、落ち影用の変形パラメータは作成せずに、アニメーション上で動き付けを行っています。
落ち影の動き付けはLive2D Cubism 4.0で追加された機能、
フォームアニメーション（FA）を使用して作成しています。
FA、あまり使用したことがない…という方、いるのではないでしょうか。
そんな方のために、どんな機能なのか少し紹介していきますね。
FAとは、簡単に説明するとアニメーション上で直接形状を編集できる機能です！
モデル上で動きを作らなくても、アニメーション上で好きな動きをさせることができますよ！
FAでの変形はアニメーションデータに保存されます。
モデルデータには変形の影響がないので安心してくださいね。
※組み込み用のデータでは使用できないのでご注意ください！
では、どんな風に使用されているのか見ていきましょう！
タイムラインを見てみると…ありました、「公園の机影FA」というワープデフォーマにキーを打って変形を加えています。
こちらは、先ほど用意した影用のマスクの親に設定したワープデフォーマになります。
モデル上では特に変形を加えていない状態です。
このデフォーマをFA上で変形させることで、落ち影の動きが作られています。
では、FAで動き付けをした「公園の机影FA」の動きを再生して見てみましょう。
FAでは変形を行ったタイミングでキーが打たれていくので、
この時はこんな感じの形に…という風に、簡単に思うような変形・アニメーションを作成することができます。
今回の落ち影のような、アニメーションの動きに合わせて動きをつけたいという場合にはとても便利な機能です。
他にもちょっとした破綻など、モデルに戻って調整するのが大変…という場合にも、その時その時で調整ができます。
FAはとても便利な機能なので、今回をきっかけに触ってみてくださいね！
詳しい使い方はマニュアルにも載っているので、こちらもご覧ください！
さて、白井くんの全年代のモデルを振り返ってみましたが、いかがでしたか？
こうしてみると様々な技術を使って生み出されたことがわかりましたね！
次回のnoteでも、ホワイトデーの作品についてさらに掘り下げていきます。
モーション作りのコツや、キャラクターデザインに関する秘話を紹介する予定ですので是非ご覧ください！
YouTubeチャンネルでもLive2Dで作成した映像作品を投稿していますので、こちらもよかったらチャンネル登録してくださいね！
この記事が気に入ったらサポートをしてみませんか？