![見出し画像](https://assets.st-note.com/production/uploads/images/95993201/rectangle_large_type_2_6ce72c8daa45d63771a8bfec2fb5706e.png?width=1200)
Spineで犬のモーションをつくる/動物の歩行アニメーション解説
▼はじめに
こんにちは。2DモーションデザイナーのY.Yです。
今回は犬のモーションの制作方法について、イラストの調整段階からモーションをつくるまでを解説したいと思います。
四足歩行の動物は骨格や足の運び方が人間とは異なるので、特徴を捉えながら組み立てていく必要があります。
動物のアニメーションを製作しようと思ってる方の参考になれば幸いです!
今回使用するSpineのバージョンは4.0.27になります。
▼完成形
今回の記事ではドーベルマンのイラストを使って、歩くモーションを制作していきます。
![](https://assets.st-note.com/production/uploads/images/96523512/picture_pc_cac4a26d18e8f3e342f89bca5ac0f902.gif)
■以下の手順で進めていきます
STEP 1:イラストの調整
STEP 2:ボーンの設定
STEP 3:メッシュ割りとウェイト付け
STEP 4:IKの設定
STEP 5:歩行モーションの作成
▼イラストの調整
犬の骨格を元に足は前足、後ろ足ともに3つのパーツに分けます。
関節はできる限り正円にしておきます。
![](https://assets.st-note.com/img/1674720871005-KY1myAieFe.jpg?width=1200)
![](https://assets.st-note.com/img/1674720896920-RpDmC1uriM.png?width=1200)
![](https://assets.st-note.com/img/1674720907696-gYJZj2qv0v.png?width=1200)
PhotoshopToSpineという書き出し用のスクリプトを利用してパーツ分けしたデータを書き出します。
![](https://assets.st-note.com/img/1674720955260-QYbYh4ii1r.png?width=1200)
![](https://assets.st-note.com/img/1674720979575-vt6AIXSHFH.png?width=1200)
全てのパーツを分けるとこのようになります。
![](https://assets.st-note.com/img/1674721000597-0GfTRBJWvH.png)
▼ボーンの設定
Photoshopにて調整後、書き出しをおこなったパーツをSpine側へインポートし、まずはボーンを入れていきます。
ボーンの作成は親にしたいボーンを選択後、ボーン作成のキーを押してボーンを入れたい場所をクリックします。(一番最初に打つ起点となるボーンはrootを親にして作ります)
![](https://assets.st-note.com/img/1674721037917-eQmssVxLtp.png?width=1200)
![](https://assets.st-note.com/img/1674721047778-mHq093JN8k.png?width=1200)
![](https://assets.st-note.com/img/1674721067542-gbq7d6JbQn.png?width=1200)
お尻の骨盤に起点となるhipボーンを置き、そこから胴体や後ろ足のボーンをつくっていきます。
![](https://assets.st-note.com/img/1674721077631-Ov8jEY4t82.png?width=1200)
今回はこのようにボーンを設定しました。
![](https://assets.st-note.com/img/1674721180908-gFRqJwgNlq.png?width=1200)
▼IKコンストレイントの設定
IKコンストレイントとはボーンを先端から動かせるようにするコンストレイントです。
1つのIKには1〜2本のボーンを設定することが可能です。
![](https://assets.st-note.com/production/uploads/images/96525357/picture_pc_0df67ec54c75c4728a0f6d4a00e0ecf0.gif)
IKを設定したいボーンから子ボーンを生成し、それをroot直下へ移動させてターゲットボーンとして使用すると、破綻なく綺麗にIKを設定することができます。
![](https://assets.st-note.com/img/1674721239121-Dbn78rXjad.png?width=1200)
![](https://assets.st-note.com/img/1674721254587-uy1N8vFba9.png)
![](https://assets.st-note.com/img/1674721274589-t0qRXOCms5.png?width=1200)
今回は足の先にIKを使用します。
後ろ足に2つ、前足に1つ設定しています。
![](https://assets.st-note.com/img/1674721436601-PL9e23hjBn.png?width=1200)
▼メッシュ割りとウェイト付け
ボーンの配置が終わったらメッシュを割りウェイトを付けていきます。
メッシュにしたいイメージを選択して、オプションのメッシュにチェックを付けます。
![](https://assets.st-note.com/img/1674721854027-lNBzAZfisU.png?width=1200)
次にその下にあるメッシュ編集のボタンを押し、メッシュ編集モードに入ります。
![](https://assets.st-note.com/img/1674721869627-R9cvzEecaj.png?width=1200)
メッシュ編集のメニューから作成or変更を選択し、各パーツの輪郭に沿わせるようにメッシュをきっていきます。
![](https://assets.st-note.com/production/uploads/images/96525133/picture_pc_accc99c7b5f747c946ca3d5ca627150e.gif)
細かい書き込みのあるパーツは動かした際にラインが破綻しないよう、アウトラインやシワの線などに合わせてメッシュを細かく割っていきます。今回は前足の上のパーツにシワの書き込みがあるため、ここは細かく割っています。
![](https://assets.st-note.com/img/1674722702142-M2gQmSRBQf.png?width=1200)
ウェイト付けでは関節周りは特に繋がりが綺麗になるように気をつけます。ウェイトのビューでオーバーレイにチェックをつけることで色でボーンの影響力がわかるようになります。綺麗にグラデーションになっているほど滑らかに繋がります。
![](https://assets.st-note.com/img/1674722722278-w0rPb8wC4s.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/96525728/picture_pc_444cecee25c5e3bbdffb217f12a4823e.gif)
先ほどメッシュを細かく割った前足上のパーツは、アウトライン周辺は下にあるbodyパーツとのズレが出ないように極力同じ割合でウェイトをつけていきます。胴体の中間部分やシワの部分は前足の動きに連動するように実際にアニメーションをさせ確認しながら調整していきます。
![](https://assets.st-note.com/img/1674722770304-JU4SexJeP7.png?width=1200)
▼歩行モーションの作成
セットアップが完成したらモーション作成に入ります。
今回は30FPSで30Fで1ループするモーションとして作っていきます。
犬の歩行と人の歩行との違いについて、意識するべきポイントは2つあります。
1つは足の使い方・動かし方の違い、もう1つは足の運び方の違いです。
1つ目の足の使い方・動かし方の違いから解説していきます。
人間は足先から動かし始めて膝下の部分を大きく動かして歩きますが、犬の場合は足の付け根が一番よく動き、足先は後からついてくるような形になります。また、足を地面から持ち上げる際に人間は膝を曲げますが犬は肩甲骨に当たる部分を稼働させます。
そのためIKは足先のみに設定し、付け根あたりは自由な稼働ができるようにセットアップしています。
![](https://assets.st-note.com/img/1674722809093-UAvGPXnBZw.png?width=1200)
全身のモーションをつける際はボーンの作成した順に、ツリーの階層が上のボーンから動きをつけていきます。子ボーンは親ボーンの影響を受けるため、末端のボーンから動きをつけてしまうと動きの辻褄がうまく合わず調整に時間がかかる可能性があります。
最初はhipボーンから。hipは足を持ち上げる際、着地した際の上下運動が中心になります。hipで上下のリズムを作り、そこから足の動きをつけていくと良いでしょう。
次に2つ目の足の運び方について解説していきます。
人間は二足歩行のため四足に増えた際の足の運びはなかなか想像しにくいものです。
頭の中で想像するだけでは理解できない場合、実際の犬の歩いている動画等をスローにして観察してみましょう。
犬の一般的な歩行では前足と後ろ足でそれぞれ対角にあるものが同じように動きます。
走りなど動きの大きな移動になるにつれて全身をバネのように使って加速するため前足は前足、後ろ足は後ろ足で同じような動きをするようになります。
(下のgifのように手前の後ろ足と奥の前足が同時に前に出ます)
![](https://assets.st-note.com/production/uploads/images/96525843/picture_pc_7c6d22db13966b0a5e8e04d055ad74be.gif)
まず対角にある足の動きを綺麗に揃える形で、足をあげる→前にのばす→着地する→後ろにスライドするという大まかな動きをつけます。
![](https://assets.st-note.com/production/uploads/images/96525511/picture_pc_35bb6c6066aba74ae01629ba70694672.gif)
大まかな動きが形になった段階で次は力の伝達を表現していきます。
大まかな動きをつける段階では、「ポーズを決める」という意味で全てのボーンで同じ位置にキーを打っています。このままではボーンの動きに統一感が出すぎてしまい硬い動きになるので、より動物らしい動きになるように力の伝わり方を意識して少しづつ動きにズレをつけていきます。
![](https://assets.st-note.com/img/1674722893298-RBCkvcqNHI.png?width=1200)
今回はループモーションとして作成しているので、動きのズレをつけていくのにオフセット機能を利用します。オフセット機能とはループモーションで開始フレームと終了フレームを回り込む形でキーを調整することが可能な機能です。終了から開始へ回り込むという点から開始フレームと終了フレームで同じポーズをとっていなければ使用ができません。
![](https://assets.st-note.com/img/1674722928577-tHAeG9fHSX.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/96526844/picture_pc_495f52bd09cf3314240b4b8bfdfbbcbc.gif)
図のようにオフセットのボタンを押した後、動きをずらしたいボーンのキーを摘んで、任意のフレーム数だけ後ろにずらしていきます。これをhipを起点にお尻から頭にかけて、足の付け根から先端にかけてと全てのボーンに対しておこない、自然な動きに近づけます。
![](https://assets.st-note.com/img/1674723845008-INkxdDqMdf.png?width=1200)
モーション制作の仕上げにカーブの調整をしていきます。
グラフビューからカーブを調整することで動きの緩急を付けたり滑らかさを出したりすることが可能です。Spineのv.4以降ではグラフビューが大幅に変更され、よりアニメーション全体の繋がりを見ながらの直感的な操作が可能になりました。
![](https://assets.st-note.com/img/1674724038744-44oa1EyGQt.png?width=1200)
グラフビュー内にある、赤枠内のボタンを押すと0fと最後のフレームの端が繋がって見えるようなループビューになります。(上がオンにした状態、したがオフにした状態)
![](https://assets.st-note.com/img/1674724061198-2MkdVIccUi.png?width=1200)
調整前のモーションを見てみると、上げた足が地面についた際に一瞬止まっているような詰まりを感じます。これをグラフでみるとループの最初と最後の繋がりで曲線が綺麗に繋がっていません。
![](https://assets.st-note.com/production/uploads/images/96527120/picture_pc_05984a7f54c055f6e171d736bf9d7588.gif)
![](https://assets.st-note.com/img/1674724117613-VvWuQ1qiW8.png?width=1200)
最初と最後のグラフの繋がりを綺麗にするためにカーブを手動で調整していきます。
![](https://assets.st-note.com/production/uploads/images/96527249/picture_pc_cba41a580d2550fb9ae607be068e48a1.gif)
このように最初と最後の繋がりを意識して調整することでループモーションの繋がりを滑らかにすることが可能です。
![](https://assets.st-note.com/production/uploads/images/96527260/picture_pc_f22fd69e14fbe5e678e86faef2e61bfc.gif)
四足全てのカーブの見直し、調整したら完成です。
![](https://assets.st-note.com/production/uploads/images/96527306/picture_pc_59fe1f0e86aead70fe47575cf35b0c8a.gif)
▼終わりに
今回は犬のモーションをつくるまでを紹介しました。
セットアップに関しては様々な手法があると思いますが、参考のひとつになれば幸いです。
自分の頭の中でイメージがしづらいもののセットアップやモーション制作をする際は、実際の骨格や動きを観察しながらつくっていくと良いと思います。
Spiners MeetUp
【過去開催のレポート】
Spiners MeetUp vol.1レポート(CG WORLD)
Spiners MeetUp vol.2レポート(CG WORLD)
【過去開催のアーカイブ動画(Youtube)】
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介&ディスカッション
Spiners MeetUp vol.2 "ひねり"を加えたアニメーションを作るハンズオン
Spiners MeetUp vol.3 ~Spineによる立体表現の紹介・解説~
Spiners MeetUp vol.4 ~Spine v4の魅力と新機能紹介~
Spiners(Spineアニメーター)のためのDiscordサーバーを開設しています。
Spineに関する質問、参考になる動画などを共有しあう場として活用していければと思います。
ご興味のある方は以下の招待URLからお気軽にご参加ください!https://discord.com/invite/ae5aHK9