SpineでSDの足元の影を体と連動させて動かすリグ
Spine2Dで作るちびキャラ（SD）のアニメーションで、足元に楕円状の影を表示して動かすことがあるかと思います。
キャラが横へ行けば横へずらし、ジャンプしたら小さくするといった、普通の影とは違うデフォルメされた動きです。
作るアニメーションが数個くらいなら手付けでもいいのですが、多くなってくるとめんどくさいです…！
動きに連動させるというと、まずトランスフォームコンストレイント（以下TC）が思いつきますが、シンプルにトランスレートだけ100%にするとジャンプしたときに上がって、地面から離れてしまいます。
スケールを100%にしても体のスケール自体は変わらないので、変化させることができません。
今回はSpine 3.7で追加されたIKの拡縮オプションを組み合わせて、そのリグを作ることができました！
ツイートにメイキング動画を載せているので、この記事は補足や小ネタなどを紹介します。
Spineでちびキャラを動かすとき用の「足元の影を左右は横移動・上下は拡縮」で連動するリグできたから、作り方の動画作りました！noteには補足や影画像の小ネタとか！大量のSDモーション作らなきゃいけない人に届け！！！！ https://t.co/SlJH62oi6D #madewithspine pic.twitter.com/rA2x9mqXTp
— 頼鳥 碧❧よりどり みどり (@yoridrill) May 10, 2020
仕組み
拡縮のピボットをキャラのかなり下にすることで、ジャンプしたときに位置が上がる動きを、縮小で下へ縮む動きで打ち消して、上下位置を固定しています。
床ボーンを作る
キャラを動かすボーンの外に、拡縮用IKのターゲットになる床ボーン（_floor）を作ります。
位置連動ボーンを作る
キャラのボーンの外に、連動して移動するTC用のボーン（_TC_translate_shadow）を作ります。
どこに連動させるかは悩みどころですが、いくつかゲームのちびキャラを観察してみたところ、腰やお尻がいいのかなと思いました。
頭だと頷いただけで影が動いてしまい、デフォルメされる前の人の動きでイメージすると不自然です。
足も、例えば大の字のジャンプと棒立ちジャンプで影の大きさを大きく変えたいかというとそうでもないので、足も楕円状の影の本質ではない気がします。
もちろん足の接地面に影がないのは不自然なので、頭身高めかつ低姿勢の格闘ポーズなど、足を極端に大きく開くものは足に合わせた方が良さそうですが、今回はお尻に合わせて動くようにします。
位置連動ボーンの初期位置は、キャラの基準にしたいボーンと必ず同一にします。
Ctrl+C, Ctrl+V で位置などはコピペできます。
お尻ボーンと位置だけ連動するように、TCをトランスレート100%で設定します。
これで、お尻ボーンの回転などの影響を受けないボーンが作れます。
このボーンの初期位置だけは、厳密に同じにしないといけません。
理由は、位置がずれているとTCのトランスレートだけ100%にしたときでも、基準のボーンが回転や拡縮をすると動いてしまうためです。
TCのローカルのオプションを有効にすることで防ぐこともできますが、そうするとキャラを左向きから右向きへスケールX:-1で反転させたときに、影の左右の動き方が逆になってしまいます。
拡縮IKボーンを作る
位置連動ボーン内に、ジャンプ最大高さ分、下へボーン（_IK_scale_shadow）を作り、角度や長さを床ボーンへ向けて合わせます。
キリがいい数字だと合わせやすいです。
これが拡縮の素になります。
ジャンプ最大高さは身長と同じくらいがいいかなと思います。
短いと影の拡縮が激しくなり、またリグ構成の都合上、横へ移動したときにも対角線が長くなり、スケールが大きくなってしまうので、影が大きくなってしまいます。
床ボーンをターゲットでIKを設定し、下記にチェックを入れます。
・圧縮（縮むのを許可）
・ストレッチ（伸びるのを許可）
・統一（拡縮するとき縦横比を固定）
拡縮連動ボーンを作る
拡縮IKボーンの外、位置連動ボーンの中にボーン（_TC_scale_shadow）を作り、位置を拡縮IKボーンと合わせます。
拡縮IKボーンと、TCをスケール100%で設定します。
影画像を入れて、コンストレイントをリセット
拡縮連動ボーンの中に、影の画像を入れます。
そのままだとTCの適用順が乱れていて、上手く動かないことがあるので、ツリーの「コンストレイント」を押し、右下の「リセット」を押します。
これで適切な順番に並びます。
完成！
これで完成です！
アレンジですが、拡縮連動ボーンを少し上へずらすと、拡縮の基準位置が上がり、影が手前の弧は拡縮が大きく、奥の弧は小さくといったパースがかかったような見た目になるので、これも面白いです。
小ネタ：影の画像をふんわりとした楕円にする
楕円形ツールで描いたそのままの楕円だと無機質で少し硬く、左右端が尖っているようにも感じますが、ほんの少し長方形に近付けることで、ふんわりとした手書きに近い印象を与えることができます。
右の影はIllustratorの効果でワープの膨張-8%をかけています。
詳しくは下記の方が紹介されています。
特に2つめの記事の、漫画の吹き出しをペラペラな平面ではなく、立体空間上のバルーンと捉える図は興味深いので、ぜひ一読を！
最後まで読んでくれてありがとうございます！ 良ければサポートしてもらえると嬉しいです！