順序と変化!「sleep」アニメーションの制作![前編]【アニメ・モーションのつくりかた!】〜スプライトスタジオ編〜 part10

投稿者: 


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

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

前回のpart9では、無事「victory」のアニメーションが完成しました。

今回は、その他の表情に合わせて様々なアニメーションを設定していきたいと思います!

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

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

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




まずはセルマップで、どのような表情があるか再確認です。

「ーー」の目は、眠っているようにも見えます。

「X X」の目は、ダメージを受けた時につかえそうですね!

「\/」の目は、怒った時にぴったりです!

今回からは、このアニメーションの作成に取り掛かります!


セクション1:アニメーションの設定は、混乱しないよう「一つ一つ確実に」!

最初に「ーー」の目を使って眠っているアニメーションを設定します。

大まかな動きとしては下記のイメージです。

・目をぱちぱちさせてウトウト
・目をつむってスヤスヤ
・ビクッとなって起きる



既存のアニメーションを複製し、余分なキーを消して「sleep」を作成します。

次に、体を傾けながら「ウトウト」という動きを表現したいのですが、すべての基本となっている体を動かす時のポイントを紹介したいと思います。

ズバリ!「一つ一つ確実に」です!

どういうことかというと、イメージしている動きに一気に合わせに行くのではなく、まずは「body」、次に「leg」、最後に位置合わせ という感じです!

さっそくやってみましょう!



まずは「body」の「Z軸回転」を0から-8へ変更します。

ここで足が動いてしまうと、その場でウトウトしているように見えないため、足位置や体の位置を合わせに行きたくなるところですが、位置合わせは最後に行います。

まずは足の位置ではなく、角度から合わせましょう!



「body」の「Z軸回転」を0から-8へ変更したので、「leg_R」「leg_L」の「Z軸回転」は8で設定します。

「body」が動いた分だけ反対側に動かすことで、地に足がついているように見せるのです!



1)次に「leg_R」のつま先が合うように、「body」の「X座標」「Y座標」を調整します。

2)そのあとに「leg_L」のつま先が合うように、「leg_L」の「X座標」「Y座標」を調整します。

この方法なら比較的簡単に動きの設定ができると思います!

設定する順序は「body(大元)」「leg(付属パーツ)」「位置」がいいでしょう!



体を傾けたら、0フレーム目のキーを12フレーム目にコピーして、体を元に戻す動きを設定します。



1)30フレームですと長さが足り無さそうなので、61フレームに増やします。

その際に、キーフレーム位置の調整で「はい」を選択して、キーの位置を調整しました。

2)15フレーム目のキーを23フレーム目にコピーして、 ウト…ウト… となるように溜めをつくります。

3)1〜15フレームを、24フレームにコピーして、「ウトウト」の大まかな動きは完成です。



1)次に、スヤスヤと眠らせるアニメーションの動きを作成します。

ここは「ウトウト」のタイミングを変更して対応するので、1〜23フレームを43フレーム目にもコピーします。

2)この時点で61フレームでも足りなくなってきましたので、思い切って101フレームまで増やしてしまいましょう!



体を倒す早さと、体を起こすはやさを同じくらいにするため、57フレーム目のキーを62フレーム目に移動します。



スヤスヤと同じ動きを繰り返すので、43〜62のキーフレームを、62フレーム目にコピーします。

これで「スヤスヤ」の大まかな動きは完成です!


セクション2:間隔の調整でメリハリを!


最後の「ビクッ」となる動きについては、体を震わせるような動きで対応します。

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



その間の78フレーム目に、ウトウトやスヤスヤより小さい角度で、体を傾かせます。

ウトウトやスヤスヤが8度に対して、「ビクッ」は2度に設定します。

大きく差をつけることで、全体の動きにもメリハリがつきます!



動きとしては小さいですが、間のフレームを2フレームと狭くすることで、「ビクッ」と細かく震えたように見えるわけです!



これで、全体の大まかな動きは完了です!

次に、両腕や表情の調整を行いたいのですが、すでにブログが長くなってきてしまいましたので、今回のブログでは間隔の調整までとさせてください!



間隔の調整はフレームの挿入で行うのですが、フレームを複数選択してから「フレームの挿入」を行うと、選択した分のフレーム数だけ挿入することができます!

今回のアニメーションはゆっくり目の動きなので、間隔をいつもより広くとる必要があります。

その場合は、複数のフレームを一気に挿入できるので覚えておきましょう^^

ゆっくりと動かすところはゆっくり、速く動かすところは速く動かして、視覚的に変化のあるアニメーションを目指しましょう!



間隔の調整はだいたい2〜3フレームずつ挿入して、細かくアニメーションをチェックしながら違和感のない動きのスピードを探します。

結果として総フレームが174フレームにもなってしまいました…!

「スプライトスタジオ」はデータ容量の軽さもメリットの一つですが、100フレームを超えるアニメーションは長すぎます。

今回はこのまま進行いたしますが、長くなるアニメーションの場合は、60フレームを一つの目安に細かく作成する方が良いかもしれません!



これで大まかな動きの、アニメーションスピードまでの調整が完了しました!



次回は引き続き、「sleep」アニメーションの設定を行います!

まとめ

・アニメーションの設定は、「大元パーツ」「付属パーツ」「位置」の順番を目安に、一つ一つ確実に!

・遅い動きと早い動きで、アニメーションにメリハリを持たせよう!

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

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



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

やじキチ

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

コメントを残す