イントロダクション
今回は『風揺れスクリプト』を使用して立ち絵の髪や服を揺れるようにして、『PSDToolKit』と併用して目パチ口パクをさせてみようという記事になります。
↑要するに、こんな感じで動く立ち絵を作成してみようという訳ですね。
ちなみに、かなり作成難易度は高いです。
これを作るには少なくとも一定レベルの『画像加工技術』とAviUtl中級者向けの『PSDToolKit』をある程度理解しているという前提条件が必要なので、総合的にはそこそこ上級者向けなんじゃないかと思います。
まあ、最大の難点は立ち絵のパーツ分けなので、そこだけクリアできればそんなに難しくはないんですけどね。
配布されているフリーの立ち絵の中には、イラスト加工が必要ないくらい細かくパーツがレイヤー分けされているものがあると思いますので、そちらを使用すれば難易度は相当に下がります。
ただ、自分好みの立ち絵を使用したいという人は、イラストによっては自分で描き足したり、色を塗ったり、パーツを分割したりといった事をしないといけないので大変だったりしますが……
頑張って下さい。
ぶっちゃけ、自分で立ち絵を描ける人は自作した方が早いかも知れません。
ともあれ、備忘録を兼ねて立ち絵を動かす方法をざっくり記述していきますので、興味のある方は読んでいって下さいませ。
宜しくお願い致します。
立ち絵の髪や服を動かすようにする手順
作成に必要なAviUtlの外部スクリプト
では、まずは必要な外部スクリプトを紹介していきます。
↑風揺れスクリプトです。これを使用する事で立ち絵の髪や服を揺らす事が可能になります。
↑PSDToolKitです。目パチ口パクなんかを立ち絵に付加する事が出来ます。
↑呼吸用のスクリプトです。立ち絵に呼吸のような動作を追加する事ができるようになりますので、必須ではありませんがお好みで使用して下さい。
以上です。まだ導入していないという方は上記の記事を参考に導入しておいて下さい。
立ち絵のパーツを分割する
これが最大の難所だと思います。
立ち絵の髪とかを個別に揺らす為には、各パーツを切り出して分割しないといけないんですよね。
私の場合は立ち絵を自作しているので最初から無駄にパーツ分割をしていますが、配布されている立ち絵の場合だと、パーツが結合している可能性が高いので、それを分解する所から始めないといけません。
で、このパーツ分割をする為にはイラスト作成ソフトが必要になるんですが、無料ソフトの中だと画像加工に長じている『GIMP』がオススメとの事です。
↑尚、私は有料の『CLIP STUDIO PAINT』を使用していますので、そっちの方でザックリ説明していく事になりますので御了承下さい。（GIMPは使った事がないので）
↑今回はサンプルとして、ある程度パーツ分割されている上記のフリー立ち絵を使用する事にします。
↑では、例としてこの立ち絵の胸の所にあるスカーフを分割してみましょう。
手順①PSDファイルをイラスト作成ソフトに読み込ませます。
手順②加工するレイヤーだけ表示させます。
他のレイヤーがあると紛らわしいので、最初の内は加工するレイヤーだけ表示した方が良いでしょう。
↑今回のサンプルの場合はこんな感じで制服が全パーツ結合されているようです。
手順③加工するレイヤーを2つコピーして増やします。
ソフトにもよると思いますが、対象のレイヤーを選択状態でキーボードの『Ctrl+C』を押した後に『Ctrl+V』を押せば対象レイヤーがコピー＆ペーストされると思います。
同じ手順で、もう一つ同じレイヤーをコピー＆ペーストして、オリジナルのレイヤーは非表示にしておきましょう。何かあった時の為にオリジナルのレイヤーは残しておいた方が無難です。
残った二つの同一のレイヤーは、それぞれ制服本体用とスカーフ用として使用します。
手順④スカーフ部分の切り取りをします。
使用ソフトにもよると思いますが、基本的には選択範囲を作成して切り取りをします。
フォトショップとかだとペンツールを使用しますが、クリスタだと↑上記のように選択範囲→折れ線選択を選択して、ひたすらスカーフの外形をペンタブでタッチしながらなぞっていく事になります。
↑こんな感じで選択範囲を作ったら、キーボードのdeleteキーを押してスカーフ部分を消します。
↑適当ですが、こんな感じで切り抜きがされます。
胴体の穴は後の工程で埋めますからご心配なく。
その後、手順③で作ったもう一つのレイヤーに移動して選択範囲を反転させ、キーボードのdeleteキーを押してスカーフ部分だけのレイヤーを作ります。
↑切り抜きが終わるとこんな感じになります。
手順⑤胴体の空洞部分を描き直します。
先程作ったスカーフ部分だけ切り抜かれた胴体部分の空洞を埋めていきましょう。
スポイトツールでベースの色を採取して、自動選択ツールあたりで空洞部分を選択し、空洞部分を塗りつぶします。
↑こんな感じで塗り潰しされますので、次に消えた線画の部分と影の部分を適当にペンタブで描き直します。面倒なら色混ぜツールを使って滲ませるだけでも良いでしょう。
↑私は面倒臭かったので適当に色混ぜツールで周囲の影を滲ませて誤魔化しました。几帳面な人は頑張ってオリジナルに近い影を新規作成して下さい。
以上で、スカーフ部分と制服本体部分が完成しましたので、同じような要領で他の揺らしたい部分をパーツごとに切り分けたり、欠けた部分を埋めていって下さい。
まあ、このモデルに関しては元々パーツ分けが細かいので、あとは大体デフォルト状態でパーツごとにアルファチャンネル付きのPNG形式で出力すれば良いと思います。
↑ってな訳で、私は上記の10パーツを個別に出力してみました。前髪とか横髪とかはもっと分割すると自然な動きをするようになりますが、サンプルなので私はスルーしました。
尚、この出力段階で注意するべき事が一つあったりします。
次の工程で使用する風揺れスクリプトですが、実はこのスクリプトは画像の大きさによって動きの精細さが決定するという特徴があるんですよね。
要するに、余白が大きい画像だと大雑把に動いて、余白が少ない画像だと細かく動く訳です。
↑スカーフで言うと、それぞれのパーツの位置がズレないように元画像のサイズで出力するとこんな風に要らない余白が生じたりします。（画像は解りやすいように背景をグリーンにしています）
この余白が大きい画像をスクリプトで揺らそうとすると非常に大雑把な動きになるので、最終的なクオリティを求めるのであれば、周囲をトリミングしたパーツを出力した方が良いです。
↑パーツの位置は後で手動で変更しないといけませんが、上記のように余白が少ない画像にトリミングしてから出力すると精細な動きをさせる事が可能となります。 （画像は解りやすいように背景をグリーンにしています）
↑実際に全く同じ設定で揺らしてみたものがこちらになりますね。左が余白が大きい画像で右が余白が少ない画像です。
腕とかの大きな部品なら余白が大きくても良いかも知れませんが、髪とか小物を揺らしたい時は周囲の余白をトリミングしてから出力する事をお薦めします。
では、全てのパーツ出力が終わったという仮定で、次はAviUtlでの作業に移りましょう。
風揺れスクリプトでパーツを揺らす
まずはAviUtl上で立ち絵を組み立てていきましょう。
同一サイズで画像を出力していれば、AviUtlのレイヤーに順番通り放り込んでいくだけで完成しますが、先述したように余白をトリミングして出力した場合は手動で調整する事になります。
なので、パーツの位置調整用のテンプレートとして大元の立ち絵の画像を用意しましょう。
↑今回のサンプルの場合はこの画像を使用します。
では、さっそく組み立てていきましょう。
手順①AviUtlを起動してテンプレート用の画像をタイムラインに放り込みます。
↑画像サイズを聞いてきますので、『読み込むファイルに合わせる』にチェックが入っている事を確認してOKボタンを押します。
レイヤー1に画像が配置されている筈ですので、オブジェクトの長さを12秒にして下さい。
今回は12秒ループの動画を作成します。
手順②各種パーツをタイムライン上に投げ込みます。
前項で出力したパーツをタイムラインのレイヤー2以降に順次投げ込み、位置を調整していきます。
↑普通に投げ込むと、トリミングした画像は元の位置とはズレた場所に出現しますので修正しましょう。
基本的にはマウスでドラッグして元画像に近い位置に移動した後、設定ダイアログで微調整する感じですね。
↑設定ダイアログのXとＹの数字の上にカーソルを合わせて左右にドラッグする事で、画像を上下左右に微調整できるようになりますので、元の絵と同じような位置に移動させて下さい。
↑最終的にはこんな感じのタイムラインになると思います。テンプレ用のレイヤー1の画像は必要なければ削除しても大丈夫です。まだ使うという方は非表示にしておいて下さい。
手順③動かすパーツに風揺れスクリプトを適用します。
作業を始める前に一つ警告しておきましょう。
この風揺れスクリプトですが、AviUtlの拡張編集がversion0.93テスト版だと不具合を起こす可能性があります。
具体的に言うと、私の環境では風揺れスクリプトを30個ほど同時起動するとエラーを吐いて強制終了してしまうんですよね。
今回のサンプルくらいのパーツ数なら問題ないと思いますが、私の立ち絵だとレイヤーを60個ほど使用していますので問答無用でAviUtlが落ちて大変でしたわ。
解決方法としてはAviUtlの拡張編集をversion0.92に落とすとエラーを吐かなくなります。
レイヤー数を多く使用する場合はversion0.92にする事を推奨いたします。
では、前置きが長くなりましたが、そろそろ風揺れスクリプトを付与していきましょう。
↑各パーツの設定ダイアログ右上にある+マークを押して出てきたリスト一覧の中から『アニメーション効果』を選択します。
↑アニメーション効果の種類を『風揺れT』に変更して、基本のパラメーターは大体こんな感じに設定します。
ちなみに、部品によってパラメーターは全部微調整をしないといけませんので、全てこのパラメーターそのまんまでは使用しないで下さい。
パーツが大きいものは『揺れ角』と『揺れ周期』の数値を大きめにして、逆にパーツが小さいものは数値を小さめにするとそれっぽく見えるような気がします。
揺れ周期の方は何秒間で揺れが一往復するかを決めるパラメーターなので、12秒のループ動画を作成する場合は『0.5』、『1』、『1.5』、『2』、『3』、『4』、『6』の数値のどれかにしておいて下さい。
あと、多くのレイヤーに対してスクリプトの種類を変更したり、パラメーターを全部変えたりするのは面倒だと思いますので、『設定の保存』をして作業の効率化を行いましょう。
↑基本設定を終えた風揺れスクリプトの設定ダイアログ上で右クリック→『設定の保存』→『現在の設定を初期値にする』を選択して下さい。
これで、この風揺れスクリプトの設定がアニメーション効果のデフォルトに設定される事になります。
以降はアニメーション効果を追加すると自動で風揺れスクリプトが最初に出てくるようになるので、あとは動かすパーツに応じてパラメーターを微調整して下さい。
↑適当ですが、私の場合はこんな感じの揺れにしてみました。
って事で、立ち絵を揺らす事が出来るようになりましたので、これをアルファチャンネル付きの動画として出力する事にします。
↑アルファチャンネル付きの動画の出力方法はこちらの記事を参考にして下さい。
まあ、別に動画として出力しなくてもシーンに入れて運用する事も出来るんですけど、私の環境だとシーンに入れるよりもアルファチャンネルの動画として運用した方が動作が軽かったので、そっちの方でやる事にしました。
↑シーンの使用方法はこちらの記事を参考にして下さい。
ちなみにアルファチャンネルの動画として出力する場合は、かなり容量を食います。
今回のサンプルだと12秒のループ動画で140MBくらいの容量になりますが、私の立ち絵とかだと12秒で1GB以上の容量を食ったりしたので、PCの容量に余裕がない場合はシーンに入れて運用した方が良いかも知れません。
では、立ち絵を揺らして動画として出力する所までは出来たという事で、次項では『PSDToolKit』と併用する方法を記述していきましょう。
PSDToolKitとの併用方法
さて、PSDToolKitとの併用方法ですが、こちらは割と簡単です。
眉、目、口、アクセサリーや感情アイコンなど、PSDToolKit上で変更する事が多いパーツ以外を全部非表示にして、先程の風揺れ動画に重ねるだけですからね。
とりあえず、サンプルという事でPSDToolKitの最小構成でやってみましょう。
手順①AviUtlを起動して新規プロジェクトを作ります。画像サイズは適当でいいですが、私は1920×1080で作成する事にします。
手順②拡張編集のタイムラインに使用するPSDファイルを放り込みます。
レイヤー7にPSDファイルを投げ込んで下さい。
手順③ キーボードの『Ctrl+W 』を押して、PSDToolKit用のウィンドウを表示させます。
↑顔のパーツ以外は全部非表示にして、タイムライン上のPSDファイルを選択状態である事を確認してから左上にある『送る』ボタンを押します。
これで表情パーツだけが残りますので、次は先程作ったアルファチャンネル付きの動画を読み込みましょう。
手順⑤アルファチャンネル付きの動画を読み込み、各種設定をします。
レイヤー6に前項で作ったアルファチャンネル付きの動画を放り込んで下さい。
↑動画の設定ダイアログから『ループ再生』と『アルファチャンネルを読み込む』にチェックを入れて下さい。
手順⑥レイヤー5にグループ制御を生成します。
↑タイムライン上のオブジェクトが何もない場所で右クリック→『メディアオブジェクトの追加』→『グループ制御』を選択して下さい。
生成されたグループ制御をレイヤー5に配置して、アニメーション効果を追加して下さい。
↑アルファチャンネル付きの動画とPSDファイルにだけ制御下に置くので、対象レイヤーを2に設定して、アニメーション効果を『呼吸』に変更して、お好みのパラメーターに調整して下さい。
尚、立ち絵の位置や拡大率なんかは、こちらのグループ制御を使って調節しないと体と表情がバラバラになってしまうので注意が必要です。
↑ここまでで、こんな感じの動きを出来るようになったと思います。
手順⑦最後にPSDToolKit用の各種設定をします。
最後の最後で申し訳ありませんが……
この辺を詳細に説明すると異常に長くなりますので、省略します。
まあ、そもそもPSDToolKitを理解して使いこなせるという前提の記事なので、読んでいる方達が各々で適切に設定できるでしょう。
字幕表示を入れたり、anmファイルを作ったり、ボイスロイドで音声作ったり、必要に応じてVoiceroidUtilの設定をしたりとか、諸々の長ったらしい何時もの設定をしてくれれば大丈夫です。
↑一応、最小構成に近いものだと、こんな感じのタイムラインになるんじゃないかと思います。
本当なら背景とかエフェクトとかのレイヤーを幾つか入れるんですが、サンプルなのでシンプルなのを目指してみました。
↑ってな訳で、完成するとこんな感じになります。
髪や服や腕なんかが動き、尚且つ目パチ口パクにも対応できる立ち絵が完成しました。
正直、かなり面倒臭い割に視覚的効果は高いとは言えないので、コストパフォーマンスは良くないと思いますが、私みたいに技術的に興味があってやってみたいという人は試してみても良いんじゃないでしょうか？
師匠達の話ではLIVE2Dで動かすよりは遥かに簡単らしいので、比較的楽に立ち絵を動かしたいという人はやってみて下さい。
では、本日は以上となります。
結構長い記事となりましたが、ここまで読んで頂いた方はありがとうございます。
お疲れ様でした。
他のAviUtl関連の記事はこちらからどうぞ。
他のAviUtlプラグイン紹介記事はこちら。
AviUtlスクリプト紹介記事はこちらです。
高成約率！ハイクオリティな動画編集オンライン講座【レバレッジエディット】
最短1ヶ月で動画編集スキルが身につく！【クリエイターズジャパン】
今回の記事作成時間＆経費＆日記
記事作成時間：約6時間
今回の記事は個人的にかなり作るのが大変でした。
途中で投げ出しそうになりましたが、2日に分けて作成した事で完成に至った感じですね。
最後の方のPSDToolKit関連の解説に関しては省略するべきか迷いましたが、まともにやると2.5倍くらい記事の分量が増えてしまうので取り止めた次第です。
う～ん。気が向いたら、PSDToolKitに関する詳しい記事でも書きましょうかね。
非常に難解なので、5～6記事に分けないと無理ですが。
一応、今でも覚え書きみたいなPSDToolKitの記事は3つあるんですが、ブログ開始初期のものだったので超適当だったりしますし。
まあ、書くネタがなくなったら考えてみましょう。
では、恒例の累計出費＆記事作成時間を発表していきますか。
お時間のある方は次項も読んでいって下さいませ。
総制作時間：約1406時間
累計支出：58,882円
本日のオススメ商品『南極料理人』！！！
今回ご紹介する商品は、私の姉弟子オススメの邦画『南極料理人』です。
2009年に公開された実写映画ですね。
8人の南極越冬隊の日常を描いた作品で、個人的な感想としてはドラマの孤独のグルメとかと似たようなベクトルの映画な気がします。
内容としては、同僚が怪我をして欠員が出た事で、半ば強制的に南極送りにされた料理人の主人公が他の隊員達と交流を深めていく様を見続けるだけなので、退屈な人には退屈かも知れません。
特にオチもなければヤマもないですからね。
終盤あたりに南極で遭難でもするのかと思ってましたが、最後まで普通の日常を送って終わりますので、洋画にありがちなカタルシス的なものはないです。
とはいえ、何か不思議な魅力のある映画でして。
劇的に面白い訳ではないのですが、南極という隔離された世界で勝手気ままに生きるオッサン達を見ていると、何か癒されるものを感じるんですよね。
見ていてあんまりストレスがないので気が付くと2回目、3回目とリピート再生してしまうような不思議な作品だったりします。
料理の描写も非常に美味しそうなので、視聴していると私もオニギリとかラーメンを食べたくなってきてしまいます。
個人的には名作だと思っていますので、興味のある方は視聴してみては如何でしょう？
↑U-NEXTあたりにトライアル登録すれば無料で1ヶ月ほど視聴できますので、興味のある方は見てみるのもいいと思いますよ。