!!
#Mix-and-match
「Mix-and-match」プロジェクトでは、[スキン](/spine-skins)、[スキンボーン](/spine-skins#スキンボーン)及び[コンストレイント](/spine-skins#スキンコンストレイント)、[メッシュ](/spine-meshes)、[IK](/spine-ik-constraints)、[トランスフォーム・コンストレイント](/spine-transform-constraints)、[パス・コンストレイント](/spine-path-constraints)など、様々なSpineの機能を利用しています。
様々なアプリケーションやゲームで、髪型、目、ズボン、イヤリングやバッグなどのアクセサリーなどさまざまなアイテムを組み合わせてユーザー独自のアバターを作成できるようになっていますが、このMix-and-matchプロジェクトではそのようなシナリオのためのベストプラクティスを紹介しています。
## スキン
このプロジェクトでは、ランタイムでカスタム可能なアバターを作成できるように、パンツやバッグなどの各アイテムを表す独立したスキンがたくさん用意されています。
各フォルダは、キャラクターを構成する各アイテムのスキンを整理するために使用されています。
アイテムの中には、ドレスのように、スキンボーンやコンストレイントが含まれているものもあります。
これらのスキンボーンやコンストレイントは、それらを含むスキンがアクティブな場合にのみ有効になります。非アクティブなボーンやコンストレイントは、ツリーやビューポート上で非表示にすることができます。
[スキンビュー](/spine-skins-view)で任意のスキンをピン留めすると、様々なスキンの組み合わせを見ることができます。
このキャラクターはもともとPhotoshopでデザインされ、[PhotoshopToSpine](https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop)スクリプトを使ってSpineに取り込まれました。スクリプトを使用すれば、新しいアイテムをPhotoshopファイルに追加してエクスポートした後、Spineプロジェクトにインポートして追加することができるので、後からでも簡単にアイテムを追加することができます。
##顔のコントロール
顔の2.5D効果は、いくつかのボーンとメッシュが`head-back-control`と`head-control`という2つのメインボーンの影響を受けることで表現されています。片方は[トランスフォーム・コンストレイント](/spine-transform-constraints)を使用して他方にトランスレートミックス`-100`で制約されています。
これにより、トランスレートを適用すると、対象となるボーンがもう一方とは逆方向に動くようになります。
反対方向に動くこの2つのボーンにメッシュをウェイト付けすることで、こちらの[キューブのヒント](/spine-tips.php#6-cube2)にあるように、奥行きのある効果を加えることができます。
また、目、口、鼻、その他の顔の特徴を表すボーンを`head-control`ボーンに対して制約することで、さらに奥行きを増しています。トランスレートミックスを`20`などの低い値にすることで、これらのボーンはターゲットボーンにゆっくりとした速度で追従し、わずかなドラッグで顔の奥行きを強調します。顔周りの髪の毛や帽子も同様の方法で作成しています。
##自由に曲がる手足
キャラクターの手足には[Stretchymanのプロジェクト](/spine-examples-stretchyman)でも使用したリギングが施されています。手足を構成する画像は、Spine上できれいに曲げられるように、まっすぐに描かれています。
##バッグ
バッグは4つの画像と7つのボーンで構成されています。`back-strap-back`および`bag-strap-front`ボーンは`arm-front-control`ボーンに親子付けされており、バッグの両ストラップが肩にくっついている状態を維持します。`bag-strap-back`および`back-strap-front`スキンプレースホルダー以下のメッシュは、肩に対して適切な位置にあるように、これらのボーンにウェイト付けされています。
同様に、`bag-back-down`および`bag-back-front`ボーンは、メッシュのウェイトを介してストラップをバッグ本体に固定しています。
`bag`ボーンは、他のすべてのバッグ用ボーンの親であり、バッグの回転と全体の位置を制御しています。
`bag-control`ボーンは、バッグに奥行きを出すために使用されています。`bag-base`および`bag-top`スキンプレースホルダーの下のメッシュは、ボーンを動かすとメッシュが歪んで遠近感を出せるように、このボーンにウェイト付けされています。この効果をコントロールしやすくするために、ボーンはバッグの遠近法的な視点で最も遠い位置に配置されています。奥行きの錯覚を完成させるために、後ろのストラップの一部を制御する`back-bag-down`ボーンも`bag-control`以下に配置されています。
時折、バッグのフラップを他の部分から離したい場合があります。この副次的な動きは`bag-top`メッシュにウェイト付けされている`bag-flap`ボーンを動かすことで作ることができます。
円筒形のバッグの正面の円形の側面が、遠近感による歪みのピボット(基準)の役割を果たしています。すべてのメッシュはバッグの遠いパーツが近いパーツよりも速く動くようにウェイト付けされています。
`bag-top`メッシュも同様の理論で遠近感のある歪みを出しています。`bag-flap`ボーンは、`bag-top`メッシュの下部に最も影響を与え、`bag-control`は、フラップの左上部分に最も影響を与えます。
重要な点は、[ウェイト](/spine-weights)ビューで見れる`bag-top`メッシュのウェイト付けに使用されるボーンの順序です。これにより、`bag-flap`ボーンの影響を最も受ける三角形が`bag-control`ボーンの影響を最も受ける三角形よりも上に描画されるようになります。三角形の描画順序をコントロールすることで、間違ったオーバードローをせずに、より広い範囲の動きを可能にします。
##バックパック
バックパックは4つのボーンの影響を受ける5つの画像で構成されています。`backpack`ボーンはバックパックの全体的な回転と位置を制御しています。`backpack-control`ボーンは、バックパックに奥行きを与えるために使用されています。
`backpack-strap-front`および`backpack-strap-back`メッシュは遠近感の歪みを加えるために`backpack`および`backpack-control`ボーンにウェイト付けされています。この2つのメッシュは、ストラップを肩に固定するためにそれぞれ`arm-front-control`と`arm-back-control`ボーンにもウェイト付けされています。
`backpack`ボーン以下にある残り3つのメッシュ(`backpack`、`backpack-pocket`、`backpack-up`)も`backpack`および`backpack-control`ボーンの両方から影響を受けるようにして、遠近感による歪みを加えています。
遠近感の歪みを加えるために、見ている人に近い頂点は`backpack`ボーンの影響を大きく受け、見る側から遠い頂点は`backpack-control`ボーンの影響を大きく受けるようになっています。`backpack`ボーンはピボット(基準)の役割を果たし、`backpack-control`ボーンは遠近感の歪みの量をコントロールします。
バックパックを少しだけ上から見えるようにするために`backpack-up`というメッシュを追加しています。セットアップポーズでは、このメッシュは`backpack`メッシュの後ろに描かれています。`backpack-control`を上下に動かすことで、`backpack-up`メッシュで構成されたバックパックの上部を見ることができます。これにより、バックパックに立体感が加わります。
しかしこのような要素をセットアップポーズの中で隠れるように配置するのは大変です。そこで`backpack-control`ボーンをANIMATE(アニメ化)モードで`backpack-up`メッシュが見える位置に移動させてから[バインディングをアップデート](/spine-weights#バインディングをアップデート)を使うことで、ボーンのセットアップポジションを変更することなく、このメッシュをボーンにバインドしました。
##帽子
このスケルトンには、スタイルの異なる2つの帽子が含まれています。セットアップ自体は同じなので、ここでは片方だけを解説します。
帽子は1つのメッシュと3つのボーンで構成されています。`hat-base`ボーンは帽子を独立して動かすことができます。`hat`ボーンは帽子を曲げ、`hat-control` ボーンは奥行きを加え、顔の2.5Dコントロールにわずかに追従します。
簡単に曲げられる帽子を作るために、`hat`メッシュは5～6個の頂点を持つ水平な列に分割しています。これにより、リアルな曲げや歪みをモデル化するのに十分な頂点を持つ円錐形のトポロジーが作られます。
`hat`メッシュは、帽子を構成する3つのボーンすべてにバインドされています。上部の頂点は主に`hat`ボーンの影響を受け、下部の頂点は主に`hat-base`ボーンの影響を受けます。奥行きは主に`hat-control`の影響を受ける中央の頂点に追加されています。
##赤いケープ
この赤いケープは、ボディの動きに追従する柔軟なリグを作成する方法を説明しています。また、手間のかかる手動でのメッシュ変形やボーンのトランスフォームのキー設定を行わずに、簡単にセカンダリモーションを追加することができるようになっています。
このケープは、2つのメッシュ、1つの領域アタッチメント、10個のボーンで構成されています。2つのメッシュはケープの肩の部分を構成しています。領域アタッチメントはリボンの部分です。
ここでは、メッシュの変形挙動を容易に制御できるように配慮しています。下部のレースは、各パーツの形状を維持したまま、5つのセクションからなる帯状に分割されています。上辺の頂点の変形挙動を良くするために、肩のボーンの位置に合わせて頂点を配置しています。また、各メッシュの外側の最下端も3分割して、セカンダリモーションが多く発生する部分の曲がり具合を滑らかにしています。
`cape-red-up`メッシュは4つのボーンにバインドされています。`body-up`はボディに取り付けられているため動く必要のないパーツ用に、`cape-red-front-outside`はセカンダリーモーションの大部分を制御するために、`cape-red-front-inside`はケープの内側のパーツを個別に制御するために、`shoulder-front`tは肩の回転を固定するためにあります。`cape-red-down`のメッシュにも同様の手法が用いられています。
`cape-red-front-outside`ボーンは`cape-front-rotator`ボーンの親になっていますが、このボーン自体は腕の親になっていて、メッシュには直接バインドされていません。ケープの大きな動きは、このボーンを回転させることで作成されます。スキンに合わせた微調整は、`cape-red-front-outside`ボーンで行います。
さらに、`shouder-front-transform`というボーンとその子の`shoulder-front`は、ケープが腕の回転を模倣するのに役立ちます。これは、`shoulder-front`というトランスフォーム・コンストレイントによって行われます。 このコンストレイントがないと、腕を完全に回転させると、筋肉の収縮によるボリュームを生み出す代わりに、肩が体の中に入り込んでしまいます。肩の回転を処理する別の方法については[肩に関するTips](/spine-tips.php#4-shoulder)をご覧ください。
##青いケープ
この青いケープは6つのメッシュと16個のボーンで構成されています。
上部は`cape-blue-up-front`と`cape-blue-up-back`の2つのメッシュで構成されており、下部ではそれらを固定する`body-up`ボーンの影響を受け、中間部で`head`ボーンの影響を受け、頭頂部では`cape-control`ボーンの影響を受けてケープがある程度自由に動けるようになっています。`head-control`と`head-back-control`ボーンの影響で、ケープに奥行きが出ています。2つのメッシュの上部パーツの継ぎ目がきれいになるように、それぞれのメッシュは、もう一方のメッシュと同じ位置に同じウェイトの頂点を持っています。
青いケープの肩の部分は、赤いケープに適用されたのと同じ原理に従っています。大きな動きは`cape-front-rotator`および`cape-back-rotator`ボーンで制御され、細かい調整は、`cape-blue-up-front`および`cape-blue-up-back`ボーンで行われます。肩の部分は`body-up`にバインドして体に固定されています。
ケープの背中を覆う部分には、`cape-blue-up`、`cape-blue-down`、`cape-blue-down-middle`の3つのボーンがあります。ボーンは上から下に向かってだんだん小さくなっています。これらのボーンは、ケープの全体的な形をコントロールしています。3つのボーンはそれぞれ、左右にある2つのボーンをコントロールします。これらのサイドのボーンは、ケープの境界部分のディテールを整えるのに役立ちます。
##青いドレス
このロングドレスは、`body-dress`、`sleeve-front`、`sleeve-back`の3つのメッシュで構成されています。`body-dress`メッシュの上半分は`body-up`ボーンにウェイト付けされ、上半身にくっついています。下半分は一連の小さなボーンにバインドされており、すべて`skeleton-control`ボーンに親子付けされています。これらの小さなボーンは、一連のトランスフォーム・コンストレイントにより、スケルトンの脚に沿うようになっています。
他の衣装アイテムと同様に、ドレスを制御するための独立したボーンのセットを持つことで、フォロースルーとセカンダリーモーションのアニメーション作成が非常に簡単になります。すべてのウェイト対象のボーンを手動でアニメーションさせる必要はなく、コンストレイントのミックス値を調整するだけで、スケルトンの脚のボーンの動きに追従させたり、無視させたりする効果を得ることができます。
##緑のドレス
この緑のドレスは、2枚のスカートのレイヤーのための2つのメッシュと、上半身のボディ部分のための画像で構成されています。全体的な動きは、スカート専用のボーンの親となる`body-down`および`body-up`ボーンによって制御されています。
スカートの左右にある2つの長いボーン`skirt-rotation-front`と`skirt-rotation-back`は、スカートの大まかな動きを担当しています。しかし、これらのボーンはスカートのメッシュに直接バインドされていません。その代わりに、`skirt-control-front`および`skirt-control-back`ボーンの親として機能しています。これらはセカンダリーモーションに使用され、メッシュの左側と右側の頂点にウェイト付けされています。スカートの中央部分は、追加のセカンダリーモーションのために、`skirt-control-up`ボーンにウェイト付けされます。スカートの上部は、ほとんどが`body-up`にウェイト付けされており、スカートが体に密着するようになっています。
アンダースカート(背面にあるスカート)は、基本的にはその上に重ねられたスカートに追従しなければなりませんが、スカートが重ねられている感じを表現するためには、追加のコントロールが必要になります。これはアンダースカートのメッシュを`skirt-control-back-down`、`skirt-control-front-down`、`skirt-control-middle`ボーンにウェイト付けすることで実現しています。これらのボーンは、`skirt-control-back`、`skirt-control-front`、`skirt-control-up`ボーンの子になっています。このセットアップにより、アンダースカートは通常、前面にあるスカートに追従しますが、独自のセカンダリーモーションコントロールボーンを利用して誇張のためのコントロールも可能になります。
##ビデオ
このプロジェクトの制作過程は以下のビデオでご覧いただけます。配信内容の完全なインデックスとオリジナルのプロジェクトファイルは[Spine Twitchアーカイブ](/spine-twitch.php)でご覧いただけます。
このページからダウンロードできるプロジェクトファイルは、Spineに同梱されているものと同様に、スキンボーンなどのSpineエディターの新機能を利用した改善版になっています。
[youtube:a4JG9AdIw2s]
[youtube:0yEIMe7WAO0]
[youtube:NJ4AIxdW4Ts]
[youtube:zz4JS0z6KgY]
[youtube:dDkIL9Xwm5E]