3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

プロ生ちゃんAdvent Calendar 2016

Day 23

SpineのIKを使ってプロ生ちゃんに動いてもらう

Posted at

#はじめに
このエントリーは プロ生ちゃん Advent Calendar 2016 の第23日目の記事です。
http://qiita.com/advent-calendar/2016/pronama-chan

参加を始めて早くも3年が経過してしまいました…。早すぎ(;´∀`)
今年もめげずにSpine関連です。

#今回したいこと
IK(インバースキネマティクス)とやらを使ってプロ生ちゃんに動いてもらおうと思います。
これを使えば接地面に対してのアニメーション作成が楽になる、はずですw
画像多用で説明少々なところはご了承下さい=3

#下準備
今回はこちらの絵を使用させて頂きます。
000.PNG

これをSpineで読み込んでボーン作成して…まではいつもの通り。
Spineでは1つのIKに対して2つのボーンまで設定できますので、脚はふとももとスネのボーンを対象にします。
画像スロットでMeshを作成して2つのボーンをバインドしておきます。
0035.PNG

#IKを設定してみる
ふとももとスネのボーンを選択した状態で新規→IKコンストレイントを選択します。
0055.png

すると、どこにIKを設定するか問われますので、かかとあたりに設定します。
00555.PNG

これでIKを設定できたので、いざこの赤い丸を上に動かしてみます。。。
すると…
0055555.PNG

曲がる方向が違う!!(;´∀`)
この曲がる方向の設定は作成したIKを選択した時に表示される「曲げ」の部分で設定できます。
こちらにチェックを入れると、
005.PNG

期待する方向に曲がってくれました。ホッ(*´∀`)=3
00555552.PNG

以上で無事IKを設定することができました!
これまではアニメーション作成時、ボーン一つ一つを微調整しながら動かしてましたので、
複数ボーンが連動して動いてくれるのは非常に助かります。

#おまけ①
靴のボーンに下記のようにIKを設定すると、身体を上に持ち上げた時につま先をだらーんと(?)動かす事ができます。
使いどころは…背中にロケット積んで浮かぶ時とかロボットがジャンプする時とか…かな?w
007.PNG
008.PNG

#おまけ②
足首あたりのウエイトを調整する事で自然な動きを表現することができます。
向かって左が調整済み。右が未調整。

IKで画像を動かす際に足首周辺のウエイトを調整する事で自然な足首の曲がりを表現できる。向かって左が調整済み。右が未調整。 pic.twitter.com/1Amv5MkJ6Y

— まぼろしのおに (@Mavoroshi_Oni) 2016年12月19日

#おわりに
本当はUnityに取り込んで段差でちゃんとIKが働くところまで確認したかったのですが、
力及ばずで確認できていません。※誰か教えて下さい…

Spine Runtimeの「5 Basic Platformer」を参考に今後も精進致します。

↓立ち絵
b.PNG

↓段差あり
a.PNG

最後まで読んでいただき、ありがとうございました!

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?