不透明度を駆使！「sleep」アニメーションの制作！[後編]！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part11

2017.09.19

投稿者： 

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

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

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

前回のpart10では、大まかな動きの設定をしました。

今回は細かい動きの設定と仕上げを行いたいと思います！

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

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

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



セクション1：体の動きを意識して！まばたきの設定！

前回後回しにしていた目をぱちぱちとさせる動きから設定していきたいと思います！



1）10フレーム目で「●●」のキーをダブルクリックして非表示にします。

2）同じく10フレーム目で「ーー」のキーをダブルクリックして表示にします。

3）次に、14フレーム目で「●●」を表示にします。

4）同じく14フレーム目で「ーー」を非表示にします。

これでまばたきを1回しました。



今回はまばたきを「ぱちぱち」と2回するので、10〜14フレーム目を18フレーム目にコピペします。



同じように、2回目の体を倒すタイミングでもまばたきをさせます。

10〜22フーレムを60フレーム目にコピペします。



最後に、スヤスヤするアニメーションの始まり、86フレーム目では「●●」を非表示に「ーー」を表示にして目を瞑らせます。

まばたきをさせるタイミングは、体の動きをある程度意識しましょう！



ついでに腕の動きも体に合わせて設定しましょう。

1）体が傾く19フレーム目のタイミングで「hand_R」と「hand_L」の「Z軸回転」を30度、下方向に回転させます。

2）体を起こす23フレーム目のタイミングで「hand_R」と「hand_L」の「Z軸回転」を0度にして元に戻します。



同じようにスヤスヤするタイミングでも、「hand_R」と「hand_L」を上下させます。



最後に「ビクッ」っとなるタイミングで「hand_R」と「hand_L」の「Z軸回転」を0度にして元に戻します。

これでまばたきと腕の動きは完了です！


セクション2：ベジェを駆使！体の動き設定！

次にクオリティアップのための動きを設定したいと思います。

みなさんがウトウトとするとき、眠気でゆっくりと体が傾いていくと思います。

なので今回のアニメーションも、このゆっくりとした動きを表現しましょう。



「body」を選択した状態で「Z軸回転」の横にある「ー」ボタンをクリックします。



体を倒し始める0フレーム目と43フレーム目の右側を、線形からベジェに変更します。



緑の点を右方向に伸ばし、青い線が曲線を描いて落ちるような形にします。

これで、動き始めはゆっくり傾いていきます！早速確認してみましょう！



体の傾きは確かにゆっくりとしていましたが、体と足の動きがあっていません…！

このベジェの設定は、「body」を動かすときに設定したすべてのパーツで行わなければなりません。



なので「leg_L」の0フレーム目と43フレーム目も、ベジェの設定します。



同じく「leg_R」の0フレーム目と43フレーム目も、ベジェの設定します。

もちろん「hand_R」「hand_L」も同様にベジェの設定します。



これで「ウトウト」のゆっくりした傾き設定は完了です！


セクション3：不透明度を使ってクオリティアップ！

スヤスヤと寝ているタイミングで「zZ」を表示非表示させたいと思います。

ただ、今までのような表示非表示ではチカチカしてしまいます。

そんな時に「不透明度」の出番です！



1）まずはスヤスヤが始まる86フレーム目から「zZ」を表示させます。

2）次に「不透明度」を0に設定して、非表示と同じ状態にします。



次は体が傾く105フレーム目のタイミングで「不透明度」を1に設定して、表示と同じ状態にします。

これで体が傾くにつれで、徐々に「zZ」が現れるよになりました。



体は2回傾くので、86〜105フレームを125フレーム目にコピペします。



最後に148フレーム目で「不透明度」を0に設定して「zZ」を非表示と同じ状態にします。

これでスヤスヤに合わせて、「zZ」が徐々に表示非表示されるようになりました！



ついでに、ビクッとなって起きたあとに汗をタラ〜と垂らすようにしました。

「tears」の「Y座標」を使って上下に動かし、「不透明度」を使って汗が現れて消えるように設定します。



これで「sleep」のアニメーション設定は完了です！



次回は「XX」を使って、ダメージを受けるアニメーション設定を始めます！

まとめ

・細かい動きも、体の動きに合わせて設定！

・ベジェの設定は、関係パーツ全てに！

・徐々に表示非表示させるには「不透明度」を活用！
ここまでで何か質問やコメントなどございましたら是非書き込んでください！

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



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

やじキチ

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

コメントを残す