【アナログ透明水彩絵が動く!】Live2Dでキャラに命が吹き込まれました

その他雑記

こんにちは。ホネ山です。
今日は前々からやってみたいと思っていたことを成し遂げました!成し遂げました!!

アナログ絵だってLive2Dで動かしたい!

Live2D、あのCGがぬるぬる動く凄い技術。
ホネ山はそれにすごく興味がございました。

自分の絵を動かしたい!アナログだってスキャンすればデジタルデータになるのでできるはず!
そんな思いを抱えて試作品を作りました。

ということで、かんたんなミニキャラだったら問題なく動かせることが分かって
次は自分のキャラを動かすぞ~と思いましたが
……ここまで1年経ちました(ウサギを動かしたのが2021年5月)

ちょっと他に優先したい記事がいろいろ積み重なり、気づいたらこんな時期に。
でも重い腰を上げて作りました!
こちらになります!

できるじゃん!アナログでも十分ぬるぬる動くじゃん!(画面の中限定ですが)

特にLive2Dで動きをどんどんつけていって平面絵が動き出したときには
キャラに命が吹き込まれた!!と感動を覚えるほどでした!

この高揚感!自分のキャラ生きている!という気持ちを味わってほしい!
ということで、動画を作るまでに使ったソフトとどんなことをやったのかについて、まとめて参ります!

まずは使ったソフト紹介

動画完成まで結構いろいろなソフトを使ったので、その紹介とどんなことやるソフトなのかについて説明してまいります。

画像加工ソフト(紙に描いた絵をデータ化する)

画像をスキャンしてデジタルデータに変換するのに必要です。
Photoshopかクリスタが良く使われているようですね。
Photoshopだと切り抜きにかかる時間が大幅短縮されますが、料金体系がサブスクなので月額がかかります。
(フォトプランで年間12000円ぐらい。1年契約)
そんなに量産したり急いで作る必要がなければ、クリスタで十分だと思います!

ホネはPhotoshop契約しているので(絵の具検索用データでPhotoshopにしかない機能を使っているため)Photoshopで切り抜きました。

イラスト マンガ制作アプリ CLIP STUDIO PAINT(クリスタ)
クリップスタジオペイントは、イラスト・漫画・アニメーションなど作品制作に幅広く使えるPCソフト/スマホ・タブレットアプリです。無料体験版を今すぐ試せます

Live2D cubism(キャラに動きをつける)

今回のメインソフト。
デジタル化された素材を変形させ、動きをつけていくのに必要なソフトです。
42日間Pro版の機能が使え、以降フリー版になります。
フリー版でもある程度の動きはつけられます。
自分の作ったモデルはフリー版で十分動く範囲だった……と思います!

Live2D Cubism Editor ダウンロード- FREE版・PRO版・トライアル版(無料) - Live2D Cubism
Live2D Cubism Editor FREE版・PRO版・トライアル版(無料)をダウンロードできます。使用許諾契約をお読みいただき、同意してからご利用ください。

Vtube Studio(実際にキャラを動かす)

私も最初勘違いしていたのですが、Live2Dでポーズ作りまで持っていくわけではなく、
実際モデルを動かすのに、大抵の方はモーションキャプチャソフトを使っているようです。
(一応機能はあるので作れるのですが、一時的なポーズを作る機能のようです)

このソフトを使うと
WEBカメラの前で動く・表情を変える→実際のLive2Dモデルも表情や動きが追従する
と、簡単に自然な動きを作ることが出来るというわけです。
中に入って演じている時はまるで着ぐるみを着て動きまくっているかのようですw

いくつかあるのですが、私はVtube Studioを使いました。(ネットで解説も多く、比較的簡単らしいため)

無料版だとウォーターマーク(ゆるいキャラが動く)がつき、商用利用できないため、
ホネは1800円ぐらい払い、有料ライセンスにしました。

3000円ほど払うとスマホと連動するみたいですが、今回はそこまではしなくていいかなと思いました。

Steam:VTube Studio
VTube Studio is all you'll ever need to become a Live2D VTuber, with innovative features such as pinning props to your model and many more still to come.

WEBカメラ

Vtube StudioでLive2Dモデルを動かすために、WEBカメラの機能が必要です。

ノートPCで作業されている方は標準搭載だと思いますが、自分はデスクトップPCだったので、手持ちの会議用WEBカメラを使っています。

さっきも書きましたが、Vtube Studioに3000円ほど払ってアドオンを購入すると、スマホと連動する機能が追加されるので、WEBカメラを持っていない方は、購入するよりはこちらの方が安上がりになると思います。

OBS STUDIO(複数ソフトの画面を組み合わせて録画・配信する)

まだソフトあるの?て感じですが、自分のやりたかった「画面を見せながら右下でLive2Dのキャラが動いている」のを表現するには、Windowsの標準録画機能ではできませんでした。

配信をするための総合ソフト(録画もできるよ!)って感じの機能で。
これを使えばPhotoshopの画像とVtube Studioの画像を組み合わせることが出来て、
お絵描きしながらキャラを動かすことが出来る
というわけです!

ということでこのソフトも必要です。ネットに解説がたくさんあります。

ダウンロード | OBS

動画編集ソフト(動画としてBGMつけたり仕上げる)

最後にカットしたり、BGM付けたり、静止画を挟んだり、テロップを入れたりする動画編集ソフトです。
使い慣れたものがある方は、それを使えばいいと思います。

ホネはフリーソフトのDaVinci Resolveを使っています。
有料ソフトに引けを取らない超高性能で、カラーの調整が細かく利くので、水彩動画を作るときはお世話になっています。なんで無料なんだろう。。。

DaVinci Resolve 18 | Blackmagic Design
革命的な新ツールを搭載。編集、カラーコレクション、プロフェッショナルなオーディオ・ポストプロダクションを単一のアプリケーションで実現できます。

音声合成ソフト

こちらは必須ではないですが、キャラに声をつけたい方はいろいろ探すといいと思います。

今回のモデル(丸い帽子のニヨン君)はVOICEVOXというソフトの四国めたんさんの声をピッチ変更して使っています。

VOICEVOX | 無料で使える中品質なテキスト読み上げソフトウェア
無料で使える中品質なテキスト読み上げソフトウェア

合成音声ソフトはたくさん種類があるので、
キャラにちょうどいい声を当てるためには結構探す必要がございます。
私はゆうぷろさんのチャンネルで最新情報を得ています。

ゆうぷろ / YuuPro
合成音声のキャラたちによる解説系のチャンネルです。 「これから合成音声の動画を作ってみたい!」 「ゆっくり以外の合成音声キャラも見てみたい!」 「YouTubeでもゆっくり以外の声を流行らせてみたい!」 と思っている方に向けてお役に立ちそうな情報を発信していきます。 This channel introduces a...

作成手順1:下絵を描く

ソフト紹介でお腹一杯気味ですがw、ここからが本番です!作っていきます!

まずモデルの絵を描く

まずどんなモデルにするかを考えて下絵を用意しました。

手のポーズ無しでバストアップにしたのは、初心者なので動きをつけるだけでお腹いっぱいになると思ったからです。

が、今考えると手有りで腰まで作っておいた方が使い勝手はよかったので反省しています。
(Vtube Studioにアップになったり引きになったりする機能があり、引きになる際にバストアップだと胸で画像が切れて面白くないため)
今から作る方は顔しか写さなくても腰までつくっておくことをお勧めします。

パーツ分けする

次は出来た下絵をもとにパーツ分けしていきます。
今回はディープブリザードさんのYoutube講座を元にモデルを作ってまいりますので、
パーツ分けも大体サンプルPSDと同じように分ければOKです。

自分はちょっと横着して、もっとアバウトにやってしまいました。

「はじめてのLive2D」用教材データ - ディープブリザード修練所 - BOOTH
「はじめてのLive2D」講座動画用教材です。 講座動画はこちら 第1部 第2部 第3部 ※DL前にご一読ください※ このPSDファイルは「初めてのLive2D」を学ぶためにのみ使用を許可しています。 著作権はディープブリザードに帰属します。 また以下のことを禁止します ・二次配布(無償・有償問わず) ・商用利用...

下絵にトレペを重ね、ペンで清書する
→各パーツをトレペにバラす(左右共通のパーツは上手く描けた方を、後でPCで反転する)

って感じで作りました。
一応表情差分も作りましたが、今のところにっこり顔以外使っていません
(そのうちバージョンアップと称して投入するかもしれません)

トレペの資料がこちら。結構適当ですね。

そして、こちらがPCの画像編集ソフトでスキャン&修正して
左右対象にしたパーツ達です。
反転コピペにしたことでぐんとクオリティアップしているように見えます!

やはり左右対称にしたほうが見栄えは綺麗ですし、動きをつける時に楽できると思ったので、
多少面倒でもきっちり行いました。

これを水彩紙に印刷して、塗っていきます。
(水彩紙に印刷できるプリンターをお持ちでない場合は、普通の紙に印刷してトレス台でトレスすると同じことが出来ます)

作成手順2:絵の具で塗る

お待ちかね、塗りの時間です。
バラバラにパーツ分けするとどうやって塗ったらいいか見失う可能性が高いので、
全部組み合わせた完成系(図右)も同時に塗っていきます。
完成系を塗る→パーツを同じように塗るの順番で塗っていけば、影の形を見失うことはないと思います。

紙はボッキングフォード極細を使っています。
実はきれいに作るために紙選びは結構考える必要がある気がします。

理由として、Live2Dは「既存の絵のデータを変形して動きをつける:仕組みなので、
紙目が目立つ紙(粗目の紙やキャンソン系みたいに規則正しい目の紙)だと
動いたときに紙目も一緒に変形されることになり、美しくならないと考えています。
(実際粗目で作ったことがないのですが、理屈上紙目が変形されるとちょっと困るなぁと)
個人的には紙目の目立たない細目の紙で作ることをお勧めしています。

ここでいい感じに組み合わせられるか心配になってきましたので、
スキャンして仮組みをしてみました。
大体パーツ毎に切り取って、レイヤーを重ねて合わせてみます。


左がパーツの仮組、右がお手本絵ですが、特にこれといった問題なさそうですね!

こちらが塗り終わった図です
・画像編集ソフトで切り取りやすいように、いつもよりも線を太めで書いています。
・パーツを組み合わせたときに汚くならないように、端まできっちり塗るようにしました。
・右のお手本は途中で感を掴んできたので、完成させませんでしたw

今後悔していること

目と眉の間はもうちょっと離して塗ればよかったです。目を閉じるときに瞼をぐっと下に変形させるので、水彩紙の目をめっちゃ伸ばすことになるんですよね。

そして落ち影用のパーツ素材も追加。
スクリーントーンのように影の形に切り抜いて使いましたが正直影は別パーツにしなくてよかったです
(編集がめんどくさくなりましたw)

これらの素材を、画像編集ソフトで切り抜いてまいります!

作成手順03:画像編集ソフトでの切り抜き&組み合わせ

さあ、めんどくさい作業の1つ切り抜きです。
でもここできれいに切り抜いておかないと動かしたときに余計な白い紙の部分が入ってきて汚いので、

クリスタの場合は投げ縄などで大まかに切り抜く→キワの部分を消しゴムで消していくかなと思います。

Photoshop(最新)の場合は「オブジェクト選択ツール」で一発で切り抜けました!
AIの力凄いです!

また、この段階で表情もバラバラにしていきます。

口は閉じたパーツ(実質上唇)と開いたパーツ(実質下唇)に分けます。そうしないと開閉できないためです。
自分は笑顔の表情差分から口だけ持ってきました。

まぶたの下と下まぶたの上は、主線ギリギリで切り取るようにします。これも開閉のためです。

(上でも書きましたが)上まぶたの上は肉多めに切り取る方が美しいです。まぶたを閉じた時に紙が沢山引っ張られるためです。

帽子が模様有りと無しの2種類なのは、こういう理由があるからです。

切り抜いた画像を重ねて組み合わせていきます。
影パーツの貼り付けもこの段階でやりました。

そんな感じで、モデルが出来ました!
下絵と比べると大幅にパワーアップしていますね!

作成手順4:Live2Dで動きをつける

ここまでくれば元はアナログと言えどデジタルデータされています
後はふつーのLive2D講座を見てば動かせます。
(このページで動きまで説明するといつまでたっても記事が完成しなくなりますw)

自分はディープブリザードさんの講座を見て、講座通りに作ったら出来上がりました!
ということでこの動画を見て、手を動かせば大丈夫です!

まずは目と口の表情を動かす編

この動画1まで読んで動かしたのがこちら。
まだ顔がぎょろっとしていますが、水彩絵が動き始めました

次は顔と体を縦、横、傾き(XYZ軸)の3方向に動かす編


2の顔のZ(傾き),X(横)軸まで作った動画がこちら。大分動くようにはなりましたが、ちょっとぎこちないです。

最後に髪やアクセサリーを揺らす効果や仕上げの解説

計3本を見終わるころには、あなたのLive2Dモデルが完成していると思います!
早い方だと1日、ゆっくりやって3~4日あれば十分できると思います!

作成手順5:Vtube studioで動きを録画する

上記の動画講座3の途中からVtube studioの説明に入りますが、
講座内容通りに設定すれば、あとはWEBカメラの前で動いて表情を取るだけ!
簡単に動いてくれます!

講座3まで終わってVtube Studioで撮ったのがこちら。

手順6:背景を用意する

これで完成でもいいんですが、どうせなら背景が欲しい!水彩画が動いている感をもっと出したい!
と思いまして、背景を用意することにしました。

用意するのは部屋の背景
あおり俯瞰なしの構図で描くことで、モデルときれいに重なります。
(「Vtuber 背景」でググると、どういう背景を描けばいいかが分かります)

自分はunityであらかじめキャラクターの部屋の簡単な3D設定を作っていたので、
これをアタリにして下書きを作り、塗りました。

こんな感じで下書きを描いて(各モチーフの説明は冒頭の動画内で解説していますw)

塗り終わったらこんな感じ。あれ…下書きのほうがいいような気がするぞ?

と思いましたが、実際にキャラを合わせてみるとなかなか合っています!
一枚の水彩画になりました。しかもぬるぬると動きます。

手順7:OBS STUDIOで録画する

ここまでくればあと一息!次は録画の準備です。

ここら辺はうちで解説しても何とも~なので、解説サイトを紹介いたします。
ホント、この手順通りにやれば録画できます!

VTube Studio + OBSの設定ガイド。アバターを映して一瞬で背景透過できます
VTube StudioのアバターをOBS Studio(以下OBS)に映すための設定方法について見ていきましょう。設定の大きな流れは、 VTube Studioで背景設定を行う。 OBSでVTube Studioの画面を取り込む設
【OBS Studio】5分で出来るダウンロードから画面録画までを簡単解説 | 株式会社アルタのごった煮ブログ
オンライン配信のサポートをさせていただいている、ぞえです。 突然ですが、パソコンの画面を録画をする際に何を使用しているでしょうか?画面録画自体はWindows10標準搭載の「ゲー...

自分の動画の場合、前半(ニヨン君がしゃべっている部分)はVtube StudioだけをOBSに繋いでポーズをとって録画、
後半(お部屋解説)はPhotoshopとVtube studioを同時に繋いで開設しながら録画をしました。

この時点ではBGMやキャラの声は入っていません。

手順8:キャラの声を作る(飛ばしてOK)

キャラの声を作るために、VOICEVOXを使います。
こちらもとても詳しい動画の解説があるので基本的な使い方は飛ばします。

自分の場合は女キャラの声を少年キャラに当てて使っているので、ピッチを変更して少年声にしています。
ピッチ変更ソフトはAudacityを使っていますが、ピッチが変更できれば何でもいいと思います。

窓の杜
「Audacity」無料の音声編集ソフト
【Audacity】音楽ファイルのピッチ変更する方法
Audacityを使用して、音楽ファイルのピッチを変更する方法について簡単に紹介します。 ピッチの変更とは?

手順9:動画編集をする

最後は動画編集です。

一応DaVinci Resolveの使い方を貼っておきますが、ここは正直やりたいことを調べながら進めていくところになります。
下の解説サイトだけだとちょっと足りないかもしれないので、調べてみてください。

やったことはこんな感じです!
・録画したビデオファイルのいらない部分をカットする
・BGMをつける
・声を当てる
・テロップをつける
・出来たファイルを書き出しする

【初心者向け】DaVinci Resolve の使い方を解説!
【初心者向け】DaVinci Resolve の使い方を解説!

やっと公開!

お疲れ様です!TwitterやYouTubeにアップしたら終了です!

ここまで長かった。本当に感慨深いです。

終わって

いや~、工程を振り返ると絵を描く以外にやることがたくさんあり、とても長かったですが
それ以上に「自分のキャラが動いて命を吹き込まれた」ことに感動し、そのテンションで最後まで作業できました!!

・オリキャラ(看板娘、看板息子がいる)
・動画やってみたい
・自分のキャラ動かしたい

という方は、是非試してみてください!

めっちゃ!めっちゃ楽しいぞおおおおおおおお!!!!

ということで、出来たモデルはメイキング動画作るときなどにしっかり使いまわしていこうと思います。
もう1キャラ作りたいなぁ。。。

タイトルとURLをコピーしました