キャラクター作成方法：目
hr.icon
1. チュートリアルサイト
本演習では、以下URLの公式チュートリアルに沿って行う。
ここでは「目」と「眉」について扱う。
https://gyazo.com/c49000624540b7e86cf01b9307096ec2
hr.icon
2. プロジェクトの準備
「ファイルメニュー > 新規プロジェクト」をクリックして、任意の場所にプロジェクトを保存する。
https://gyazo.com/fff90e499c1bc48e4525d6d6ebe4d46f
ホームのパペット例からPhotoshop版チャッドを読み込む。
https://gyazo.com/adaa1a383d8870ff47d6c169775ba6ce
録画ワークスペースが表示される。
https://gyazo.com/804098cba42612b824f45f2ebcab2eec
hr.icon
3. チャッドのオリジナルPhotoshop（PSD）データの確認
プロジェクトパネルのチャッドパペットを選択して、パネル下のPSアイコンをクリックする。
https://gyazo.com/69aafbaa339675551631f1e35580c007
Photoshopが起動してチャッドのデータ（プロジェクトフォルダ > Ch Media > Gathered Media > Chad.psd）が開く。
https://gyazo.com/fe19dca4df680e5375c76a07c96765d2
hr.icon
4. 眉（Eyebrow）に関する設定
レイヤーパネルを確認したHeadフォルダの下に「+Left Eyebrow（左眉）」と「+Right Eyebrow（右眉）」を確認する。
この時のLeftとRightはパペットの左右であって、画面の左右とは異なるので注意。
https://gyazo.com/1c3bc1e1d6a8e766d733054efec79602
独立レイヤー
Photoshopのレイヤー名称の頭に「+」を付加した場合は、他のレイヤーから独立して動作することを意味する。
Character Animatorのリグモードでクラウンアイコンを設定する方法でも可能。
※すでにCharacter Animatorに読み込んでいるパペットPSDを編集して「+」を外して保存した場合、タグが外れてしまう。パペットPSDを別名で保存して再度読み込みシーン作成すればタグ付けされる。 詳細は後述。
Character Animatorレイヤー構成とPhotoshopレイヤー構成
下図（クリックして拡大）のように１対１で対応していることがわかる。Photoshopで名称に「+」を付加したものには自動でクラウンアイコン（独立レイヤーの意味）が付加される。
https://gyazo.com/ab9db1645b28a4c19823535af63e3f32
hr.icon
5. 独立レイヤーを理解する
チュートリアルの方法
※チュートリアル映像の方法では実現できない
チュートリアル映像内では、Photoshopのレイヤー名称「+Left Eyebrow」と「+Right Eyebrow」から「+」を外して保存した場合に眉の動きが他のレイヤーに影響して顔全体を変形させているが、実際にはそのような動きにはならず、下図のように眉に対するタグが外れてしまう。「+」があればクラウンだけでなく自動でタグ付けもされる。原因不明だが、Character Animator 日本語版もしくは日本語OSの原因、またはバグの可能性がある。
https://gyazo.com/0a2a6339c5d134c0f2c168be263ad3b9
正常動作する方法（中安独自）
ソースのパペットPSDは編集せずに、Character Animator上で以下のようにクラウンの設定を変更する。
Head：クラウンを付ける or 顔タグを外す
Left Eyebrow：クラウンを外す
Right Eyebrow：クラウンを外す
face background：クラウンを外す
下図のように、眉の動きが顔全体の変形に影響するようになる。
https://gyazo.com/fbca0f1bd58f3a8ff9ff815f9d7eb2c6
メッシュ状態の確認
独立レイヤーの設定によって、なぜこのような挙動となるかは、録画モードのシーンパネル右下のShow Meshアイコン（下図）をクリックして、メッシュ分割の状態を確認することで理解できる。
https://gyazo.com/6c699c9f4bc86bc71b033d3a4a1267a4
下図のように眉が独立レイヤーだった場合（下図左）は他のパーツとは分かれている。一方、クラウンを外した場合（Headやface backgroundの設定も影響）は、顔全体が一体としてメッシュ化されている（下図右）。Character Animatorでは、自動メッシュ機能とそれぞれのパーツへの影響を細かく設定することで、様々な動き実現させている。そのため、キャラクターとそのパーツに応じて独立レイヤー（クラウン）の有無を設定する必要がある。
https://gyazo.com/d57c86c7be283feeb7afc43407bd88e8
上図ではわかりやすくするため、シーンパネルの設定で背景を黒に変更している。
参考
2Dアニメーションの自動メッシュ化については五十嵐建夫先生の研究を紹介する。
hr.icon
6. タグ
元となるPSDに適切にレイヤー名称（Head、Left Eyebrow、Nose、Mouth等）を設定していれば、自動的にタグ付けされる。レイヤー名称がルールとは異なっていたとしても、パペットパネルのリグ or プレビューのパーツを選択することで、プロパティパネルのタグで設定することができる。
https://gyazo.com/14a7852abfe81236b52dcffce9c8058f
プロパティパネルのタグはイラスト/テキストの表示を切り替えることができる（下図）。
https://gyazo.com/c0528e6e0a582dd566a36244765e11bd
Character Animator英語版では、タグのテキスト表示は英語のため、PhotoshopやIllustratorのレイヤー名称と同じなのでわかりやすいが、タグが日本語だとイラスト表示のタグで確認することになる。
hr.icon
7. ビヘイビア
タグ付けされたパーツには自動的に標準ビヘイビア（動きの設定）が追加される。
録画モードの「プロパティ（チャッド） > パペットトラックビヘイビアー（下図）」でビヘイビアの動きを細かく調整できる。
※プロジェクトパネルのパペットが選択されている状態 or タイムラインのパペットが選択されている状態で表示される。タイムラインのパペットを選択した場合は録画のON/OFFやカメラ入力/マウス操作/キーボード操作も設定できる。
https://gyazo.com/fca42bddb80b8db8df0481ff318c3b2c
例えば眉の動きは、「顔 > 眉の強度」を変更することで動きの激しさを変更可能。試しに500%程度にしてみよう。
https://gyazo.com/79a183226a68bb9c6f54989e891b7e46
数値右の「X」をクリックして初期値に戻すことができる。
参考
ビヘイビアには、髪の毛を揺らすキャラクターの動きに関わるものから、雪を降らせたり、炎を発生させるなど、様々な種類が用意されている
hr.icon
8. 目（Eye）
PSDのレイヤー構成
右目では以下のように構成されている。左目も同様。
+Right Eye 右目（独立レイヤー）
Right Blink 右のまばたき：表示されることでPupilとEyballを隠す
+Right Pupil 右の瞳（独立レイヤー）：他のレイヤーに関係なく動作して、眼球の範囲内に収まる
Right Eyball 右の眼球
https://gyazo.com/6c9ff47ab769121860ed3d99481b03df
録画モードでのビヘイビア設定
タイムラインのチャッド（Photoshop）を選択することで、プロパティにパペットトラックビヘイビアが表示される。
目に関するビヘイビアは「視線」で調整することができる。
https://gyazo.com/af4060d3fbe9e9739d3d53e5b13612ba
「視線」の左の赤丸は録画されることを意味する。クリックして録画要素から外すこともできる。
「視線」の制御は以下の中から選択することができる。
カメラ入力
マウスおよびタッチ入力
キーボード入力
同時に複数設定可能だが、動きの変化量も加算されるので注意。
「視線のスナップ」のチェックボックスを外すことで、視線位置が目の動きやマウス操作により自由な位置に追従する。スナップされている場合は、真ん中、上下左右、斜め45度の9方向に限定される。
https://gyazo.com/7eed00fcfa5946c09a778cb36de3eb87
hr.icon
9. 目の大きさと目の色を編集
Photoshopで目の大きさや目の色を変更してみよう。
https://gyazo.com/be91bd2ff5a213959ce2a11b4010b0c0
目の大きさ
両目の大きさを同時に変更する場合、Cmdを押しながらRight EyeballとLeft Eyeballを選択した状態で、自由変形（Cmd+T）を行う。Option+SHIFTキーを押しながらハンドルをドラックすることで縦方向に変形することができる。
目の色
すでにあるビットマップ画像の色を調整する場合、「イメージ > 色調補正 > 色相・彩度（Cmd+U）」で明度と彩度の数値をあげてから色相を変化することで色調整できる。
Photoshopで保存した後、Character Animatorの録画モードで、瞳の変位量が目の大きさに合わせて自動調整されていることを確認してみよう。
hr.icon
10. 応用編（紹介のみ）
細かく設定を行うことで、まぶたの動きのトラッキングや瞳を目の縁の外側に出ないようにマスクさせることもできる。
https://gyazo.com/4fd75bef5ceae8c5978c2d10b0ff0811
hr.icon