unity sprite animation　(ハルフル)

チューリップを咲かせよう
1

・2Dで制作する
・マウスのクリックでチューリップが現れ、花を咲かせる
・咲いてから一定時間経過すると、フェードアウトしながら下に
落ちていく。
・チューリップが咲く位置は、上下方向は画面下に固定、横方向
はランダムとする
〇主な仕様
2

Ⅰ.アニメーションの作成
Ⅱ.アニメーションの制御
〇主な制作手順
3

unityには複数画像をパラパラ漫画のように再生し、アニメーション
にしてくれる機能がある。今回はその機能を使う。
具体的な手順は、以下の３ステップである。
Ⅰ.アニメーションの設定
①画像をインポート
②Sprite Modeを変更
③ピボット点を設定
4

ドラッグアンドドロップなどでアニメーションにし
たい画像をインポートする。この時UnityでAssets
フォルダの中にImageフォルダを作り、そこにイン
ポートすると管理がしやすいだろう。
ここでは”flower0～4”という連番のファイルを使用
する。
①画像をインポート
5

①でインポートした画像を全て選択し、 Sprite
Modeを”Single”から”Multiple”に変更し、全
選択状態のままhierarchyに追加する。すると
アニメーションが作成される。最後にAdd
Tab→Animationタブを追加する。
② Sprite Modeを変更
6

画像を1枚選択し、Sprite Editorを押
す。そして、画像全体を範囲とし、
Pivotを”Bottom Center”に設定する。
ほかの画像も同様の設定を行う。
③ピボット点を設定
7

以上でアニメーションは完成である。ちなみ
に、アニメーションタブの”Samples”の数字
を変更することでアニメーションの再生速度
を調整できる。
8

Ⅱ.アニメーションの制御
ここからは、先ほどのアニメーションをプログラムを
使い制御する。主な手順は以下の4つである。
①マウスのクリックを認識
②アニメーションの座標を決定
③アニメーションを再生
④フェードアウト
9

マウスのクリックを認識するには
Input.GetMouseButtonDown(〇)を使用する。〇には0か1が
入り、0が左、1が右クリックである。クリックされるとtrue
を返す。常に判定してほしいのでupdate関数に記述する。
①マウスのクリックを認識
10

②アニメーションの座標を決定(1/3)
今回の仕様ではy座標を固定し、x座標は画面内で
ランダムで取る。
まずは、下の図のように必要な変数を宣言する。
主に座標関連の変数である。
11

次に、Start関数で画面左下と右下のワール
ド座標を取得する。ここではビューポイン
ト座標からワールド座標に変換している。
ビューポイント座標は以下の通りである。
(0,0)
(1,1)
(1,0)
(0,1)
12

最後に、x座標を先ほど取得した画面内で
ランダムで取り、y座標は画面の下に設定
し反映させる。この処理は、クリックした
ときにしたいのでクリック判定の中に記述
する。
13

③アニメーションを再生(1/2)
必要な変数を宣言し、start関数で初期化
する。ここでは、初期状態を透明に設定
している。ちなみに、Color()の引数は、
Color(R,G,B,Alpha)である。Alphaは0が
透明、1が不透明である。
14

③アニメーションを再生(2/2)
クリックされるとalphaの値を1にして不
透明にし、アニメーションを先頭から再
生する。この処理はクリック判定の中に
記述する。ちなみに先頭から再生の部分
を記述しなければ、クリックした時に
よってアニメーションの再生開始位置が
変化してしまう。
15

④フェードアウト(1/3)
フェードアウトはクリックしてから一定
時間経過後に、alphaの値を下げていき、
徐々に透明にすることによって行う。
16

まずは、クリック時の時間を記録
する変数を用意し、クリック時の
時間を記憶する。
Time.timeは実行してからの時間
を取得することができる。
17

最後に、クリックしてから3秒後にalphaの値を下げながら
y座標を引いていくとフェードアウトの完成である。この
処理はupdate関数に記述する。
以上でスクリプトは完成である。
18

以上で完成である。
19

More Related Content