総決算！てっくん演出アニメーション其の参【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part32

2018.03.27

投稿者： 

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

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

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

前回のpart31では、力を溜めるアニメーションを設定しました。

今回はその溜めた力を解放します！

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

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

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



今回制作するアニメーションのイメージとしては

体を反対側に倒す
↓
前方にパンチ！！！
↓
勢いよく拳を引き、元に戻る

です！^^


セクション1：体を倒し、なめらかに手を移動させるアニメーションの設定！


前回48フレーム目で溜めた力を、思いっきりパンチとして繰り出すために、まずは体を反対側に倒しましょう。



「body」の51フレーム目で、反対側に体を倒します。



そして「hand_L」は力を溜める動きを設定した時に、「頂点変形」と「左右反転」と「優先度」の変更を行っています。

自動補完だと、これらの変形をなめらかに戻すことができないので48,49,50,51フレーム目のキーは、手動で調整をします。



1フレーム1フレーム、「頂点変形」で徐々に形を変化させ、タイミングのいいところで「左右反転」と「優先度」の変更を行います。

これで体の角度変更に合わせて、なめらかに手を移動させることができました！

このように、狭いフレーム間で複数のステータス設定をするときは、すべて手動でやるのも効率化の一つです！


セクション2：カラーブレンドで手を表現！

溜めた力をパンチとして繰り出す際に、勢いを表現したいと思います。

ただのパンチではなく、連撃で！！



まず「hand_R」を52フレーム目で前方に持ってきます。



1）次に、53フレーム目で「X,Yスケール」を1から1.5に変更します。

2）同時に「カラーブレンド」で緑一色にします。



1）同時に、「◯_1」「◯_2」もカラーブレンドで、同じ緑一色にします。

どうでしょうか？

「hand_R」が3つあるように見えると思います！

2）そして、3つとも別々の「X,Yスケール」に調整します。

これで、瞬時に連撃を放っているように見えるかと思います！



53フレームから61フレームまで、「hand_R」「◯_1」「◯_2」をランダムで配置します。

これで、連撃の完成です！



強そうです！！！


セクション3：余韻で「勢いよく拳を引く」動きを表現！


48フレーム目のキーを、62フレーム目にコピーします。

これで連撃の拳を瞬時に引き戻しました。



同時に「◯_1」「◯_2」を非表示にします。



拳を引き戻した勢いを、体全体の「余韻」の動きで表現します。

「余韻」は縦横のスケールで設定します。

まず「body」の62フレーム目の「Yスケール」を1から0.8に変更します。



1）次に「body」の64フレーム目の「Yスケール」を0.8から1に戻します。

2）代わりに「Xスケール」を1から0.9に変更します。



1）次に「body」の66フレーム目の「Yスケール」を1から0.9に変更します。

2）そして「Xスケール」を0.9から1に戻します。



最後に「body」の69フレーム目で、「X,Yスケール」をどちらも1に戻します。

これで、拳を引き戻した勢いで体が揺れるアニメーションができました！



あわせて、引き戻した「hand_R」の設定ですが、腕を引いている状態を長く設定します。

これも慣性の法則です！

62フレーム目の「頂点変形」で、短く太く設定します。



その状態を66フレーム目まで保ちます。



そして、69フレーム目で元に戻します。



完成した動きがこちら！

バチンっと腕が戻る感じかしていると思います！



そして、一連のアニメーションがこちら！

完成です！！！



と、言いたいのですが！勢いが足りない気がします！！！

なので次回、さらなるクオリティアップを図りたいと思います\(^o^)/

まとめ

・なめらかに表現したいアニメーションは、手動でやるのも一つの手段！

・複数パーツを「カラーブレンド」で同一パーツのように表現！

・やっぱり大事！慣性の法則！
ここまでで何か質問やコメントなどございましたら是非書き込んでください！

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



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

やじキチ

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

コメントを残す