【Adobe Character Animator cc 】Procreateで作成したイラストをCharacter Animatorで動かしてみました！

こんにちは！楽じい(“@rakujii7“)です。今回は、iPadのお絵描きアプリ Procreateで作成したイラストをCharacter Animatorで動かしてみました。

ProcreateはPSD形式で書き出せるので、イラスト作成後⇒Photoshopに読み込んで編集⇒Character Animatorで動かすという流れです。

前回はテンプレートを編集して動かしましたが、今回は独自のデザインです。←いつものイラストですが・・・

何とか完成しましたが、目の動きなどの改善点があったので紹介します。

ちなみに前回の記事はこちら↓↓↓

＋を付けてパーツを独立して動かす

パペットテンプレートを参考に、レイヤー名は同じにして各パーツ(眉・目・口など)を描きます。

Photoshopに読み込んでからフォルダー分けをしますが、ここでレイヤーまたはフォルダーの名前に「＋」を付ける理由は、そのパーツは「他のパーツに影響しない独立した動き」にするためです。

顔のパーツで言えば、眉・瞳のレイヤーまたは口の形をまとめた(Mouth)フォルダーがそれにあたります。

例えば、口(Mouth)のフォルダーが独立していないと、口を動かした時に顔(face background)レイヤーも一緒に動くことになるので「＋」を付けて独立させるということです。

ここは難しく考えないで「動かすパーツには＋を付ける」と覚えておくといいでしょう。

「＋」を付けたレイヤーは、Character Animatorに移動すると王冠のマークで表示されます。ON/OFFの切り替えはいつでもできるので動きを見ながら調整すればOKです。

ハンドルタグとレイヤータグを適用

次にハンドルタグとレイヤータグの適用です。

ハンドルタグは黄色、レイヤータグは青色で表示されていますが、はじめにテンプレート通りのレイヤー名を付けているのですでに適用されています。

レイヤー名を同じにする理由はここでの作業を省くためですね。

ほとんど変更する必要はないのですが、独自デザインのキャラクターで作成した場合。イレギュラーが発生することがあるので、ハンドルタグとレイヤータグの意味は理解しておくと微調整に役立ちます。

まずハンドルタグですが、これは単に目・眉・口の位置をCharacter Animatorに覚えさせているようです。

Webカメラの動きでキャラクターを動かすのに、このハンドルタグを関連付けてないとパーツはうまく動きません。

左の瞳(Left Pupil)レイヤーで見てみるとハンドルタグはちゃんと「左の瞳」と関連付けられていますね。

これは分かるのですが、次にレイヤータグです。

レイヤータグには「左の瞳のサイズ」となっています。さてこの意味なんでしょう？ってことですが

今度は、左の白目(Left Eyeball)レイヤーを見てみるとレイヤータグには「左の瞳の範囲」となっています。

つまり、「左の瞳は左の白目の範囲内で動かしますよ！」と関連付けられているんですね。

これはビヘイビアーというパペットをコントロールするCharacter Animatorの機能で、基本的な動作はあらかじめ関連付けられているということです。

目が動かない時の対処法(Photoshopで画像サイズに変更)

次に、目が動かない時の対処法です。

これは前章のレイヤータグの意味を理解していなかったので非常に苦戦しました。

つまりこう言うこと・・・編集前の右目で解説します。

「Procreateはカンバスサイズが変更できないため、レイヤーに描いた画像はすべて同じカンバスサイズになります」

上図を見ていただければ一目瞭然。瞳のレイヤーサイズも白目のレイヤーサイズも同じですね。

これでは瞳の動くスペースがないので関連付けても動きません。

これをPhotoshopで画像サイズに変更します。使うのは「編集」⇒自由変形です。

やり方としては、位置をずらすなり何か編集してから元に戻して⇒Enter

他にも方法はあると思いますが、とりあえずこれでOKでした。

それぞれ画像サイズにして上書き保存すれば、Character Animatorに反映されています。

あとはレイヤータグが関連付けされているので、白目の範囲内で瞳が移動します。

瞳がはみ出した時の対処法

最後に、瞳がはみ出した時の対処法です。

作成するキャラクターのデザインよって違いますが、どうしても瞳がはみ出す部分ができてしまいます。

Adobeのマニュアルではレイヤーマスクを作成して、はみ出す部分を隠すという方法を紹介していましたが、私は別の方法を考えてみました。

瞳は白目レイヤーの範囲で動くわけですから、はみ出さないように「白目レイヤーを縮小すればいい」といった考えです。

やり方は、「白目レイヤーを複製⇒縮小⇒関連付ける⇒レイヤーを非表示」です。

まず、Photoshopで白目(Left Eyeball)レイヤーを複製してサイズを縮小します。←保存を忘れずに・・・

次に、Character Animatorで縮小したレイヤーを瞳の範囲として関連付けます。あとは非表示すればOK!

これで見えている白目から瞳がはみ出ることはありませんね。

また、レイヤーを非表示にしても関連付けられたレイヤータグは有効です。