Spineでイヤリングや服の裾など「揺れもの」のアニメーションを作るとき、ウェイトの設定に悩んだことはありませんか？
筆者も最初はボーンの根元付近のウェイト設定でよく失敗していました。
この記事では、自然な揺れを作るためのウェイトの基礎と、実際のチャームを使ったチュートリアルを解説します。
イヤリングや服の裾など…
揺れるモチーフで自然な動きを出すのって意外と難しいですよね。
ウェイトとは、メッシュの各頂点が「どのボーンに・どれくらい引っ張られるか」を決める数値のことです。
このウェイトを正しく設定することで、自然な揺れ表現が作りやすくなります。
今回はウェイトの基礎的な知識をご紹介します。
チュートリアル形式で解説しますので、ぜひ一緒にやってみましょう！
Spine揺れ作成チュートリアル
今回は動画のように揺れるチャームを作ってみたいと思います 。
今回はチャームのついたイヤリングの想定でイラストを用意しました。
チェーン部分と宝石の2つのパーツ構成になっています
①ボーンの配置
揺れものにボーンを入れていきます。
揺れものの連結されているボーンの長さは、
根元から先に行くにつれて短くなっていくようにしましょう
宝石部分は大きな塊なので、1本のボーンにしましょう。
②メッシュ分割の配置
今回は揺れものであるチェーン部分の画像が1枚だけなのでメッシュ割りをしていきます。
基本的に揺れものは短冊状にメッシュ分割しておくとこの後のウェイトの調整が楽になります。
短冊状にメッシュを作るのは髪の毛などでも同じです。
自動でメッシュを制作するとよく先の部分が尖ってしまうことがあるので
なるべく短冊状になるように調整した方が綺麗に揺らせます。
③ウェイト
メッシュをボーンにバインドして、ウェイトをつけていきます。
この時にウェイトをつけるときに
ウェイトを振るボーンの根元より後ろにウェイトを設定してしまうと、
揺らした時に反対側が反るように動いてしまいます。
なので、ボーンの根元より後ろにはウェイトを設定をしないようにします。
具体的には画像のようなウェイトの振り方をしていると
実際に動かした時に曲げたボーンの「上側」が曲がってしまいます。
④モーション付け
ウェイトが設定できたらモーションをつけましょう。
フォロースルーやオーバーラップで
揺れているように見えるモーションをつけていきます。
※揺れの表現をさらに深めたい方は、アニメーション12の原則を解説した以下の記事も参考にしてみてください。
フォロースルーやオーバーラップの考え方が詳しく解説されています。
完成！
応用
ウェイトは一定の規則に沿って設定することで
きれいな揺れを表現することができます。
画像を立体的に見せるためのウェイトの振り方もあります。
それと過去に紹介したトランスフォームコンストレイントを組み合わせることで
https://2d-studio.crdg.jp/blog/2022/05/17/1274/
このように3dモデルのような揺れも再現することができます。
まとめ
ということで、「ウェイト」を使って作る揺れモーションの解説でした！
ウェイトの考え方を身につけると、イヤリングだけでなく、髪の毛・スカート・マントなど、あらゆる揺れものに応用できます。
ぜひ今回のチュートリアルを参考に、自分のキャラクターで試してみてください！
ぜひやってみてくださいね！
一緒に働きませんか？
Planet Design Studio｜C&R Creative Studiosでは、現在仲間を募集中です！
募集要項や応募方法については、以下のリンクからご確認ください。
