「スケール」「カラーブレンド」でクオリティアップ！「damage」アニメーションの設定！[後編]【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part13

2017.10.03

投稿者： 

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

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

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

前回のpart12では、ベジェを使って「Y座標」を設定する方法をご紹介いたしました。

今回は「damage」アニメーションのクオリティをアップしながら、完成させたいと思います！

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

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

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



セクション1：顔のパーツを変化させてクオリティアップ！


1）5フレーム目で「mouth_▽」を、ダブルクリックで非表示にします。

2）同じく、5フレーム目で「mouth_△」を、ダブルクリックで表示にします。

これで、ダメージを食らった瞬間に口角が下がった口に変化します。



次に、最後のバウンドが終了したあとにも表情を変えたいと思います。

1）52フレーム目で「XX」を、ダブルクリックで非表示にします。

2）同じく、52フレーム目で「／●●＼」を、ダブルクリックで表示にします。

これで困り顔の表情に変化しました。


セクション2：「スケール」変更で柔らかさ表現！


現状のてっくんは、バウンドする時に体がつぶれたりしておらず、なんだか固そうに見えます。

なので、バウンドする瞬間に少し体をつぶして、跳ねるような表現を加えたいと思います。



最初のバウンドの直前、9フレーム目を選択し「Yスケール」を1に設定します。



次にバウンドの瞬間no10フレーム目に「Yスケール」を0.9に設定します。

これで体が少しつぶれました。



最後に12フレーム目の「Yスケール」を1にもどします。

これで体が元にもどり、バウンドする瞬間に、体がつぶれるように設定できました。



1）同様に17〜20フレーム目の「Yスケール」も設定します。

2）同様に24〜28フレーム目の「Yスケール」も設定します。



同じ動きを左右反転した後半にもコピペし、バウンド時の柔らかさ表現は完了です！


セクション3：「カラーブレンド」で色変更！

最後のクオリティアップは、キャラ自体の色を一瞬だけ変更します！

変更タイミングはダメージを受けた瞬間！そのタイミングで、キャラの色を赤く変更します。

ゲームではよくある効果ですね^^



まず「body」の「カラーブレンド」の設定ボタンをクリックします。



すると「カラーブレンドの編集」ウィンドウが開きます。

ウィンドウを開いた時に「単色」にチェックが入り、選択したパーツは自動でグレーに色が変化します。

なので、この単色のグレー部分をクリックします。



するとカラーピッカーウィンドウが開くので、「Rate」のつまみを一番左まで移動します。

これでてっくんの色が戻りました。

この「Rate」は、設定した色を何%パーツに反映するか？という感じのメモリです。

一番左が0%で、一番右が100%だと思ってください。



次に1フレーム目を選択して「カラーブレンド」の設定ボタンをクリックします。



1）カラーピッカーウィンドウまで開き、RGBを調整して赤色にします。

2）「Rate」は100%にすると、キャラの主線も塗りも全て赤くなります。



すべてを赤くしてしまうと何が何だかわからなくなってしまいそうなので、「Rate」のつまみは半分くらいで設定しておきます。

これでてっくんの額の「T」マークの判別が付く状態で、キャラを赤くすることができました。



最後に2フレーム目の「カラーブレンド」は、「Rate」のつまみを一番左まで移動し、元の色で設定します。

これでダメージをくらった瞬間に、「body」はチカッと赤く変色します。



ちょっと変色する間隔が短すぎたので、2フレーム目と5フレーム目に、それぞれキーを移動します。



色の変更は、表示されているパーツすべてに反映させます！

「hand_R」「hand_L」「Lower_body」「leg_R」「leg_L」「●●」6つを選択した状態で「カラーブレンド」を設定します。

数年前はこの一斉変更ができなかったので、このバージョンアップは大変助かります^^



同様に28フレーム目で表示になっているパーツも赤く変更させ、ダメージ効果の色変更が完了です。



これで「damage」アニメーションが完了いたしました！



次回は「＼／」の目を使って、プンプンと怒ったアニメーションを設定したいと思います！

まとめ

・一瞬の「スケール」変更で柔らかさ表現！

・「カラーブレンド」でダメージ効果の表現！
ここまでで何か質問やコメントなどございましたら是非書き込んでください！

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



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

やじキチ

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

コメントを残す