Spineのトランスフォームコンストレイントを使って動きを連携させる

スポンサーリンク

トランスフォームコンストレイントは、ターゲットのボーンに追従するような動きを作ることができます。
ターゲットボーンを動かすと、該当ボーンがそれに合わせてトランスレートやスケーリングを行います。

ターゲットボーンと追従ボーン

Spineのボーン
まずはこんなカラフルなおでんのような素材を用意しました。
三角、マル、四角とそれぞれ画像は分かれています。
それに一つづつボーンを入れたものです。


トランスフォームコンストレイント
最初に追従ボーン(赤三角のボーン)から「コンストレイント→新規→トランスフォーム・コンストレイント」を選択。
(便宜的に、動かす方のボーンをターゲットボーン、追従する方のボーンを追従ボーンと呼んでいます)


ターゲットを選択
ターゲットボーン選択画面で、青マルのボーンを選択。

ミックスとオフセット

トランスフォームコンストレイント
ミックスは、追従ボーンがターゲットボーンから受ける影響度(パーセンテージ)です。
100%を指定するとターゲットボーンと同じ状態になるので、例えばトランスレートに100%を指定すると、以下のようにボーン同士がピタリと一致します。
50%だとちょうど間の位置、0%だと一切動きません。

オフセットなし
オフセットは、追従ボーンとターゲットボーンの差分を埋め合わせる機能です。
一致を押すと両ボーンの現在の差分が追加されます。
すると、ミックスで値を動かした時に、オフセット分が付与されるので、結果的に下記のように追従ボーンは現状のまま状態が保持されます。

オフセットあり
オフセットのトランスレート項目の順序が、XY表示ではなくなぜかYX表示なのは謎です。

オフセット

オフセットの有無

オフセットなし
オフセットなし
例えば初期状態で、赤三角の回転が0で、青マルの回転が90だとします。
その場合、ミックスが100%になると、赤三角の回転は90になります(青マルと同じになる)

オフセットあり
オフセットあり
それを、オフセットで回転に-90をあらかじめ追加しておくと、ミックスで影響度の値を変えても、オフセット分で相殺するので回転は変わりません。

ターゲットボーンを動かす

以下はあらかじめオフセットの一致を押してから、ミックスにすべて50%を入れて、ターゲットボーンの青マルを動かしてみた例です。

回転
回転

トランスレート
トランスレート

スケール
スケール

トランスフォームコンストレイント同士の連携?

circleConst
rectConst
「赤三角を追従ボーン、青マルをターゲットボーン」
「青マルを追従ボーン、黄色四角をターゲットボーン」
としたコンストレイントを作って、黄色四角を動かすと青マルから赤三角にも動きが伝播していくんじゃないかと思ってたのですが、どうも無理なようでした。
以下のように赤三角が動きません。
赤三角が動かない


なので、
「赤三角を追従ボーン、黄色四角をターゲットボーン」
「青マルを追従ボーン、黄色四角をターゲットボーン」
とした、黄色四角を軸としたコンストレイントにすると解決しました。

トランスフォームコンストレイント


[参考サイト]
spine トランスフォームコンストレイント基本 - ムーぶろ
SpineでGF(仮)のガールを動かしてみた(メイキング2/2:カードイラスト実践編) | CyberAgent Developers Blog

[環境]
Win10
illustrator CS2
photoshop CS2
Spine 3.8.76 Professional