「ベジェ」を使って「Y座標」調整！「damage」アニメーションの設定！[前編]【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part12

2017.09.26

Notes

スプライトスタジオ

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

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

前回のpart11では、「ーー」のパーツを生かして「sleep」のアニメーションを設定いたしました。

今回は「XX」のパーツを使った「damage」アニメーションの設定をしていきたいと思います。

イチから学ぶ！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜のPart12です！
- - セクション1：ベジェを使って上下方向の設定！
  - セクション2：コピペで工数削減！左右対称の動き。
- まとめ
  - - やじキチ
    - 最新記事 by やじキチ (全て見る)

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

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

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

今回の「damage」のアニメーションにつきまして、下記のような大まかな動きを設定したいと思います。

・目を「XX」にして後ろに飛ぶ
・てんてんとバウンドする
・反対側からも同様に攻撃を受け、元の位置に戻る

セクション1：ベジェを使って上下方向の設定！

1）今まで通り、既存のアニメーションを複製して、「damage」を作成します。

2）15フレーム目で、「body」の「Z軸回転」を-30で設定します。

3）同じ「body」のキーで、「X座標」を80で設定します。

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

15フレーム目で、「hand_R」「hand_L」の「Z軸回転」を-50で設定します。

ダメージを受けて両手をあげているイメージです。

1）15フレーム目で、「leg_R」「leg_L」の「Z軸回転」を-75で設定します。

2）さらに「優先度」を2にして、「body」の上にもってきます。

ダメージを受けてしりもちをついているイメージです。

これで、目を「XX」にして後ろに飛ぶ動きはOKです。

1）15フレーム目のキーを25フレーム目にコピペします。

2）「body」の「X座標」を80から100に変更します。

1）15フレーム目のキーを30フレーム目にコピペします。

2）「body」の「X座標」を80から110に変更します。

次に、「body」の「Y座標」を変更して、後ろに飛ぶ動きと、「てんてん」と跳ねる動きの設定をしたいと思います。

ここで使うのが「ベジェ」です！

「body」の「Y座標」の横、「ー」ボタンをクリックします。

緑のラインが「Y座標」の上下の動きなのですが、この緑のラインを青のラインのように変更したいと思います。

0フレーム目の右、15,25フレーム目の左と右、30フレーム目の左を「ベジェ」に変更します。

15フレーム目の左のハンドルを上に動かしてみると、勝手に右のハンドルも動いてしまいました。

原因は「左右ハンドルを同期」にチェックが入っているからです。

左右ハンドルを同期させると左右のハンドルの動きが点対称になります。

そうすると、左右の動きのつなぎが滑らかになるので、そういうシーンではこの機能はオススメです！

今回は、邪魔なのでこのチェックは外します。