前回 Adobe Character Animator で作成したパペットの動画を掲載しましたが、今回は僕がパペット作成で得られた知見をここにまとめます。

初めに

この記事は Adobe Character Animator CC Beta6 を元に作成しています。

この記事のスタンスとしては、基本的には 「 自分で触ってみて分かりにくかった所のメモ 」 という感じになります。Character Animator の全ての機能を使用したわけではありませんし、取説を作れる程の気力は無いのでご了承ください。

また、ソフトウエアアップデートによる情報の老朽化・思い込みによる間違い・独自用語の使用などが存在すると思います。指摘されれば修正するかもしれませんが、その様な事が有る事もご了承ください。

公式の取説ではよく分からない部分を補う事が出来れば幸いです。

公式情報はこちら
Adobe Character Animator CC (ベータ版)ラーニングとサポート


目次



ダウンロード

こちらから僕が実験的に作ったパペットをダウンロード出来ます。
右も左も分からない状態で作り始めたものなので変な部分も有ると思いますが、何かの参考になるかもしれません。
女の子外観
SONiO Sample Girl 170507.puppet (798KB)
※このファイルは Adobe Character Animator CC Beta6 で動作を確認しています。

■ 次の機能が有ります
  • 頭・眉・瞬き・視線・口 ( 驚き・スマイル ) を Web カメラでコントロール
  • マイクなどの音声入力によるリップシンク
  • キーボード入力による瞬き ( B )・口の選択 ( 口形素のトリガー )
  • 呼吸・自動瞬き
  • マウスドラッグによる両手首の移動
  • 髪の毛・襟・胸元のリボン・ワンピースのダングル ( 重力と風に反応 )

Web カメラに向かって口を開けると 「 驚き 」 の口になります。口角を上げるとスマイルとして認識されるようです。
僕の中でスマイルのイメージは口を開けた状態だったので、Web カメラの映像とは合いませんがご容赦下さい。
口の選択は [ プロパティパネル > リップシンク > キーボード入力 ] を ON にする必要が有ります。入力するキーは口形素タグ名の最初の文字です。

動いている様子は こちらから ( Youtube )

■ 読み込み方
.puppet ファイルがダウンロード出来たら、Character Animator の [ メニュー > 読み込み ] からプロジェクトに読み込んでください。

読み込まれたパペットを選択し、プロジェクトパネル下部の [ 新規シーンに追加 ] を押すと動作を確認出来ます。

また、こちらのリンク先からは公式のちゃんとしたパペットが入手出来ます。
Character Animator Examples


用語の説明

ここでは Character Animator の公式ガイドを見たり、実際にソフトを使う上で知っておいた方が良いと思う言葉の意味などをまとめています。

用語 説明
パペット 操り人形。

Character Animator 内でモーションキャプチャやリップシンクなどを使用して動かす事が出来る。

大抵の場合は複数のサブパペットとスキンから構成されていて、最上位のサブパペットをパペットと呼んでいる様である。
サブパペット パペット内のグループ。

Photoshop の 「 グループ 」 に対応する。

公式ガイドを見る限りでは、パペットレイヤー内のグループは全て 「 サブパペット 」 という呼び方で間違いないと思われる。

親子関係を表現する場合は 「 親パペット ⇔ サブパペット」 或いは 「 グループ ⇔ サブグループ」 と表記される。

サブパペットを独立のパペットにして他のパペットと共有する事が出来る。
その場合、パペットの中に別のパペットを内包する事になる。
パペットレイヤーの各名称
筆者の感覚からすると全てのグループを 「 サブ 」 と表現する事に違和感を感じるが、恐らく 「 グループをいつでもパペットとして独立させて他と共有出来る 」 という思想から、個々のグループをパペットと呼んでいるのだろうと推測する。
現在ではグループレイヤーを示すアイコンは▲だが、過去のバージョンでは全てパペットアイコン ( ●頭に▲ ) だった事もある様だ。

公式ユーザーガイドでは 「 親パペット・サブパペット・グループ・サブグループ 」 の表記が統一されていない感があるが、文脈に従って適時読み替えるか混乱しそうなら読み飛ばした方が良いと思う。
このソフトはまだベータ版の為機能の変化が激しく、ユーザーガイドの更新が遅れている面も見られる為、言葉の定義を厳密に追おうとするとドツボにハマる危険性が有る。
スキン サブパペット内の画像。

スキンに対してハンドルやビヘイビアーを設置する事は出来ない。
レイヤー パペットパネルの左サイドバーにあるレイヤーリストの最小要素。

サブパペットもスキンもレイヤーに含まれる。

Enter キーを押すと名前を変更出来る。

※このページでは便宜上、グループのレイヤーを 「 グループレイヤー 」 と表記する事が有ります。
インスタンス 一般的には概念を実体化したものを指す。

Character Animator では、プロジェクトパネルに表示されているパペットや、リグワークスペースで編集しているパペットが 「 概念 」 にあたり、シーンで使用されたり他のパペットの中に取り込まれたものが 「 インスタンス 」 にあたる ( と思う )

リグワークスペースで編集した結果は、全てのインスタンスに変更が適用される。
メッシュ 網目。

パペットを変形させるポイントと、それをつないだ線が網の目の様に見える。

「 メッシュを表示 」 ボタンを押すとパペット上に黄色の線で表されるが、自動生成の為ユーザーが細かく編集する事は出来ない。
メッシュ
ワープ ゆがみ。

Adobe 社がよく使用する、メッシュを使った画像の変形方法の名称。
通常の変形では難しい 「 布を揺らす・粘土を曲げる 」 等の変形が得意。
ワープ前後
独立してワープ サブパペット内に、親とは別のメッシュを作成する事。

パペットは通常一つのメッシュで構成され、外力が加わった場合にも全てのパーツが一枚のゴムの様に振舞う。このメッシュとは別の変形を行いたい場合にこの機能を使用する。

独立してワープが適用されたレイヤーには王冠アイコンが表示される。
王冠アイコン
ハンドル パペットを変形させる力点、或いはサブパペットへの接続ポイントなど様々な使い方がなされる基本要素。

ハンドルにタグを付ける事によってパペットに様々な機能を与える事が出来る。

Character Animator で設置したハンドルは Enter キーで名前を編集する事が出来る。
ハンドルとタグ
タグ レイヤーやハンドルに様々な機能を与えるキーワード。

例えばハンドルに 「 頭 」 タグを付けるとWeb カメラで捉えた人間の頭の動きを追随する様になる。

タグは2種類存在する。
レイヤーに対して設置するタグを 「 レイヤータグ 」、ハンドルに対して設置するタグを 「 ハンドルタグ 」 と呼ぶ。

レイヤータグは青色、ハンドルタグは黄色で表示される。
レイヤータグとハンドルタグ
ビヘイビアー 挙動・振る舞い。パペットに起きる動きや変化。

風や重力など他にも様々な種類が用意されている。

これをパペットに適用するには、ハンドルに対応するタグを付ける。

ビヘイビアーが適用されたパペット及びサブパペットにはビヘイビアーアイコンが表示される。
ビヘイビアーアイコン



Photosop でイラストを作成する際に知っておきたい事

Character Animator のパペット ( 人形 ) は Photoshop か Illustrator を使用して作りますが、いつもの様に絵を描く時とは異なる点が幾つかあります。

クリッピングマスクが使えない

これが使えないのは非常に厳しいです。特に瞳の表現が格段に煩雑になります。

Character Animator にイラストを読み込むと、Photoshop の通常のレイヤーマスクは適用され、クリッピングマスクは全て解除されてしまいます。
瞳はグリグリ動いて白目からはみ出すので、はみ出した瞳が見えない様に別の画像で上から被せる必要が有ります。

早急にクリッピングマスクが使える様になって欲しいです。
目のマスク処理


使えない描画モードが有る

Character Animator で使用出来る描画モード一覧はこちらをご参照ください。
アドビサポート > Adobe Character Animator (Beta) > パペットの構造の編集

Beta6 で使用出来ない事が分かっているモードは以下の通りです。
  • ハードミックス
  • 色相
  • 彩度
  • カラー
  • 輝度
※また、Illustrator の描画モードは現在の所対応していないそうです。

Character Animator 用の設定を施しておくことが出来る

パペットを作成する手順としては
  1. Photoshop などで絵を描く
  2. Character Animator でパペットにする
となりますが、Photoshop の作業の段階で Character Animator の設定を行っておくことが出来ます。

以下が設定出来る項目の例です。
  • グループ名やレイヤー名に体のパーツ名を付ける ( Head など )( 英語のみ )
  • ハンドルを設置して名前を付ける
  • 独立してワープさせたいグループ名の先頭に半角プラスマークを入れる
※Head はレイヤー名としても使用可能ですが、Character Animator 内で原点を移動出来なくなる為、グループ名として使用する事をお勧めします。

上記項目を Photoshop の作業内で設定しておくと、Character Animator で読み込んだ際に自動的にハンドル設置やタグ付けを行ってくれます。

ただし1つ注意が有ります。 Photoshop 等で設置したハンドルは Character Animator で移動や名前変更をする事が出来ません
ハンドルの設置は、初めの内はあまり多用しない方が良いかもしれません。

Photoshop で作業した内容が Character Animator でどの様に反映されるかを画像にまとめてみました。
レイヤーの対応例

「 どんな単語を用いれば良いか 」 について手っ取り早く知るには、公式が公開しているパペットをダウンロードして開いてみるのが一番でしょう。
Character Animator Examples

または、ユーザーガイドにも情報が有りますのでご参照ください。
ただし日本語のサイトは必要な英単語まで翻訳されてしまっている為、英語のページから単語を拾う必要が有ります。
Body features ( 英語 )
Body features ( 日本語訳 )

空中に浮いた部分を作らない

Character Animator に Photoshop のイラストをパペットとして読み込むと、自動的にイラストの形に添ったメッシュ ( 網目 ) が生成されます。
Character Animator はこのメッシュを元に力が加わった時の変形具合を計算しているものと思われます。

最も精密なワープ ( 変形 ) を行うためには Character Animator にパペットの輪郭を認識してもらう必要が有るのですが、そこでイラストが分断されていると単なる四角として扱われてしまいます。

一見して分断されていないイラストに見えても油断してはいけません。独立してワープするグループは親とは別のメッシュで構成されます。ですので、名前の先頭に+マークを付けたグループを非表示にして、分断されていないか確認する必要が有ります。
また、極端に細い部分が有ると分断されていると見なされる場合が有るので注意が必要です。
輪郭に沿ったメッシュ
スキンの形によっては分断されていないのにメッシュが四角になる場合が有ります。その様な時は手動で [ プロパティパネル > レイヤーメッシュ > メッシュのシェイプ ] を 「 輪郭 」 に変更してください。


Character Animator 操作画面の意味と機能の説明

Character Animator には初期状態で4つのワークスペースが用意されています。
  • 開始
  • リグ ( 作業 )
  • 録画
  • ストリーム
この中で主に 「 リグワークスペース 」 について説明します。

逐次保存形式?
Character Animator を使う上で少し気に留めておいた方が良いと思う事が有ります。
それは、Ctrl + S による保存が無い事です。
Character Animator で加えた変更は逐次保存されます。これは、思わぬ事故によるデータ消失のリスクが激減しますが、何かを試すために 「 最後は保存しないで終わろう 」 という使い方は出来ないという事です。

リグ ワークスペース

このワークスペースでは、パペットにハンドルを追加したりビヘイビアーを追加する等、 「 パペットを作る 」 作業を行います。

全てを網羅出来ませんので、かいつまんで説明致します。

リグワークスペースは4つのパネルで構成されています。
リグワークスペースマップ

[ パペットパネル ] レイヤー操作部の説明

各部分の名前やアイコンの意味について画像にまとめました。
パペットパネルの説明

[ パペットパネル ] ツールの説明

各ツールの説明について画像にまとめました。
ツールの説明
ステープルツールについては後程もう少し詳しく説明します。

[ パペットパネル ] ハンドルアイコンの説明

character_animator_handle_7 未選択のハンドルは黄色
character_animator_handle_8 選択されたハンドルは白色です。

Character Animator で設置したハンドルは移動・名前の編集が自由に出来ます。
ハンドルの名前を編集するには、ハンドルを選択して Enter キーを押してください。

ハンドルは複数の種類が有ります。表にまとめました。
種類 アイコン 移動 名前
編集
削除
初期状態 移動後
Photoshop などで設置したハンドル - × ×
サブパペットの原点 × ※1
Character Animator で設置したハンドル
※1 移動後のサブパペットの原点を Delete するとリセットされますが消える事はありません。

少し複雑に見えますが、重要なのは
  • Photoshop などで設置したハンドルは移動・名前の編集が出来ない
  • サブパペットの原点ハンドルは点線で表示されている
という事です。

公式ガイドでは、
アートワークファイルから読み込んだ読み取り専用のロケーション、および中に黄色い点が表示されていない丸は移動出来ません。
と有るのですが、サブパペットの原点ハンドルは中に点が無くても移動出来ますので、覚え方として採用するのは止めた方が良いかもしれません。

[ プロパティパネル ] タグを設定する

サブパペットやハンドルに付けるタグを選択する作業です。

画面右上の [ A ] と [ スマイルマーク ] は、文字によるタグとイラストによるタグの表示切替です。
スマイルマーク
内容は一緒ですので、分かりやすい方で操作してください。

最初に一番よく使うのは 「 修飾子 」 タグだと思います。
もしかすると僕の環境だけかもしれませんが、Beta6 では明らかな間違いが発生しています。
左二つが両方とも [ ダングル ] タグになってしまっています。
左側は本来 [ ドラッグ可能 ] と表記されていなければなりません。
ただ、タグの上でマウスオーバーすればヒントが出てきますので判別がつきますし、動作上も問題ありません。
タグの間違い

[ プロパティパネル ] ビヘイビアーを設定する

ビヘイビアー操作部はプロパティパネルの一番下に有るので少し見つけ辛いです。

ビヘイビアーとは、対応するタグの付けられたハンドルやサブパペットなどを動かす為の設定です。

例えば 「 呼吸ビヘイビアー 」 が設定されたサブパペット内に 「 呼吸タグ 」 が付いたハンドルが存在すると、そのハンドルが付けられたサブパペットはまるで呼吸しているかの様に拡大縮小します。もちろん拡大縮小の比率や速さは等の設定は、呼吸ビヘイビアー内で変更する事が出来ます。

現在編集しているパペットのビヘイビアー設定画面は、「 リグ ワークスペース 」 にのみ存在します。
ビヘイビアーが保存出来るのは リグ ワークスペースだけ
ここで注意が必要です。 「 録画/ストリーム ワークスペース 」 のプロパティパネルにもビヘイビアーを操作する画面が存在しますが、それらは録画やストリームを行う時に一時的に設定する場所であり、パペットの設定として保存されません
Character Animator はプロジェクトとは別にパペット単体で保存する機能が存在します。これを使用する事で他の人とパペットを共有する事が出来るのですが、録画/ストリーム ワークスペースで設定した値はパペットファイルには保存されないという事になります。

ビヘイビアーの詳細な内容に関してはここでは説明しきれません。
リップシンクの様に Photoshop の作業の段階でほとんど設定が終わってしまうようなものも有ります。使い方を知るには公式のパペットを真似して作ってみるのが一番早いのではないかと思います。

ビヘイビアーに関する公式ガイドはこちらから。
Adobe 公式ユーザーガイド ビヘイビアー

録画・ストリーム ワークスペース

これらのワークスペースに関しては筆者はまだ十分に使えておらず、あまり説明出来る事がありませんのでさらっと流します。

どちらのワークスペースでも共通ですが、アイテムのビヘイビアーを設定する表示 ( 赤い丸ボタンが沢山表示されている画面 ) が出ていない時が有ります。それはタイムラインパネルでパペットが選ばれていない時なので、タイムラインパネルから目的のパペットを選択してあげてください。
プロパティパネルにビヘイビアーを表示させる

録画 ワークスペース

Character Animator は作成したパペットの動きや位置情報を ” 録画 ” する事が出来ます。
録画した後から 「 リップシンクの間違いを修正する 」 などの編集が出来る様です。
もちろん録画した動作を .mp4 などの動画ファイルに書き出すことが出来ます。
因みにリップシンクは、マイクからの入力以外にも既に録音してある音声をプロジェクトに読み込んで使用する事が出来ます。

録画ワークスペースのビヘイビアー操作画面は、リグワークスペースに有るものと少し様子が違って赤い丸印が複数存在します。
この赤い丸はクリックで切り替え出来ますが、赤い丸が点灯している項目が ” 録画 ” されます。
例えば、リップシンク > オーディオ入力 を OFF にすると、マイクが ON になっていても ” 録画 ” はされません。

先にも書きましたが、このワークスペースでビヘイビアーを調整してもプロジェクトとしては保存されますが、パペットファイルには保存されませんのでご注意ください。

ストリーム ワークスペース

こちらは Youtube などでライブ配信を行う際に使う設定と思われます。
シーンパネル下部の 「 ライブストリーミング 」 ボタンを押すと、任意のディスプレイにシーンを全画面表示で出力する事が出来ます。
ライブストリーミングの設定はメニューの 「 環境設定 」 から行うことが出来ます。

パペットに大幅な変更を行った場合、表示崩れを起こす場合が有ります。表示が崩れた時は、更新ボタンを Alt キーを押しながらクリックしてください。


パペットの構造について

Character Animator のパペットは一枚のゴム板の様なものです。これにマウスドラッグなどで外力を加えるとグニャグニャと変形 ( ワープ ) します。
一枚のゴム板のままでも楽しめると思いますが、やっぱりスカートの裾と脚は別々の動きをして欲しいですし、イヤリングは装着点から垂直に下がって欲しいものです。

それらを実現する為にはそれぞれのパーツを 「 独立してワープ 」 させる必要が有ります。
ただし、単に独立してワープするだけではなかなか思い通りに動いてくれません。その原因の多くは、サブパペットの固定位置が理想の場所に無い事に有ると思われます。
その事も含めて、ここでは思った通りに動作させる為に必要な知識をまとめたいと思います。

パペットに加わる力の種類

パペットを変形させるには何らかの力をかける必要が有りますが、僕が確認した所では以下の種類が有る様です。
  • 顔 ( 輪郭 ) のモーションキャプチャ ( 顔ビヘイビアー )
  • まぶたのモーションキャプチャ( 顔ビヘイビアー )
  • 口のモーションキャプチャ( 顔ビヘイビアー )
  • 瞳のモーションキャプチャ( 視線ビヘイビアー )
  • マウスなどによるドラッグ( ドラッガービヘイビアー )
  • 重力( ダングルビヘイビアー )
  • 風( ダングルビヘイビアー )
※丸括弧内は動作を設定するビヘイビアー名

子から親へ力の伝搬はしない

少し残念なお知らせですが、サブパペットに与えた力を親パペットに伝搬させる事は出来ない様です。なので、鎖や骨などの様な 「 沢山の連結部が存在する物体 」 を表現する時は注意が必要です。
もし 「 鎖の先端をドラッグして持ち上げたい 」 と思って 「 ヒンジの接続スタイル 」 を多用したとしても、最後の輪が伸びるだけで目的の動作は得られません。この様な物を作りたい場合は、一つのサブパペットに沢山のスティックツールを使用する事で疑似的に可能になります。
鎖を疑似的に表現

サブパペットの原点

サブパペットの原点はサブパペットを選択した時に丸い点線のハンドル character_animator_handle_3 で示され、デフォルトではサブパペットの中央 ( 子のサブパペットを含むバウンディングボックスの中央 ) に位置しています。

サブパペットの原点は
  • 変形や回転の中心
  • 独立してワープしている子 ( サブパペット ) の接続ポイント
の機能を果たします。
サブパペットの原点の役割

適切な場所へ移動させましょう

頭 ( head ) や腕などの回転するパーツは、回転軸がイラストの端に有る事が多いと思います。それらのパーツは原点がデフォルトの位置だと、大抵おかしな所で回転してしまいます。 原点の位置はドラッグで自由に移動出来ますので、回転軸となる場所まで移動させて下さい。
※Photoshop などで 「 Origin 」 という名前で設置したハンドルは移動出来ません。

接続スタイル

サブパペットを独立してワープさせると、親パペットに対して
  • どこに
  • どの様に
接続するかを選択する必要が出てきます。

「 どこに 」 に関しては、デフォルトでは 「 親の原点 ( 点線のハンドル ) 」 になっています。 ( 後程詳しく説明します )

「 どの様に 」 に関して設定するのが 「 接続スタイル 」 です。
現在は3種類の選択肢が用意されています。

子パペットから見た接続スタイル別の特徴を表にまとめてみました。
接続スタイル 親パペットの動きに対して ドラッグに対して
溶接 親の原点に追従 自原点付近のメッシュのワープが制限される
ヒンジ 親の原点を中心に常に姿勢を保つ 自原点を中心に回転する
自由 親の原点に追従 全く固定されない

上の表を図にしてみました。
接続スタイルの説明

ステープルツールを使って接続ポイントを変える

先に出てきた 「 サブパペットをどこに接続するか 」 について、デフォルトでは「 親の原点 」 となっていますが、それでは不都合な場合が多々あります。例えば、クレーンのアームの様な構造を作る場合です。そこで、ステープルツールが役に立ちます。ステープルツールは接続先のハンドルの位置を自由に決められるツールです。
ステープルツールについて図にまとめてみました。
ステープルツールの説明

ステープルツールを無かった事にするには?

ステープルツールで設置するハンドルは自分の原点になるので、元々の原点は消えます。元々の原点を復活 ( リセット ) させたい場合は、ステープルハンドルを Delete などで消去します。ただし、ステープルハンドルは消えてもサブパペットの接続先の設定は元に戻りません。それは次のような理由です。

ステープルツールを使用すると、親パペットにも同時にハンドルが生成されます。サブパペットはそのハンドルに対して接続するのですが、サブパペットのハンドルを消去しても親パペットにはハンドルが残り続け、サブパペットもそこに接続し続ける事になる為先程の様な現象が起きます。

サブパペットの接続先を親パペットの原点に戻してやるか、或いは完全にステープルの痕跡を無くしたい場合は、親パペットのステープルハンドルを消去します。

なお、ステープルツールを使用すると自動的に接続スタイルが 「 溶接 」 に設定されますので、不都合が有れば変更して下さい。

接続先ハンドルとサブパペットの原点を別々にするには?

もうお気づきかもしれませんが、ステープルツールは
  1. 親パペットに名前付きのハンドルを設置する
  2. サブパペットの接続先を 1. のハンドルに変更する
  3. サブパペットの原点を 1. のハンドルと同じ位置に移動する
  4. サブパペットの接続スタイルを 「 溶接 」 に変更する
の4ステップを一度に行えるツールとなっています。

という事なので、 手動で 1,2 ( お好みで 4 ) を行えば接続先と原点を別にする事が出来ます。

もう一つ挙げるとすれば、ステープルツールを使用してからサブパペットの原点を Delete でリセットする方法でしょうか。

ステープルツールの使用例をもう一つ

もう一つ例をご紹介します。
親パペットとサブパペットの連携が上手く行かないのは同じですが、今度はサブパペットが若干反応してしまうので質が悪いです。でも、どちらかと言うとこちらの方がよく発生する事例かもしれません。
ステープルツールの説明2


最後に

ここで解説している内容は Character Animator の一部で、もっと使いこなせば正面を向いてただ左右に揺れる以外の動きもさせる事が出来ます。
公式の Tips ビデオを見ると色々な発見が有りますので、興味が有りましたら是非見てみて下さい。

このドキュメントを書くのには結構苦戦しましたが、誰かが面白いビデオを作成する手助けになれば作った甲斐があります。