「walk」を流用して工数削減！走るアニメーション制作！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part7

2017.08.22

投稿者： 

このエントリーをはてなブックマークに追加

どうも！（・∀・）やじキチです。

イチから学ぶ！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜の連載ブログです！

前回のpart6では歩くアニメーション「walk」を制作しました！

今回はそのアニメーション「walk」を流用し、走るアニメーション「run」を制作したいと思います！

イチから学ぶ！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜のPart7です！

スプライトスタジオ http://www.webtech.co.jp/spritestudio/

夢を描いて、動かそう。
インディーゲーム開発に無料で使える
アニメーション作成ツール



セクション1：複製で工数削減！「run」のセットアップ


1）「walk」を右クリックします。

2）「複製」をクリックします。



1）「walk_1」を右クリックします。

2）「名前の変更」をクリックします。



1）名前の変更ウィンドウが出るので、走るアニメーション「run」に変更します。

2）「OK」をクリックします。

今回は手足の動きを流用するので、不要なキーの削除はいたしません。



「run」のセットアップはこれで完了です！


セクション2：「walk」「run」を比較して、違いを見ながら設定変更！

歩くアニメーション「walk」と、走るアニメーション「run」の大きな違いは、次の通りです。

・「walk」に比べて、「run」の方が、体の上下が大きい
・「walk」に比べて、「run」の方が、手足の振り幅が大きい
・「walk」に比べて、「run」の方が、手足の振り速度が速い

では早速、一つ一つ設定の変更をしていきましょう。



まずは「体の上下」の設定です。

「Y座標」を現状のから、+15で設定します。

これで、上下方向の変更は完了です。



次に「手足の振り幅」の設定です。まずは「leg_L」から！

1）「Z軸回転」を−70で設定します。
　角度の目安としては、足が縦になるくらいです。

2）「頂点変形」で足先が地面から浮くように、-5で設定します。



この時注意が必要なのが、変形点の位置や、XYの向きが変わっているところです。

「leg_L」の「Z軸回転」を−70で設定で設定したため、各頂点の位置が移動しています。

今回変形させた右下の変形点は、レイアウト上だと左下に移動しているので気をつけましょう。

XYの向きも、約90度回転しているので、Y軸を変更しないよう気をつけましょう！



次に「leg_R」です！

1）「Z軸回転」を−55で設定します。

2）「頂点変形」で、足裏が見えているように、各頂点の数値を設定します。



次に「hand_L」です！

「頂点変形」で、手を大きく上に上げているように、各頂点の数値を設定します。



最後に「hand_R」です！

「頂点変形」で、手を大きく後ろに下げているように、各頂点の数値を設定します。

同様のことを左右反転して、後半も設定します。

これで手足の振り幅の設定は完了です。

早速動きを確認してみましょう！


「walk」より振り幅の大きなアニメーションができました！



最後に「手足の振り速度」の設定です。

これは、キーフレームの削除で対応します。

キーフレームの削除は、アニメーションの動きを確認しながら行うので、
キーフレームを少し削除　→　アニメーション確認を繰り返しましょう！

まずは、キーとキーの間の感覚が空いているところからから、2フレームずつ削除しました。



一回めの調整ですが、手足を振る速度が速くなり走っているように見えるのではないでしょうか！？

ここで早すぎたり遅過ぎるように感じる場合は、削除と追加を繰り返して調整を行いましょう！


セクション3：3つの小技で、アニメーションのクオリティアップ！

セクション2の設定で、走る動きとしては問題ないかと思います。

ここからはちょっとした小技を入れながら、アニメーションのクオリティアップをしたいと思います！

今回ご紹介する小技はこちら！

・上昇よりも、下降の速度の方が遅い！
・崩し！
・表情の変更！

それでは、順番に設定していきましょう！



まずは「上昇よりも、下降の速度の方が遅い！」の設定です。

走る動きの説明からになりますが、体が上昇する時は、地面を力いっぱい蹴るので速度が速いです。



対して下降の時は、持ち上がった体が重力で下降するだけなので、上昇よりも若干遅くなります。



なので、体が下降するこの部分に、1フレーム追加します。



次に「崩し！」の設定です。

これはテレビアニメにも使われている技術ですが、アニメーションの一部をわざとオーバーに変化させることで、動きに勢いをつけることが出来ます。

今回は「足」にこの「崩し」を入れてみましょう。

足を後ろ側にもっていった時、思いっきり小さくしてみます。

−15に−30…さすがにこれはやりすぎでは…？

いえいえ、23フレームあるうちのたった1フレームです！思い切っていきましょう！！



最後に「表情の変更！」です。

走っている時は歩いている時より力んでいるので、表情を変えてみましょう。

まずは既存の目「●●」のキーを、ダブルクリックですべて非表示にします。



代わりにキリっとした目「●＼／●」のキーを、ダブルクリックですべて表示にします。

この表情の変更は、似た動きを作成した時に、より違いをはっきり見せたい時にも有効です！



これで「run」のアニメーションは完成です！



次回はピースした「hand_R2」を使いたいので、勝利のアニメーション「victory」を設定したいともいます！

まとめ

・似たアニメーションは「複製」を使って工数を削減しよう！

・「歩く」と「走る」の違いは、体の上下！手足の振り幅！振り速度！

・「表情の変更」は、変化の少ない異なるアニメーションにもオススメ！
ここまでで何か質問やコメントなどございましたら是非書き込んでください！

私も皆様と一緖に成長していきたいと思います！



次回もテクノブログにご期待くださいm(_ _)m
The following two tabs change content below.
Avatar photo

やじキチ

どうも！(・∀・)やじキチです。 影が薄いのをカバーするためにチャラチャラしております。 常日頃から皆々様に笑顔でいて欲しいと思っております。 皆々様が笑顔で、世界が平和なら最高です！ よろしくお願い申し上げます！
一覧へ

コメントを残す