いつ…動くぞ!?

はい、そういうわけでございまして。
12月に入りましたねー。

12月に入っても、ここ沖縄は25度超えの毎日が続いております。
冬休みドコに旅行に行こうかしら、とお悩みのみなさま、半袖で旅行したくなったら沖縄へ是非どうぞ。

本日もそんな夏気分の沖縄より、今年最後の新技術挑戦「VTuber編」の続きをお送りします。

とりあえずテンプレートを動かしてみよう

前回はツールを見つけるところまでお話ししましたね。

有名な「FaceRig」がWindows専用でしたので、
Macでも大丈夫な「Adobe Character Animator」を使いましょう、というお話でした。

で、早速「Adobe Character Animator」の「最初のチュートリアル」を見てみたのですが……。

どちらかと言うと「こんなことができますよ」という紹介動画の要素が強く、
何から始めれば良いのか、という部分は残念ながらイマイチわかりませんでした。

まあ、やってみろってことかしらね。
習うより慣れよって、よく言うしね。

では、テンプレートを開いて、実際の画面の雰囲気を見てみましょうか。
最初のテンプレート、その名も「うつろな顔テンプレート」、オープン!

おおう!?

勝手にカメラが立ち上がったわ!?
そして「うつろな顔」がふたつも表示されているわ!?

……右上の方はそっとしておいていただいて。

テンプレートを開くと、あらかじめ「キャラクター」が表示されています。
そのままでもなんとなくこちらと連動して動くのですが、しっかりと動作をさせるためには、
右上の「カメラとマイクパネル」から「基本姿勢を設定ボタン」を押して、自分の顔情報とリンクさせます。

この画面は、リンクができた状態です。
ワタシの顔に赤いガイド線が表示されていますね。

では、ちょっと動いてみましょうか。

右側に身体を倒して、「にー」。


※本人はいたって真面目にやっています

左側に身体を倒して、「あー」。


※繰り返しますが本人はいたって真面目にやっています

おお……超リンクしてる。

アレコレと動いてみましたが、
傾けば傾きますし。
近寄れば拡大しますし。
瞬きすれば瞬きしますし。
口を動かせば口が動きますし。
まさに自由自在です。音声にも反応しますので、マスクしていても喋れば口が動きます。

ただ、髪の毛とかの動きも拾ってしまうので、
右上のうつろな顔のように頭にタオルを巻いてやるのが良いかもしれませんね。

「Adobe Photoshop」との連携

こちらのテンプレートを立ち上げると、裏側で同時に「Adobe Photoshop」が立ち上がります。

中身はこのうつろな顔のイラストが入っていて、
よく見ると顔の各パーツがレイヤー※毎に整理整頓されています。


(※レイヤーとは、グラフィックツールでは一般的な「透明フィルム」のような仕組みのことです。昔OHP(オーバーヘッドプロジェクタ)なんて機械がありましたね、ああいうイメージです。ヤングなみなさまはお父さんやお母さんに聞いてみよう!)

このPhotoshopデータを読み込んで、アニメーションとして動かしているようです。
さすがAdobe社ツール同士、連携はバッチリですね。

では、Photoshopで新しく画像を作って、読み込ませてみましょうか。
用意した画像は、こちら。

RPAシリーズからスッカリおなじみになったコロボ君です。
今回はこのコロボ君に動いてもらうことにしましょう。

そうそう、ここで少しだけ注意点を。

【注意点】
Photoshopの画像は何でも良いというわけではなく、作成のルールが決まっているようです。

画像サイズ:3000ピクセル x 3000ピクセル
レイヤーの構成:
「キャラクターフォルダ」の下に「Head」と「Body」のフォルダを配置。
さらに「Headフォルダ」の中に、以下のように各レイヤーを配置。

Right Eye
−Right Pupil(瞳)
−Right Blink(瞬き)
−Right Eyeball(目)
などなど……。

Character Animator側で、どのレイヤーをどうコントロールするかという紐付けを行うのではなく、
Photoshop側で、決まった名前のフォルダやレイヤーを用意しておくと、自動的に紐付けが行われます。

ではでは、最初は「瞬き」するためのパーツ(Right Blink)だけ用意してみましょう。

こんな感じ。ぱちっと。

準備ができたらCharacter Animatorに戻って、Photoshopファイルを読み込みます。

シーンを作成してみよう

……が。どうやらこれだけ読み込んでも動かせないようです。
先に「シーン」を作成します。


シーンとは
シーンには、パペット、オーディオファイルおよび録画されたテイクが含まれています。シーンパネルでシーンのコンテンツを表示できます。適切に表示されるようにパネルのコンテンツをパンしてズームすることもできます。(アドビ先生ヘルプより


どうやらキャラクターのことは「パペット」と呼ぶようです。
では、新規シーンを作成。

シーンができました。
その上で、コロボ君のPSDファイル(Photoshopファイル)を読み込み。

読み込みができました。
この状態ではシーンの中にパペットが含まれていないので、画面上に表示が行われません。

パペットを「ドラッグ&ドロップ」して、シーンの中に入れます。
「プロジェクトパネル」の中で直接グイッとしてOKです。

パペットがシーンの中に入ると、各パネルがアクティブになります。

基本姿勢を設定する……までもないのですが、一応ポチッとな。
コロボ君がこちらにあわせて左右に揺れるようになりました。

では、最後に「瞬き」をして終了です。
行きますよー。

瞬きー!

おおー!コロボ君も瞬きー!

今回はここまで!

「Adobe Character Animator」結構順調に動いているような気がします。
意外にカンタン。あくまでも「今のところ」ですが。

とりあえず、動きそうなパーツを分解してPhotoshopデータを作ることが必要ですね。
次回までにその作業をやって、今度は各パーツが動く状態で設定を見ていくことにしましょう。

コロボ君VTuber化計画。次回もお楽しみに!

0