Live2D Creative Awardに投稿したアニメーションのメモ

自己紹介

石田といいます。主にTwitterでLive2D作品やイラストを投稿している高校一年生です。従ってイラスト自作勢。ソフトを使い始めて半年くらい。

twitter.com

今回二つ投稿しましたがクリスマスのやつの方が技術的なところがしっかりしているのでそっちを紹介します。

動画はこれ

https://youtu.be/zQTbt7eSVTc

技術まわりの解説

見どころ…というか面白みのあるシーンを作らなきゃね。

まずは後ろに回していた手を返して花束を差し出す所。デッサン力がないと腕が逆方向に曲がっているように見えてしまうので難しい。

f:id:segu_ishida:20191122105619p:plain

f:id:segu_ishida:20191122105611p:plain

f:id:segu_ishida:20191122105606p:plain

f:id:segu_ishida:20191122105600p:plain

f:id:segu_ishida:20191122105557p:plain

f:id:segu_ishida:20191122105555p:plain

f:id:segu_ishida:20191122105514p:plain

各キーに設定している動き。よーく見ると描画順が失敗している所はあるけど離れてみれば気づかないからいいや

f:id:segu_ishida:20191122105627p:plain

パーツ分けはこのように。(レイヤーなんちゃらというのは指です)なんかいらない花束のパーツが残っている

人差し指~小指は一つのデフォーマで動かします。各パーツのカリングをoffにしてデフォーマを裏返すことで面が見えなくなる表現をしています。この方法はたいてい裏側のパーツも作って同時に動かしますが、今回は花束で隠れるので無くていいです。

腕を曲げた時のしわを差分で付けています。腕の動きに合わせて変形・フェードアウトさせています。

パーツは腕をまっすぐ横におろした状態で描きました。差分としてしわと手の甲パーツを入れた

次は時計を見るシーン。秒針とハイライトが動きます

f:id:segu_ishida:20191122105635p:plain

f:id:segu_ishida:20191122105638p:plain

f:id:segu_ishida:20191122105645p:plain

石田がローマ字入力なのは五文字のほうが収まりがいいからです。

硬いものはできるだけメッシュをシンプルに割るノウハウ。お花屋さんのカットも一枚絵ですがあれは流石に分けた方が良かった。

見ての通り文字盤パーツはまっすぐ見た状態で作り、デフォーマで変形しています。秒針は拡張補間を使いたかったけど中古のノートPCしか持ってないからCubism4が使えないのです。

時計の針はたいていカクっとした動きをするのでAnimateor上のグラフエディタをいじります。

f:id:segu_ishida:20191122114148p:plain

ハイライトは分けて時計の上部分パーツにクリッピング。その上から文字盤と輪郭線を載せています。 文字盤も文字盤フチという丸いパーツにクリッピングして沈んでるように見せてるね すべて平面の硬いパーツなのでメッシュは四角のままパースをつけています。(変形したら困る)

次。もはや常識になりつつある横向き変形。おれ横向きできるからすごいぞー!とか言ってらんない

f:id:segu_ishida:20191122114553p:plain

正面向きで描いてます。まず下書きが四枚(反転で済むので実質二枚)。顔がシンプル…正面がシンプルだから横もシンプルにしなきゃなーと思っていたのですが角度で形を変えれるのが2Dの強みだから横向いたらリアルになるのもそのうち試してみたいですね。顔に当たってる光は分けてません。その代わりメッシュを光に沿って割っています。

あと、実はこのモデル正面向いた時だけこうなります。

f:id:segu_ishida:20191122115208p:plain

何故かというと彼の髪型を正面でも横でもほぼ形が変わらない2Dヘアにしたため左向いた途端切り替わるからなんですが、今見ても解決策が思い浮かばないね…どうしても点滅するようになってしまう。動かしていれば気づかない(二回目)のでこれで。

f:id:segu_ishida:20191122120158p:plain

キー多めだね

方法としては顔を縦に二分割するタイプのやつです。(差分ナシ)前にイクマという片目隠れてる人のモデル(nizimaで買えます)を作りましたがアレは二分割した顔パーツをそれぞれ目の前に出していたのでキーは少ないけどかなり描画順がせわしなかった。というか描画順めちゃ苦手だから耳が微妙。笠間(閉じていた傘を開く動きをするモデル。nizimaで見れます)なんかもキー少なかったはず。片側しか向かないけど

横髪があると耳のつなぎ目を隠せるので楽ですがこのモデルには無いので輪郭を隠すパーツを入れました。後になって顔の横の輪郭を下げるとチカチカしない上にパーツ追加する必要が無い事を発見。こめかみ辺りに線を引かない必要があるからそこだけ注意。

ちなみにキーは少ない方が後から調整しやすいのでいいです

パーツ分けざっくり

f:id:segu_ishida:20191126131554p:plain

出来れば目の一部が鼻柱で隠れるようにしたいのですがここはひとまず目自体を変形してそれっぽくやるのがメジャーらしいのでそうしました。今思ったけど鼻パーツを上に長くとって隠すのが良さそう(厚塗りは出来ない)

f:id:segu_ishida:20191122121459p:plain

輪郭パーツを二種類(両方向で四種類)用意しましたがクリッピング使うほうが滑らかかな アズレンのやつが多分そう。あれはちゃんと横向きの状態でも顔Zを付けている辺りプロ意識!(横を向くとY軸とZ軸が2D上で入れ替わるのでよく分からなくなってそのままにするパターンが自分ではほとんど)

 

顔にグラデーションかかってるのに口の中を唇で隠す方法を採用したところ案の定つなぎ目が見える事態に。

f:id:segu_ishida:20191122122536p:plain

f:id:segu_ishida:20191122122540p:plain

加算パーツをクリッピング。筋肉は裏切らない。

基本的に口は唇を薄ーくとって口の中自体を変形したほうがいいです。SDK用に出力したらはみ出してる!なんてことも無くなるし。(後のモデルはその方法で作りました)

今見ると映らない部分は地獄みたいに雑でした。アニメーション用だからいいって公式が言ってた このスクショでも奥側の顔パーツが見えてしまっているので非表示にするなど必要。

横向きの方法はいくつかありますが、自分が知ってるのは

  1. さっき言ってた縦割り型
  2. 輪郭変形型

 1は男性とか横顔のシルエットが複雑なキャラクター向き。デメリットはやはり描画順とグラデーションかかってるとやりにくい点。

2はデフォルメ顔向き。パーツが少なくて済む?デメリットはキーが多くなりがち。無理やり少なく取ると斜めの止め絵が残念な感じになります。

横向きの口開閉で更にシルエットが変わるやつを見たことがありますがどうやるんだかサッパリ分かりません。唇パーツを入れてるのかね。

あと揺れもの。これも常識だけど

f:id:segu_ishida:20191122133555p:plain

f:id:segu_ishida:20191122133611p:plain

f:id:segu_ishida:20191122133615p:plain

先っぽの小さい揺れパラメータと

f:id:segu_ishida:20191122133621p:plain

デフォーマで大きい揺れパラメータを作成。なぜパラメータが二つ必要かというと行きと帰りで曲がる方向が違うからです。(この画像だと分かりづらいね)

背景は同モデル内に入っていて玉ボケした光二枚と背景の三パーツをいい感じに動かしています。

 

ラストの字もLive2Dだよ

f:id:segu_ishida:20191122135646p:plain

二重に囲まないと周りも変形してしまうので注意。

どうでもいい話

クリスマスに投稿しよ~とか思ってたけど一本じゃ不安だったのでAwardに投稿せんと11月に終わらせてしまった。

ストーリーとしてはどっかで待ち合わせしてて折角のクリスマス(イブ)だから花束買ってって驚かせちゃお!と思ったら向こうも同じこと考えてた!ワハハ!という話です。(女の子を描きたくなかったので両方イケメンです)名前はコート着てる方が五反田で着てないのが目黒です。隣駅。最後は抱き合うシーンを絵コンテに描きましたが描画順の関係でそういうのが一番難しかったのでカメラ移動で見るなー!という事にしました。カメラというかモデル自体を移動しているので背景と同時に動かすのが微妙にめんどくさい。あの背景の黒い部分背景色だし長いシーンが出力できなかったから二つに分けて撮った

あと計画性がないだけかもしれませんがいざ作ってみると背景に別作品のキャラ写りこみ~みたいな洒落たことができませんでした。(余地はあるけど) 次は…やりたい…

そんなわけで解説でした。よいクリスマスをお過ごし下さい。