モーション

【Spine】2Dアニメーションはいいぞ_アニメーション編【アニメーション】

2022-05-22

前回から日が開いてしまった…

というか結局SD気に入らなくて描き直したせいですが…

Sponsored Links

前回の記事

今日は待ちに待ったアニメーションをさせていきましょう!

待機モーションを作ります

まずは(基本的に)単純な動き、待機モーションを作りましょう。

ちなみに、待機=idle と今後は表記します。

左上のここを押す

もしくはショートカットで「Ctrl+Tab」

私の画面構成

画面は見やすいように配置しましょう!

よく使うツールは、

  • ツリー
  • アニメーション
  • ウェイト
  • ドープシート
  • グラフ
  • プレビュー(個人的に一番大事)

です。たまに「ゴースト化」「再生」なども使用しますが、使うときに出す程度でも問題ないかと思います。

ここを押す

さっそく新規アニメーションを作成していきましょう。

初期の段階ですでに「animation」という名前のアニメーションのやつがあるかと思いますが、そのまま使用していただいて問題ないです!

ダブルクリックでリネームできるので、なんの動きなのかがわかりやすいように「idle」と変更しておきましょう。

なんかフォルダ映ってますがこれは気にしなくで大丈夫です……!!

セットアップすら面倒…!

という方は、前回で配布したhttps://toumei2suisai.booth.pm/items/3850231(←Booth)内に「SD_setup.spine」があるのでそちらをご使用いただければと思います。

ちなみにSpineの本って少ないのですが、私の知る限り有名な奴はこのあたりです。まあ、役に立ったかといわれると…ですが。

評価もそんなにげほげほ

当記事ではSpineいったん触ってみようぜ!! という気持ちで書いているので、一つ一つの詳しいところはまた別の機会に…

そして今更ですが、私はほぼ独学(先輩データを見て盗んだ)のでもっといいやり方もあるかとおもいます…

idleといえば

腰が上下or左右にするよね!!!

というわけで、大まかに体の動きをまずは作りましょう。

「SD_setup.spine」をご使用の方は下記の画像の「Main」をつかんでみてください。

「Skirt_main」と被ってしまってますが、ツリーからも選択できます。

左クリックでつかんだまま、グルんぐるんしてみてみましょう!

キャラが!! 腰を!! 振ってる!!!

回転してしまう、拡縮してしまう、なんかペラペラになった……などがあったら、キーボードの「V」を押すか、トランスレートボタンが有効化されているか確認しましょう!

青ければOK

※とりあえず初期ポーズに戻すには、動かした分「Ctrl+Z」でアンドゥしましょう。

自動キーを有効化して、アニメーションを作っていきます。

個人の好みで設定するかしないかは選んで問題ないですが、基本的に「自動キ―」を有効化しておくと大変便利です。

いちいちキーを登録しなくても、動かした分だけ自動的にキーの位置をドープシート上に登録していってくれます。

バージョンによって位置がコロコロ変わる厄介な子ですが、4.0.64ではこの位置にあります。青くしておきましょう。


ココから下の工程は本当に好みなので、やらない方も大勢いらっしゃいます。(というか私の上司)

なんかあわないな、と思ったら別のやりやすいやり方を模索していただけると楽しいSpineライフが送れます!

1.腰を動かす

私のアニメーションの付け方(特にループモーション)

まずは「0F」「最終(60)F」にキーを打ちます。

ちなみに30Fで1秒ほどです

ドープシートで水色の縦線(上の方の0…10…20…となっているところの▼)を掴んで一番左に持って行くとそこが0Fです。

ここで「Ctrl+L」を押すと、回転・移動・拡縮・シアーの4つすべてにキーが打たれます。

もしくは手動で(下記画像右上)鍵マークを押してもキーが打てます。

同様の工程を60Fでも行いましょう。

こうなっていればOK

真ん中の30Fに時間を合わせ、若干腰を下げた動きを登録します。

再生「D」すると、あっっっ動いてるかわいい!!!!

ただベタ打ちしただけだと動きがちょっと硬いので、柔らかくさせるためグラフを設定します。

ループのこの動き程度であれば、ドープシート上でも設置できるので、「0F」「30F」を同時に選択(個別に設定しても化です)し、左から16番目のこのボタンを押しましょう。

なんかうねってるやつ

少し、動きが滑らかになりました

硬い
柔らかい

たったこれだけでも生きている感が出てきました。

次は腰を下げたことによって破綻してしまった箇所を修正します。

左ひざがぱっくり行ってしまってますね・・

これは若干私のSDの描き方が悪い部分もあるので、イラストによっては全く問題ないこともあります。

というかそうだったらイラストレーターさんを褒めちぎって欲しい。

君はすごいぞ

または、ボーンの入れる位置によっても破綻したりしなかったりもあるので、気に入らなかったらボーンを入れなおしてしまうのも手です。

直し方は様々ですが、一番直感的にわかりやすいのが、ふくらはぎを引っ張って問題ない位置に引き上げてしまうことです。

文字だとわかりづらいと思うので、実践すると……

2
3
4
  1. 破綻しているぞ
  2. ふくらはぎ(LowerLegのボーン)を掴もう
  3. グイっと無理やり問題ない位置まで動かそう
  4. なおった!!!✨

おおむねこんな感じです。

「LowerLeg」にもMainボーンと同様グラフを設定しておきます。

膝も大丈夫になりましたね。

左ひざだけでなく、右太ももも若干位置の調整をして両膝の曲がり角度をいい感じにそろえています。

ただこれだと若干腰引けて見えるので、Mainボーンは垂直ではなく斜め下に下げるイメージで動かすと良い感じになります。

アニメーションを調整しだすともう止まらないね!!!(叫)

2.上半身を揺らす

腰が動いたので次は上半身を揺らしていきます。

このままだと姿勢の良すぎるスクワットになってしまうので……

腰(Main)を若干斜め左下に調整したので、上半身は軽くそらせようかと思います。

また、上半身を倒した分顔を反対に回転させ、常に視線が前を向くように調整してあげるともうそれっぽさが爆発します。

まずは反る
頭を反った分戻す

いいかんじ

うちの子が生きてる…

ちょっと動きが変になりましたが()一旦先に進みましょう!

3.体が動いた分の髪・服・しっぽの揺れ

私が個人的に一番楽しい、揺れものの時間です。

(髪を揺らすのは嫌いですが)

揺れものの付け方は本当に様々なので、ここでは一例を載せます。

ベースでこの付け方をしておけば、まずは間違いないです。

髪を揺らそう

揺らしたい髪一房分のボーンをすべて選択します。

前髪

腰(Main)と同様に0F、60Fにキーを打ちます。

体幹のボーンとは違い、揺れもののボーンには「揺れ戻り」の動きがあると素晴らしく素晴らしいので、キーは2点に打ちます。(15F、45F)

それぞれ15Fで左、45Fで右に揺れるようにしてみます。

動きは硬いですが、とりあえず動きました

こいつにもグラフを適用し、若干柔らかく動くようにしていきます。

腰(Main)の時とは若干違うグラフを適用したいのですが、いったんすべてのキーにイージーイーズ(うねうねしたやつ)を適用しておきます。

ちょっとだけ柔らかい…

バージョン3.・・・ではまた画面が違い、そのツールになれてしまっている身としてはとっつきにくくなってしまってはいますが、3Dのアニメーションツールと同様の「グラフ」ツールがあります。

右上の「ビュー」からウィンドウを新規で表示させるか、すでに表示させている場合はグラフの画面を見てください。

ぐっちゃぁぁっぁ

なんか以前SpienersMeetUpというSpien使いたちの集いみたいな場所で説明していただいたことがあるんですがすべて忘れました。

(youtubeにアーカイブがあるはずなのでそのうちまた見に行きます)

とりあえず今回必要なのは緑色の回転のグラフなので、フィルター機能で回転のグラフのみを表示させます。

一番左上の黄色いラッパから、「回転」のみを選択します。

すっきり~~~~

まずは0Fのキー

矢印のボタンを押す

選択しイーズインに設定します。

次は45Fのキー

矢印のボタンを押す

選択し、イーズアウトに設定します。

グラフ設定完了です。

さっきより柔らかい!

さっきよりちょっといい感じになりました

さらに滑らかな動きにしていきましょう。

現状は親からひ孫ボーンまですべて同じタイミングで動いてしまっているため、硬い動きに見えます。

子ボーンを少しづつタイミングをずらし、揺れ戻り感を強めていきましょう。

一旦ドープシートに戻ります。

今動かしているボーンです

1,2,3,4とボーンがあるので、

  • 1はそのまま
  • 2を今より 3F 遅らせる
  • 3を今より 6F 遅らせる
  • 4を今より 9F 遅らせる

というようにずらしてみましょう。

少しづつずらした図

ゆれてるゆれてる

左右の揺れで若干早くなってしまっている部分はありますが、まあ、そこは微調整をば・・

今までの作業を全部に適用していくと

かわいい

かわいい

みんなもアニメーション作ろう!

役に立つかもしれない関連記事

Sponsored Links

-モーション
-, ,