別アニメーションから流用!?「angry」アニメーションの制作!【アニメ・モーションのつくりかた!】〜スプライトスタジオ編〜 part14

投稿者: 


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

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

前回のpart13では、新しく「スケール」や「カラーブレンド」を使って「damage」アニメーションの制作を行いました。

今回は!「\/」の目を使って、プンプンと怒った「angry」アニメーションを制作していきます!

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

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

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



セクション1:別アニメーションから流用!?大まかな動きの設定!

今回作成する「angry」の大まかな動きは下記でいきたいと思います!

1、怒った顔をする
2、ダンダンと2回、地団駄を踏む



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



今回は初めから目を「\/」にしたいので、

1)「●●」をダブルクリックして、非表示に設定します。

2)「\/」をダブルクリックして、表示に設定します。



1)次に「mouth_▽」をダブルクリックして、非表示に設定します。

2)「mouth_△」をダブルクリックして、表示に設定します。

これで怒った顔ができました!



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

2)12フレーム目で元に戻すので、0フレーム目を12フレーム目にコピペします。



2回地団駄を踏むので、6〜12フレーム目を18フレーム目にコピペします。



次に足の設定です。

体が傾いても、片足は動かないようにしたいので

1)6フレーム目、「leg_L」の「Z軸回転」を15度に設定します。

2)12フレーム目で元に戻すので、0フレーム目を12フレーム目にコピペします。



次に6フレーム目の「X,Y座標」を調整して、0フレーム目と6フレーム目で「leg_L」のが動いていないように見えるようにします。



2回地団駄を踏むので、6〜12フレーム目を18フレーム目にコピペします。



続いて「leg_R」の設定です。

体を傾けると同時に足を上げるように見せたいのですが、「Z軸回転」の角度を設定しただけではアニメーションの変化が寂しく感じます。



なので「damage」の時のように、足裏を見せている感じで設定したいと思います。

前回の「damage」アニメーションの制作の時に、すでにその設定をしているので「damage」からその設定を持ってきて、工数を削減しましょう!



1)まず「damage」アニメーションに移動します。

2)5フレーム目の「leg_R」を選択しコピーします。



1)再び「angry」アニメーションに戻ります。

2)6フレーム目の「leg_R」に、先ほどにキーをペーストします。

偶然にも、傾いた体にぴったりの位置でした!



「leg_R」も同じように、2回地団駄を踏ませます。



これで大まかな動きの設定は完了です!


セクション2:「頂点変形」でクオリティアップ!


「leg_R」の「優先度」を変更したので、今まで見えなかった部分が動き出した瞬間に見えています。

このままだとチカチカしてしまうので、「頂点変形」で「body」と「leg_R」の重なっている部分を少しでも少なくしましょう。



「leg_R」の1フレーム目で「頂点変形」の設定をします。

「body」に「leg_R」があまりかからないようにすることで、チカチカしたのを抑えられます。



同じように、チカチカする箇所が3箇所あったので、1フレーム目のキーを11,13,23フレームにコピペします。

これで、地団駄2回とも調整完了です!



ついでに、地団駄に合わせて「hand_R」と「hand_L」も上に振りあげましょう。

1)6フレーム目の「hand_R」と「hand_L」の「Z軸回転」を80度で設定します。

2)6フレーム目のキーを18フレーム目にコピペします。

3)最後に、0フレーム目のキーを12,24フレーム目にコピペします。

これで、地団駄に合わせた手の動きは完了です。



また、足を振り上げる時より、振り下ろす方のスピードを上げたいので、6フレーム目を8フレーム目に移動し、18フレーム目を20フレーム目に移動します。

これもアニメーションに大切なメリハリです!



微調整ですが、全体のアニメーションスピードも早すぎるので、少し伸ばしましょう。

総フレームを30フレームから36フレームに変更します。

総フレーム増加によるキー調整も忘れずに!



これで動きの微調整も完了です!


セクション3:位置に注意!プンプンの表現の設定

最後に「-3」のパーツを使用して、プンプンと怒った表現を加えていきたいと思います。



まずは見えている間の動きの設定から。

9,14フレーム目の「-3」をダブルクリックして、表示させます。



黒い「-3」のパーツが9フレーム目の「-3」パーツで、赤く着色した「-3」のパーツが14フレーム目の「-3」パーツです。

「body」を15度傾けているせいで、二つを比べると横にずれてしまっています。



なるべく直線上に配置したいため、14フレーム目の「−3」にあわせて、9フレーム目の「X,Y座標」を調整します。



位置調整が終わったら、9フレーム目は「不透明度」を0にして見えなくします。

これで、9フレーム目から14フレーム目にかけて「-3」パーツが現れます。



2回目の地団駄で同じ表現を加えたいため、9〜14フレーム目を23フレーム目にコピペします。



最後に15フレーム目と29フレーム目で、「−3」の「不透明度」を0にして、設定完了です!



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



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

まとめ

・別アニメーションからコピペして工数削減!

・「body」から離れたパーツの設定は、「body」の動きに注意!

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

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



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

やじキチ

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

コメントを残す

*