Mar 19, 2017

無料で超かんたん!自分の顔でキャラを動かすAdobe Character Animatorがすごい

キャラクターを自分の顔を使って動かしてみました。
以前からLive2DとFaceRigを組み合わせる方法は有名ですが
制作素材多かったり有料だったりMac無理だったりでハードルが高いです。

今回は2015年頃にAdobeから出たCharacter Animatorが面白そうなので紹介します。
下の方に簡単な作り方も載せておくので興味がある人はぜひ作ってみてください。





Adobe Character Animatorとは

元々はAfterEffectsの一機能だったものがいつの間にやら独立してました。
現在はBeta版を無料で公開中です。
アニメーション制作を簡単にする目的の機能でアプリとして独立したあともAE形式への書き出しなどの機能を持っています。

海外ではかなり注目されていたようですが国内ではまだマイナーのようです。
JETDAISUKEさんの動画でも紹介されてます。

なにができるの?

特徴としてはリアルタイムに自分の顔を認識してイラストを動かせることです。
特にリップシンクはかなり細かく、声をベースにしているので本当に喋っているように見せることができます。


同期できる顔のパーツもかなり豊富です。
視線、まぶた、眉、口、傾き、角度(上下左右)などに対応してます。

また、ダングルというものを追加すると重力表現も可能です。
パーツの動きが増えて臨場感で出てきます。

他にもコマンドを追加すれば様々なアニメーションエフェクトを出すこともできます。

アニメ制作はもちろん、クロマキー合成を併用すればゲーム実況やSkype会議なども盛り上がりそうですね。

導入方法と使い方

ここでは簡単に導入方法と使い方を紹介します。
自分でゼロから作ろうと思うと結構大変なのでまずは既存の素材を使いまわす所からはじめると良さそうです。

1. 必要なもの


・Adobe Character Animator(公式サイトからDLします
・カメラ
・マイク(音声認識しない場合は不要)
・画像制作アプリ(Photoshop、illustratorなど)

Creator Animatorは無料ですが画像制作アプリが必要です。
できれば互換性があるAdobe製品のものを推奨します。
とはいえCLIP STUDIO PAINTなどPSDに互換性を持つアプリでもできそうです。
ただその場合、画像制作アプリ側での制御に限界かあるのでCharacter Animator側でアニメーションの設定などをいじることになります。

CLIP STUDIO PAINTで制作

2. ダウンロードとインストール


Adobe公式サイトからCharacter Animatorをダウンロードします。
ダウンロード後、ファイルをインストール。
この辺は特に難しいことはないので割愛します。

3. チュートリアル


アプリを立ち上げたらまずチュートリアルを見ましょう。
できることをタイムライン上で実演してくれます。


かがくのちからってすげー

4. PSDファイルをダウンロード


チュートリアルでイメージをつかんだら「Photoshopで新規パペット」を選択。
サンプルの素材が開きます。


タイムライン上にパペット(素材)が配置されます。
この状態でカメラとマイクが正常に繋がっていればすぐ動かすことができます。
動かない方は接続できているか試してみてください。


5. 素材を描き直す


PCローカル上にCharacter Animatorというフォルダがつくられ、プロジェクト内に「Photoshop パペット.psd」というファイル名で素材が追加されています。
今回はPhotoshopで解説します。

※他アプリで制作する場合は赤字で補足を書いてます

Photoshopで「Photoshop パペット.psd」を開きます。
輪郭のレイヤーを選択して自分のイラストに描き変えてみましょう。
直接描画しても良いし、既存の絵を差し替えることもできます。
画像は「background」レイヤー内にある輪郭を描き変えた状態です。
この時にレイヤー名やフォルダは変えてはいけません


Adobe製品以外のアプリで素材を編集する方へ:
「Chest」「Draggable」「origin」「dangle」といったレイヤーをすべて削除してください。
この状態で進めると挙動がおかしくなります。



6. Character Animatorで動作を確認する


Photoshopで輪郭を描き変えたらそのまま上書き保存します。
Character Animatorを開きます。
先ほど描いた絵が自動で同期されます。

自動で同期されるので修正とアプリの往復がとても楽

7. 画像編集を繰り返す


ふたたびPhotoshopに戻り、足りないパーツを差し替えます。
データはこまめに保存しつつCharacter Animatorで動作を確認します。

イラストが変な動きで固定されてしまった場合はカメラ出力パネル下部にある「基本姿勢を設定」ボタンをクリックしましょう。



8. 動作をチェックして完成

すべての編集が終わったら動作をチェックします。
おかしいところがあればPhotoshopに戻り修正しましょう。

いきなり萌えキャラなどに挑戦するよりも
最初はサンプルに近い絵で作る方がわかりやすいです

こちらの絵の口や目パチはデフォルトのままです。
すべての素材を描かなくても制作の仕様上は問題ありません。

Adobe製品以外のアプリで素材を編集する方へ:
おそらくイラストが空中でふわふわ浮かぶ状態になっているかと思います。
これは「固定」のレイヤーを5. の時点で削除したことで発生します。
この状態を回避するためにパペットの編集を行います。

イラスト全体をレイヤーから選択して、パネル「固定」タグをクリック。
黄色い円が出現するので固定したい箇所にドラッグ。
詳しくは下の図を参照してください。


9. 高度な編集がしたい方へ


以上が最低限の制作方法になります。
CLIP STUDIOなどでもできるとはいえ、やはりAdobe製品が無難かなと思います。
ちなみに僕が作ったミクはillustratorで制作してますが結構ハードルが高いです。
くせのあるアプリなので命名規則やグルーピングを覚える必要があります。



今回説明を省略した重力の設定や効果などは需要があればやろうかと考えてます。
とはいえ僕自身まだまだ使い方がわかってない現状です。

少しでも命名やグルーピングを間違えると挙動が変になる

まとめ

Character Animatorは落書きを最低限動かすだけならめっちゃ簡単です。
慣れれば10分ほどでできるでしょう。
まだBeta版ということで情報も少なく、これからアップデートがどんどんされていくと思いますがとても期待度が高いです。