こんにちは!楽じい(“@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!
これで見えている白目から瞳がはみ出ることはありませんね。
また、レイヤーを非表示にしても関連付けられたレイヤータグは有効です。
まぁ!いろいろ悩みましたが、ちゃんと動くようになりました。次は、胴体も付けて全身のキャラクターを動かします。ではまた・・・