コミカルな動きの設定、「Shy」アニメーションの制作!【アニメ・モーションのつくりかた!】〜スプライトスタジオ編〜 part15

投稿者: 


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

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

前回のpart14では、「\/」の目を使ってプンプン怒った「angry」アニメーションを制作しました。

今回は「●●_shy」を使って「照れ」のアニメーション「Shy」を制作したいと思います!

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

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

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



セクション1:大まかな動きの設定!

今回の大まかな動きの設定は下記のようにしたいと思います。

・頬を染める
・頭をぽりぽり掻く



1)今まで通り、既存のアニメーションを複製して、「Shy」を制作します。

2)「●●_shy」の1フレーム目をダブルクリックして「表示」の状態にします。

3)「●●_shy」の10フレーム目をクリックしてキーを打ちます。



「●●_shy」の1フレーム目のキーを選択し、「不透明度」を0に設定します。

これで1〜10フレームの間で頬を染めるアニメーションが完了しました。



1)「body」の0フレーム目を10フレーム目にコピーし、その間は変化しないように設定します。

2)「body」の15フレーム目で「Z軸回転」を10度に設定します。



体を傾けた際に、足が動かないように「leg_R」「leg_L」の「X,Y座標」「Z軸回転」の設定をします。



次に、体を傾けると同時に「hand_R」を頭の後ろに回すように見せたいと思います。

まず10フレーム目の「hand_R」にキーを打ちます。



次に「hand_R」の15フレーム目で「Z軸回転」を−120度で設定します。

これで、頭の後ろに手をやっているように見えるでしょうか?



今度は頭をぽりぽり掻くようにしたいと思います。

15フレーム目で設定した動きは、徐々に元に戻ろうとしているのでこの動きを利用しましょう。

「body」「hand_R」「leg_R」「leg_L」の18フレーム目に、それぞれキーを打ちます。



同じ動きを繰り返すために、15〜18フレーム目を21フレーム目にコピぺします。



総フレームが短いので動きが素早いですが、これで大まかな動きは完成です!


セクション2:間隔と表情を変更してクオリティアップ!


残りフレームが少なくなってしまったので、総フレームを61フレームに変更します。



0〜10フレーム目の間に5フレームほど挿入します。



次に、15〜25フレーム目の間にも5フレームほど挿入します。



1)頭をぽりぽり掻く間隔を広げたいので、それぞれの間に3フレームほど挿入します。

2)体を元に戻すスピードも緩めたいので、最後の方にも9フレームほど挿入します。



これで間隔の調整は完了です。



次に染めた頬を元に戻すため、66〜79フレームの間で「不透明度」を0にします。



次に、頭を掻いているときの表情の変化をさせます。

16フレーム目で「●●」を非表示にして、「ーー」を表示させます。



72フレーム目まで「ーー」を表示させ、73フレーム目で元にもどします。

これで間隔調整と、表情の変更は完了です!


セクション3:細かい動きでコミカルなアニメーションの設定!


頭をぽりぽり掻いている動きに合わせて、照れ汗をかせたいと思います。

31フレーム目で「tears」を表示させ、「X,Y座標」「Z軸回転」の調整をして、頭の上に斜めに持っていきます。



36フレーム目も同様に「tears」を表示させ、31フレーム目の「tears」の直線上に移動させます。



「tears」の位置関係を合わせたら、31,36フレーム目ともに「不透明度」を0にします。



次に「tears」の「不透明度」をベジェで設定します。

放物線状に「不透明度」を0→1→0に変化させます。

これで、31〜36フレームの間で、「tears」が現れてから再び消えます。



同じ動きを37,43,49,55,61フレーム目にコピーします。

6フレームという短い間隔のアニメーションを6度繰り返すことになりますが、この細かい動きがコミカルで可愛い動きを生みます。



これで「Shy」のアニメーションが完成しました!



次回はちょっと長めのアニメーションを制作していきたいと思います!

まとめ

・ベジェで「不透明度」の設定も可能!

・細かい動きでコミカルな動きの表現も可能!

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

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



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

やじキチ

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

コメントを残す