「ベジェ」登場!勝利アニメーション「victory」の制作!【アニメ・モーションのつくりかた!】〜スプライトスタジオ編〜 part8

投稿者: 


どうも!(・∀・)やじキチです。

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

前回のpart7では、「walk」を流用して「run」を制作いたしました。

今回は新アニメーション!「victory」を制作していきます!

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

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

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



セクション1:セットアップと大まかな動きの設定!

今回設定する大まかな動きは下記のようなイメージです。

・2回飛び跳ねる
・体を傾けてピースサイン

では早速設定していきましょう!


まず、前回・前々回と同様に、既存のアニメーションから「victory」のセットアップを行います。



「body」を選択し、6フレーム目で「Y座標」を0から25に設定します。



最初のフレームを、13フレーム目にコピペします。



同じ動きを、19フレーム目にコピペします。

これで「2回飛び跳ねる」大まかな動きはOKです。

今回のように、同じ動きを2回繰り返す場合は、コピペを駆使して時間短縮をどんどんはかりましょう!



「2回飛び跳ねる」動きをした段階で、現在のフレーム数の余裕がなくなってしまったので、総フレームを30フレームから60フレームに変更します。



41フレーム目で「Z軸回転」を0から−15に設定します。



同様のキーを、51フレーム目にコピペします。



これで「body」の動きは完了です。



続いて手足の設定に移ります!

6フレーム目はジャンプしているので、「leg_R」を選択し、足を下に伸ばした位置になるように「Z軸回転」を0から70に設定します。



13フレーム目は着地なので、最初のフレームをコピペします。



同じ動きを、19フレーム目にコピペします。



「leg_R」と同じ動きを、「leg_L」に設定します。



41フレーム目は体を傾けているので「leg_R」「leg_L」共に、体の傾きに合わせて、地面に足がつく様に「Z軸回転」を調整します。



同じ動きを、51フレーム目にコピペします。



次に手の設定に移ります!

6フレーム目はジャンプしているので、「hand_R」「hand_L」共に、手を上にあげているように「Z軸回転」を0から60に設定します。



1)13フレーム目は着地なので、最初のフレームをコピペします。

2)同じ動きを、19フレーム目にコピペします。



41フレーム目では、手をピースサインである「hand_R2」に切り替えたいので

1)「hand_R」をダブルクリックで非表示にします。

2)「hand_R2」をダブルクリックで表示させます。



同じ動きを、51フレーム目にコピペします。



これで!手足も含め、大まかな動きは完了です!


セクション2:より自然な動きに!「ベジェ」登場!

現在の動きは、ジャンプしているというより、背伸びをしている様に見えてしまっております。

足を下に伸ばした時に、ジャンプ位置が低く、足先が地面についている様に見えるからでしょうか…?



なので、「body」を選択して、6フレーム目と19フレーム目の「Y座標」を25から倍以上の65に設定します。



これでさっき良りはジャンプしている様に見えるでしょうか?

しかしこれではまだ、テッくんが上下に移動しているだけにも見えるので、もう少しジャンプしているように調整したいと思います。

そこで登場するのが今回のタイトルにもある「ベジェ」です!



まず、6フレーム目の「body」を選択して「Y座標」のとなりのボタンをクリックします。



すると「カーブエディタ – Y座標」というウィンドウが出るので、「補間方法」の「左」と「右」を、どちらとも「ベジェ」に変更します。

ここからの動きは動画のほうがわかりやすいので動画で説明いたします!



さっきと同じように、6フレーム目の「body」を選択して「Y座標」のとなりのボタンをクリックします。
「補間方法」の「左」と「右」が「ベジェ」になっている事を確認し、6フレーム目の緑色の点を左と右に、それぞれドラッグします。

そして、同じ事を19フレーム目にも設定します。

「2回飛び跳ねる」アニメーションの部分が、放物線を描いているのがわかりますでしょうか?

この放物線を「ベジェ」で描くと、上下の移動はより自然な動きとなるのです!

早速、見比べてみましょう!



このわずかな違い…!わかるでしょうか?

左の「ベジェではない」方は、頂点まで上がった瞬間、カクッと下に下がっているのに対し、右の「ベジェ」の方はカクッとした動きがなくなっています。

このわずかな差は、上下の動きが大きくなればなるほどに、より自然な動きになるので、是非皆様!「ベジェ」の使い方を覚えておきましょう!



さて、ここからピースを2回「ぶいぶい」とさせていきたいのですが、すでに長くなりつつあるので、次回でご紹介をしたいと思います!

まとめ

・同じ動きはコピペを駆使して時間短縮!

・「ベジェ」を使用して上下の動きをより自然に!

ここまでで何か質問やコメントなどございましたら是非書き込んでください!

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



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

やじキチ

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

コメントを残す