Xprite

アニメーションの制作に入る前に、まずは素材となるノード画像を準備しましょう。
全体のバランスを取りながら、レイヤー別に編集、出力できるツールが理想です。
（イメージはAdobe Photoshop CS5）

各レイヤーが各ノード画像にする想定なので、必要なノード分のレイヤーを描きましょう。
目や口のバリエーション、手の形や顔の角度を変えたい場合、それぞれ準備します。

Xpriteでは、後からノードを追加することも可能ですので、
まずは思い付く分だけでも大丈夫です。

素材は正方形の画像が推奨されますが、長方形のままでも読み込むことは可能です。
その場合、Xprite内部で自動的に正方形化されます。
エクスポートされるノード画像と、
最初に用意したノード画像のサイズが異なりますのでご注意ください。

画像サイズは少し大きめにしておくと、
後々のノード画像差し替え（服のデザイン変更など）が簡単になります。

Xpriteを開き、新規作成したプロジェクトのノードリストに用意したノード画像を追加します。
キャンバスサイズは後から自由に変更できるので、適当でも大丈夫です。
（編集しやすいよう、全身が入る分は確保しましょう）

ゲームで使われるキャラクタアニメーションは、
一般的に以下のノードがトップノード（一番優先度の高いノード）になります。
※一般的な呼称です。ノードリストでは、自由に命名しても構いません。

root（リグ）	キャラクタの足元中心に配置されるリグです。 ootノードがトップノードだと、プログラムでキャラクタの接地位置を決めるときに便利です。
top（リグ）	キャラクタの頭上に配置されるリグです。 頭の上から親子関係が明確に決まるので、親子関係をイメージしやすいのがメリットです。
pelvis	キャラクタの腰をトップノードにするパターンです。 体の重心である腰が親になるので、自然なポージングを制御しやすくなります。

上記はあくまでも制作者がイメージしやすい為の手法に過ぎないので、
実際には自由に設定しても大丈夫です。

今回は、rootノードを設定しました。

トップノードが決まったら、ノードリストを並び替えていきましょう。

pelvis（腰）がトップノードであれば、そこからtorso（胸）、shoulder（肩）、neck（首）～と、
関節の順番に従って並び替えます。

肩から両腕、腰から両脚など、間接が分岐する場合は、並列になるようにしましょう。

目や口、手など、画像の切り替えを行うノードは、どれか一つを基準のノードにし、
他の切り替え用ノードは基準ノードの子に並列で設定すると、
基準ノードに切り替え用ノードが追従するので便利です。

親子関係の設定が終わったら、元々用意した画像を見比べながら、
ノードを配置していきます。
このとき、親子関係が邪魔になったときは、親子関係を切ってしまっても構いません。

ノードは並びましたが、ちょっと変ですね。
まず、キャンバスが窮屈なので、設定からキャンバスサイズを変更しましょう。



キャンバスが大きくなりました（高さを240→480に変更）。

では次に、各ノードの描画順を決めていきましょう。
描画順は、数字が小さい方が上に描かれます。

キャラクタを見て、一番手前にあるノードを基準に考えていくとわかりやすいです。
この場合、顔のパーツを一番手前として、描画順に「0」をそれぞれ入れています。



描画順を設定しました。

root	65535	pelvis	2	skirt_center	3	skirt_L	4
skirt_R	4	torso	1	shoulder	2	neck	3
face	2	L_eyebrow	0	R_eyebrow	0	eye_close	0
eye_mid	0	eye_normal	0	eye_stare	0	mouth_close	0
mouth_mid	0	mouth_open	0	hair	1	L_shoulder	0
L_armA	1	L_armB	0	R_shoulder	0	R_armA	1
R_armB	0	L_leg	5	L_foot	4	R_leg	5
R_foot	4

描画順を設定したら、目や口など、
切り替えパーツが密集している部分のVisibleを設定し、
ポーズの形を整えましょう。

column 髪＞眉か眉＞髪か

現実で考えると、髪の毛は眉毛の上にかかるので、
描画順は眉＞髪になるはずです。

ところが、アニメーションでは髪の下の眉毛の線が見えていることがあります。
これは、眉がキャラクタの表情を決める上で重要な役割を果たすからです。

リアルにするのであれば眉＞髪の描画順が正しいですが、
今回は表情をつける意味でも髪＞眉で設定しました。

次に、間接を動かしやすいようにリギング（リグ設定）を行います。
原則として、間接と関節のつなぎ目にリグを配置します。

リギングが完了したら、いよいよアニメーションの制作に入ります。

尚、リギングを行わずにアニメーション制作に入ってしまっても大丈夫です。
今回は、ノードとノード（関節と関節）の距離が短く、誤差が生じるので、リギングを行いません。
作業者のやりやすい方法を試してみてください。

ウディタエクスポートを行うと、リグ情報は出力されません。
ウディタでリグを使用したい場合は、「透明なノード画像」をリグとして使うことで、
リグと同様の情報を出力することができます。

column リギングワンポイント

リグはノードの制御だけでなく、プログラムで読み込むことで、
様々な用途に使うことができます。

例）フキダシ用ノード

キャラクタの頭上にノードを配置し、
プログラムでそのノードの位置にフキダシを出すと、
常にキャラクタの頭上にフキダシが表示されることになります。
漫符（エモーション）表現の他、状態異常表現を行うときに有効です。

例）コリジョン用ノード

キャラクタのコリジョン（アタリ判定）の基準点としてリグを利用します。
頭の中心に設定してヘッドショット判定に利用したり、
腕などに設定した上でVisibleでアタリ判定の有無を判別することで、
アタックコリジョン（攻撃判定）に利用したりできます。

例）頭上ゲージ用ノード（root）

root（足元中心）のノードから一定の高さの位置に
HPゲージなどを表示すると、キャラクタの頭上にゲージを出すこともできます。

フキダシ用ノードは頭の上下運動に連動してしまうので、
キャラクタの基準位置でもあるrootノードから固定値の高さに設定することで、
自然なゲージ表現が可能になります。