くるくる回る！？「優先度」を応用したアニメーション！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part19

2017.11.14

投稿者： 

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

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

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

前回のpart18までで、てっくんらしい？アニメーションを作成してきました。

今回からは、てっくんというキャラクターに関係なく、スプライトスタジオで「こんなアニメーションもできる！」という内容をご紹介したいと思います。

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

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

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



セクション1：新しくパーツも追加できる！


今までと同様に、

1）既存アニメーションを複製して、「circle」アニメーションを作成します。

2）不要なキーを削除します。



ここから新しい内容！

新たに「◯_1」パーツを作成します。

「◯_1」は白目だったパーツを、片方だけ矩形で囲ったパーツです。

ボールのようなパーツが欲しかったので、白目で代用しました^^



2つ欲しいので、「◯_2」パーツを作成します。



1）「◯_1」「◯_2」をレイアウトにドラッグ&ドロップします。

2）すると、「レイアウト」と「フレームコントロール」にも「◯_1」「◯_2」が追加されました。

ここで、親子関係も確認するのですが、「-3」や「zZ」同じ位置で問題ないので、このままで進めます！



ちなみに「◯_1」「◯_2」のパーツを「circle」に追加いたしましたが、追加したパーツはすべてのアニメーションに反映されます。

デフォルトで非表示になっているので特に問題ないかと思いますが、パーツ追加は親子関係もすべてに反映されます。

複雑なアニメーションパーツの追加の時は注意しましょう！



「X,Y座標」は中途半端な数値だったので、「X座標」は−120に、「Y座標」は10に、それぞれキリよく設定します。

これで、新しいパーツの追加ができました！


セクション2：くるくるまわすアニメーション設定！

先ほど追加した「◯_1」を、くるくる回転させましょう。

そしてただの回転ではなく、てっくんの周りを回るように設定したいと思います！



「X,Yスケール」を1に設定します。



1）7フレーム目の「X座標」を0に設定し、パーツを中心に持っていきます。

2）同じく、7フレーム目の「X,Yスケール」を2に設定します。



1）14フレーム目の「X座標」を120に設定し、パーツを反対側に持っていきます。

2）同じく、14フレーム目の「X,Yスケール」を1に設定します。



1）21フレーム目の「X座標」を0に設定し、パーツをまた中心に持っていきます。

2）同じく、21フレーム目の「X,Yスケール」を0.1に設定します。

3）同じく、21フレーム目の「優先度」を-1に設定します。

「body」で隠れて見えないですが、てっくんの後ろ側に「◯_1」が回り込む設定です！



最後に28フレーム目に、0フレーム目をコピーします。

今回は、6フレーム分間隔をあけてキーを打ち、一定速度のアニメーションになるように設定しました。



29,30フレームが不要になってしまったので、削除します。

さて、これを動かしてみると…？



「◯_1」がてっくんの周りをくるくる！

「X座標」と「X,Yスケール」の設定を合わせることで、前後の表現も加えることができます！


セクション3：「ベジェ」を使ってクオリティアップ


まず、セクション2の設定を「◯_2」にも同様に行います。



セクション2で設定した動きが少しかたいので、これを「ベジェ」を使って調整しましょう。

「X座標」のとなりの「ー」をクリックします。



今回の「ベジェ」の調整をする際のポイントとは、90度のおうぎ型をイメージすることです！

「◯_1」「◯_2」ともに、てっくんの周りをくるくる円形に回ります。

なので、ベジェの曲線を並び替えると円になるように、曲線の調整をしましょう。

放物線をイメージした時の調整もそうですが、実際の動きと「ベジェ」の形は似ているのです！



「◯_1」「◯_2」ともに、「ベジェ」の調整をしたのがこちら！



そしてこの動きを利用すれば、ボールを手で操っているようなアニメーションも可能です。

まるでてっくんが超能力に目覚めたかのよう！！

光の玉や火の玉など動かせば、まさに超能力のようなアニメーションが可能です^^



次回は2週間、間隔が空きます！

セルマップに新しいパーツを追加したい場合の手順をご紹介したいと思います。

11/21と11/28は「Live2Dに持っていくためのclipデータの作り方[前編][後編]」をお送りする予定です！

まとめ

・スプライトスタジオは新しいパーツ追加も簡単！

・一定速度のアニメーションは、キーフレームの感覚を均一に！

・実際の動きと「ベジェ」の形は似ているの！
ここまでで何か質問やコメントなどございましたら是非書き込んでください！

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



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

やじキチ

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

コメントを残す