【SpriteStudio】2Dアニメーション制作ツールのSpriteStudioを使ってみる ーアニメーション編ー
前回はPSD形式で作成したイラストをSpriteStudioにコンバートして読み込み、アニメーションが作成できる状態まで準備しました。今回は、簡単なボールのイラストを用いて実際にキーを打ってアニメーションを作成してみます。
イラストのセットアップ
今回使うボールのイラストは前回の記事の猫同様、CLIP STUDIO PAINTで作成しました。
このボールのイラストを、PSDtoSS6でコンバートしてプロジェクトファイルをSpriteStudioで開きます。コンバートに関してや詳しい内容は前回の記事を見てみて下さい。
SpriteStudio内のプロジェクトウィンドウ内のアニメーションディレクトリに、「Setup」が有るので選択します。
レイアウトウィンドウの背景が赤くなったと思いますが、このSetupのレイアウトウィンドウ内におけるイラストの状態が、アニメーションで動かす前のデフォルト状態になります。
動かした後に最初の状態へ戻したりするのに使いますので、Setupでの各イラストパーツの位置や角度、大きさを決めるのは重要です。
今回は野球ボールとサッカーボールで動きの比較を行うため、縦に並べて配置したいと思います。
イラストをアニメーションする
Setupでイラストの初期状態が設定できたので、アニメーションを行っていきます。
動かす前の準備
PSDtoSS5でコンバートしたプロジェクトを開いた場合であれば、デフォルトで「anime_1」というアニメーションを作成する場所が既にあると思うので、それを選択します。後で、好きな名前に変えるといいと思います。
「anime_1」を選択すると、赤かった背景が普通になり、下のフレームコントロールウィンドウに「0～10」フレームのアニメーションフレームが用意されている事が確認できます。
0~10フレームだと短いので、今回は0～50フレームに変更しました。
野球ボールとサッカーボールですが、最初の0f目にキーがありません。0f目は先ほどSetupで設定した状態になってほしいので、フレームコントロールの0f目辺りを右クリックして、それぞれのボールに「Setupからキー作成」を選択して、初期状態のキーを打ちます。
移動、回転、拡縮のアニメーション
フレームコントロールの部分で25f目にフレームを合わせて、ボールを適当な位置に動かして置いてみましょう。それだけでキーフレームが打たれ、25fかけて移動するアニメーションの完成です！
と、それだと味気ないので「ギズモ」を使ってボールを移動したいと思います。レイアウトウィンドウの左上の方に、丸に十字上の矢印があるアイコンがあるので、それを押します。
レイアウトウィンドウ上のボールイラストを左クリックすると、先ほどまで無かったギズモが表示されるかと思います。これは水平、鉛直移動に加え回転、拡縮がし易くなる機能です。
25f目にボールを右へ移動し、最終フレームに先ほどの「Setupからキー作成」で最初の位置へ戻ってくる状態にしてみます。
シンプルですが、右へ行って戻ってくる移動のアニメーションができました！
回転と拡縮も同様に、指定のフレームに変化量を与える事で簡単にアニメーションする事ができます。
先ほど25f目に移動のキーフレームを作成したので、そこのキーを選択してレイアウト情報ウィンドウの「Z軸回転」に-720の値を入力します。
サッカーボール側の25f目キーの「Xスケール」、「Yスケール」には0.4の値を入力します。
右へ移動しながら回転し、サッカーボールは拡縮するアニメーションができました！
他のパラメーターも同じように変更すれば、キーに反映されてアニメーションされます。例えば、不透明度の値を0にすれば徐々に消えていくアニメーションができます。
キーフレームの補間方法を変更する
ボールのアニメーションを行ってみましたが、ボールの移動速度が徐々に遅くなったり、早くなったりさせたいと思った時、細かい間隔でボールを動かしキーを打って行くというのは大変です。
そういった時、キーフレームの補間方法を「加速」、「減速」に変更する事で実現する事ができます。
移動速度の違いがわかるように、野球ボール側のキーフレーム補間方法だけ変更してみたいと思います。
0フレーム目にあるキーを右クリックして「補間方法の変更」→「減速」を選択し、25f目にあるキーを右クリックして同様に「加速」を選択します。
この状態で、野球ボールとサッカーボールのアニメーションを確認してみます。
キーフレームの補間方法を変更する事で、加速と減速をするようになった事が確認できます！
補間方法は他にもあるので、これらを有効に活用する事でアニメーションの幅が深まるでしょう。
次回、メッシュ変形とボーン制御を行う
今回はキーフレームを打つ事でイラストの移動や、拡大、縮小のアニメーションを行いました。また、フレームの補間方法を変える事でもアニメーションの動作を変更できる事がわかりました。
次回はSpriteStudioのようなアニメーション制作ツールの醍醐味とも言える、メッシュ変形とボーン制御に関しての内容となります。