瞳の移動範囲とクリッピングマスク
hr.icon
https://gyazo.com/7afc7163b22b5472b1bddc30f8d26028
1. はじめに
サンプルパペットのリン(上図)のように、瞳の移動範囲が眼球の外まであるキャラクターも多い。このような眼の表現は、以下の2つの方法により実現することができる。
眼球画像とは別に瞳の移動範囲の画像を作成する(下図の水色画像)
瞳のクリッピングマスクとして眼球画像を設定する
https://gyazo.com/390ab8b4cb62c4c3a037fb4cc21ee141
以降、理解しやすくするために、Blank Templateを利用して実験を行う。
hr.icon
2. 準備
① Blank Templateのダウンロード
上記URLサイト一番下のBlank Template(下図)からダウンロードする。
https://gyazo.com/bd3b3343c0001ab78b40ce37f6296191
TemplateBlank.zipを解凍する。
今回利用するのは、TemplateBlank.psdのみ。
https://gyazo.com/e46eab1cbd73639186415216ff7a6327
② PSDファイルの名称変更
TemplateBlank.psdを適当な場所へコピーして、名称変更(キャラクター名)する。
下図では、Eye.psd(任意)としている。
https://gyazo.com/fa217d661fae2bdf2d145d9a6fee3e98
③ 新規プロジェクトの作成
「ファイルメニュー > 新規プロジェクト」をクリックして、任意の場所(ここではDesktop/Character Animator Projects)にプロジェクトを保存する。
https://gyazo.com/fff90e499c1bc48e4525d6d6ebe4d46f
プロジェクト名はEyeとする。
https://gyazo.com/09343aea7cf9a94bcc38bff6a72efe36
空のプロジェクトが作成される。
https://gyazo.com/7167294235fe9e5a13829ab99e4ba7a3
④ テンプレートPSDの移動
Eye.psdをプロジェクトフォルダ内(下図ではDesktop/Character Animator Projects/Eyeフォルダ)に移動する。動作するためにはプロジェクトフォルダの外でも構わないが、わかりやすくするためにプロジェクトフォルダ内に移動している。
https://gyazo.com/2685458a2086938632e699a7913a3c44
⑤ テンプレートPSDの読み込み
Character Animatorの「ファイルメニュー > 読み込み」から、Eye.psdを読み込む。
プロジェクト内にパペット(下図)として読み込まれる。
https://gyazo.com/96c6b4ed88c5645f74dfcb9fcba275ea
⑥ シーンの作成
Eyeパペットを選択した状態で「新しいシーンに追加」アイコンをクリックする。
Eyeパペットトラックをタイムラインに含む「シーン・Eye」(下図)が作成される。
https://gyazo.com/e54c579731d61d9fc457fa64ba75409c
⑦ オリジナルPSDを開く
プロジェクトパネル内のEyeパペットを選択した状態で、「オリジナルを編集」アイコン(下図)をクリックする。
https://gyazo.com/42794df91d127524b81bd61fc96ce861
Photoshopが起動して、Eye.psdが開く。
https://gyazo.com/fbabf69ba67cdc4434825aafb89e0b02
hr.icon
3. 瞳の移動範囲
下図のようにPhotoshopの3つのレイヤーで画像を作成する。
+Right Pupil:瞳
シェイプツールで複数シェイプを描く場合、シェイプレイヤーが複数作成されるので、レイヤーをラスタライズ後にレイヤーを結合を行う(シェイプの結合ではベクターの合成になる)。名称が変わった場合は「+Right Pupil」に修正しておく。
Right Eyeball:眼球
Right Eyeball Range:瞳の移動範囲
Right Eyballを複製して作成、わかりやすく紫色にしている
https://gyazo.com/003003114b3594643a0b0d1594e56981
Character Animatorのリグモードに切り替えて、プロパティパネルのタグをテキスト表示に切り替える(下図)。
https://gyazo.com/721af523b864b087f06a7b0c19f2338a
下記の3つのレイヤーをタグ付する。
Right Pupilレイヤー(瞳):右の瞳、右の瞳のサイズ
Right Eyeballレイヤー(眼球):タグなし
Right Eyeball Rangeレイヤー(瞳の移動範囲):右の瞳の範囲。
実際にはRight Eyeballレイヤーのタグ(右の瞳の範囲)を外すだけ。
Right Pupilレイヤー
https://gyazo.com/b3464d3a5a0548e996e62d8d85b167b0
Right Eyeballレイヤー
https://gyazo.com/b3807efc98a8b391f2a54429d5dabcb2
Right Eyeball Rangeレイヤー
https://gyazo.com/2080f4aeee5fab528e4a4f7708fff156
録画モードで動きを確認する。
パペットトラックビヘイビアの視線はキーボード入力のみ(カーソルキー操作)にしておく。
https://gyazo.com/073ce4cbea4c163938016001edeed722
背景色は黒に変更する。
https://gyazo.com/163020bd5e2719f6d0097b930c782422
カーソルキーで視線を動かすと紫の範囲まで移動して、白の眼球範囲を越えていることがわかる。
2つの方向を同時に押すことで45度方向にも視線を向けることが可能。https://gyazo.com/1787fd3aeab898d642c43abe1bd28707
注意点)瞳の形状と移動範囲画像の形状の関係
Character Animatorのシステムは、移動範囲画像をはみ出さないように瞳画像を動かすため、移動範囲画像と瞳画像それぞれの形状によって移動する限界の位置が想定した位置と異なる場合があるので確認しながら作成する必要がある。
hr.icon
5. クリッピングマスク
Character Animatorでは、2つのレイヤーの上レイヤーに対してクリッピングマスクを設定することで、下レイヤーの画像形状に合わせてマスキングされる。
リグモードに切り替えて、Right Pupilをレイヤーを選択した状態で「パペットメニュー > クリッピングマスクを作成」をクリックする。
https://gyazo.com/3b4ffd733c4e0452386af164ae1e95c7
下図のようにRight Pupilの左に矢印が表示されているのがわかる。
この表記がクリッピングマスクの状態。
https://gyazo.com/0af824928f4331c0f3dbc332facaf9ac
録画モードに切り替えて、カーソルキーで視線移動すると、眼球の範囲でマスクされているのが確認できる。
https://gyazo.com/88b6fe02fc28d9c1191ce9665ee2702f
リグモードに切り替え、Right Eyeball Rangeレイヤーを非表示にする。
https://gyazo.com/a7230d280eb2f688b0c465e294e107aa
hr.icon
参考