iPentec.com / Doc / Adobe / Character Animator

Character Animator を利用して音声ファイルに合わせてキャラクターにリップシンク(口パク)させる

Adobe Character Animator を利用して、セリフの音声ファイルに合わせてキャラクターに口パク(リップシンク)させる方法を紹介します。

補足

Character Animatorを使用しない方法はこちらの記事を参照してください。

手順1: キャラクターの作成

はじめに、リップシンクで口パクさせるキャラクターを作成します。Illustratorで下図のキャラクターを作成しました。

今回はリップシンクのみ実装するため、口のパーツを複数用意しています。

レイヤーの構造は次の通りです。
最上位に[Girl]のレイヤーを作成し、[Head]サブレイヤーを作成しています。(サブレイヤーの作成手順はこちらの記事を参照してください)
Headサブレイヤー内に[+Mouse]サブレイヤーを作成しています。レイヤー名の先頭に "+" を入力することで、動きのあるレイヤーとCharacter Animatorに認識させることができるため、"+Mouse" の名称にしています。
[+Mouse]レイヤーの内部に[Neutral] [Ah] [D] [Ee] [F] [L] [M] [Oh] [R] [S] [Uh] [W-Oo] のサブレイヤーを作成しています。サブレイヤーの名称を合わせておくことで、Character Animatorに読み込んだ際に自動的にタグを割り当てできるため、サブレイヤーの名称は揃えておくのがおすすめです。
[Neutral]などのサブレイヤー内に口の形状のパスは入っています。

[Neutral]サブレイヤーの口は下図です。

[Ah]サブレイヤーの口は下図です。

[D]サブレイヤーの口も下図です。Ahサブレイヤーと同じです。

[M]サブレイヤーの口はNeutralと同じにしました。

[Oh]レイヤーの口は下図です。

[Uh]サブレイヤーの口はNeutralと同じにしました。

[L]レイヤーの口は下図です。少し小さい口にしました。

他のレイヤーは[Ah]サブレイヤーの口と同じ形状にしています。

Illustrator形式(.ai)でファイルを保存します。

手順2: 口のパーツの設定

キャラクターの読み込み

Character Animatorでキャラクターを読み込み、口のパーツの設定をします。

Character Animator を起動します。下図のウィンドウが表示されます。

[ファイル]メニューの[新規プロジェクト]の項目をクリックして、新しいプロジェクトを作成します。

新しいプロジェクトが作成できました。下図の画面が表示されます。

[ファイル]メニューの[読み込み]の項目をクリックします。

[読み込み]ダイアログが表示されます。先ほどIllustratorで作成したキャラクターのファイルを選択して読み込みます。

ファイルが読み込まれると、左上の[プロジェクト]パネルに[パペット]の項目が表示されます。"char"の名称で表示されています。

パーツの設定

上部のタブの[リグ]の項目をクリックして[リグ]の編集画面に切り替えます。

プロジェクトパネルの"パペット"の項目をダブルクリックします。読み込んだキャラクターが表示されます。

中央のエリアの左側にレイヤー構造が表示されます。Mouseレイヤー内に口のパーツのレイヤーが配置されている状態が確認できます。

[Neutral]のレイヤーをクリックして選択します。右側の[タグ]パネルの口のパーツの[ニュートラル]の項目が青で表示され、このレイヤーにタグ付けができていることが確認できます。

[Ah]のレイヤーをクリックします。右側の[タグ]パネルの口のパーツの[Ah]の項目が青で表示されています。

それぞれのレイヤーをクリックして選択し、タグ付けがされていることを確認します。

口のパーツのレイヤーは読み込み時に自動でタグ付けできていましたが、口全体のレイヤーがタグ付けされているか確認します。 [Mouse]レイヤーをクリックして選択します。右側の口の部分が青色にならないため、タグ付けできていない状態であることがわかります。

右のエリアの[タグ]パネルの口の部分(下図オレンジ色の点線で囲んだ部分)をクリックします。

クリックすると、青色に変わりタグ付けができたことが確認できます。画像のキャラクタ上にも[口グループ]の表示が追加されます。

レイヤーの最上位の[char]の項目(下図のオレンジ色点線部分)をクリックします。下図の画面に切り替わります。

右側のエリアの[ビヘイビアー]パネル内の[リップシンク]の項目を展開します。下図の画面が表示されます。

[リップシンク]の各項目の右側の数値が "1" 以上の値になっていることを確認します。また、各項目を展開すると、それぞれのパーツに対応付けられているレイヤー名が表示されることも確認します。

シーンの作成

ウィンドウの上部のリグのタブの右側にある[録画]タブをクリックします。下図の画面に切り替わります。

プロジェクトパネルの作成したパペットの項目をシーンのパネルにドラッグ＆ドロップします。

パペットをドロップすると下図の表示になります。かなりキャラクターが小さく表示されています。

[Ctrl]キーを押しながら、マウスホイールを回転させるとシーンの画面を拡大できます。また、マウスの中ボタン、またはマウスホイールを押した状態で、マウスポインタを移動させると、ビューの移動ができます。拡大して見やすいサイズにすることはできます。
ただし、完成したアニメーションをAfter Effectsにインポートする際に、コンポジションに配置したサイズが小さすぎる、解像度が足りない、などいろいろと不都合が出るため、キャラクターのサイズを大きくします。

キャラクターのサイズ調整

上部のタブの[リグ]をクリックして選択しキャラクターの編集画面に戻ります。レイヤーの最上位の[char]の項目をクリックして選択します。右側の[プロパティ]パネルの[パペット]の項目を展開します。下図の画面の表示になります。

[解像度]のコンボボックスをクリックします。下図のドロップダウンリストが表示されます。[デフォルト]の項目が選択されていますが、[高]をクリックして選択します。

レンダリングの解像度が[高]に変わりました。

補足

高解像度に対応できるようにするため、パペットの項目で、[ベクトルとしてレンダリング]をクリックすると良さそうですが、このチェックボックスにチェックをすると、 Illustratorで設定した線幅が無視されてレンダリングされてしまうため、元のキャラクターの印象と若干変わってしまう点に注意が必要です。
ベクトルとしてレンダリングを利用する場合は、線をすべてアウトライン化して、線幅の設定が無い状態にする必要があります。