sprite animationとprefabを活用して、蝶々を飛ばす

1. 蝶
1

2. 目次
1. 開発環境・仕様
2. 蝶を動かす[準備][アニメーション][遠くに飛ばせる][完成]
3. 蝶のPrefabを作成する
4. 蝶を複製する
2

3. 開発環境・仕様
 開発環境：Windows/Unity2017/2D
 実行されたときに、5羽の蝶(それぞれ異なる色)が飛んでいく
 遠くに飛んでいっている表現をするため、飛んで行くにつれて蝶は小さく、薄くなって
いく
 必要な素材 : 蝶のイラスト(以下のような羽が開閉したもの3種類)
3

4. 蝶を動かす[準備]
 準備
1. 動かしたい画像をProject
タブのAssetsに追加
2. 追加した画像を
SceneViewへ、ドラッ
グ&ドロップ
１.画像追加
2. ドラッグ＆
ドロップ
4

5. 蝶を動かす[アニメーション(1/3)]
 アニメーションをつける
→蝶が羽を動かしているように見えるようにする
→パラパラ漫画の原理で蝶が羽を開閉した3画像を交互に表示
→UnityのAnimationを活用する
1. Hierarchyの蝶を選択した状態でAnimationウィ
ンドウを開く
→タブ表示されていない場合は、ツールバー
>Window>Animationで表示
5

6. 蝶を動かす[アニメーション(2/3)]
2. Creatボタンを押し、ア
ニメーションを新規作成
3. アニメーションで用いる
画像をAnimationウィンド
ウの時間軸のある画面にド
ラッグ&ドロップする
3. ドラッグ＆
ドロップ
6

7. 蝶を動かす[アニメーション(3/3)]
4. 下図のように、蝶の羽が上→水平→下→水平→上となるように、0.05秒間隔で画像を
並べる
羽が上向き 水平 水平下 上
5. 左上のpreviewの▶を押して、GameViewなどで蝶の動作を確認する
→飛んでいる動作に見えるはずです！これでアニメーションは完成！
7

8. 蝶を動かす[ 遠くに飛ばせる(1/5)]
 遠くに飛ばせる
→今のままだと固定位置で羽ばたかせているだけ
→ふわふわと飛んでいくように見えるよう移動を
させる
1. 移動させるための新規ソースコードを作成する
→Hierarchyの蝶を選択
→蝶のInspectorのAddComponentボタンを押す
→検索部分に作りたいソースコードの名前を入力
し、検索結果に出てくるNewScriptを選択し
createする
8

9. 蝶を動かす[ 遠くに飛ばせる(2/5)]
2. Assetsに作られたスクリプトを選択し以下のように記入していく
＜蝶を動かすコード説明・変数＞
作成した変数は以下の通り。変数の役割はコメントに詳細を示す
9

10. 蝶を動かす[遠くに飛ばせる(3/5)]
<蝶を動かすコード説明・start関数>
初めに1度だけ実行されるstart関数は以下の通り。
Reset関数で飛ぶ方向をランダムで決定し、その向きによって画像の向きを変更する
10

11. 蝶を動かす[遠くに飛ばせる(4/5)]
<蝶を動かすコード説明・reset関数>
蝶の動きの初期設定を行うreset関数は以下の通り。
飛ぶ方向をランダムで決定する。上方向に飛んでくように飛んでいく位置のy座標をランダムで
取得している。大きさの設定数字はカメラ位置などによって適切なものが変化するので実行し
て確認し、調整を行ってください
11

12. 蝶を動かす[遠くに飛ばせる(5/5)]
<蝶を動かすコード説明・update関数>
蝶を実際に動かすupdate関数は以下の通り。
上下に揺らすためにsin関数を用いて揺らしている。どんどん遠くへ行っているように見せるた
めに、どんどん透明度と大きさを小さくしていく。大きさを示すlocalScaleがマイナスになると
画像が反転してしまうので、それを防ぐためにある程度で小さくするのを止める処理を書いて
いる。
12

13. 蝶を動かす[完成]
 1匹の蝶を動かすのは完成！
→この状態で実行をすると、蝶が1匹動く
→このままだと1匹だけでつまらない
→数を増やしたくても複製が面倒
→蝶のPrefabを作成し、そこから複製を行う
13

14. 蝶のPrefabを作成する(1/2)
 Prefabとは
→オブジェクトの設計図のようなもの
 なぜPrefab？
→蝶の数を簡単に調整できるようにするため
→Prefabを使うと複製が容易
14

15. 蝶のPrefabを作成する(2/2)
 さっきの蝶をPrefabにする
1. Hierarchyの蝶を選択し、
ProjectタブのAssetsにドラッ
グ&ドロップをする
→Hierarchyの蝶の名前が青
色に変化する
→Prefab化できた印
2. Sceneにある蝶はもういらな
いのでHierarchyからdelete
する
ドラッグ＆
ドロップ
15

16. 蝶を複製する(1/4)
 蝶を複製する
→同じ動きをする蝶を複製できるようにするためにPrefabを用いて蝶の
Objectを生成するための工場の役割をするObjectを作成する
→違う色の蝶も今までと同じ手順で素材を変更してPrefab化してから行う
1．HerarchyでCreate>CreateEmptyより空のObjectを作成する
2. 蝶をうごかす[遠くに飛ばせる]の手順1と同じ方法で
新しいスクリプトを作成する
16

17. 蝶を複製する(2/4)
3. Assetsに作られたスクリプトを選択し以下のように記入していく
＜蝶を複製するコード説明・変数＞
作成した変数は以下の通り。この5つのGameObjectは蝶のPrefabを代入する
ものである。 Prefabは外から参照できるようにpublicに設定する
17

18. 蝶を複製する(3/4)
＜蝶を複製するコード説明・start関数＞
start関数は以下の通り。Instantiate関数を用いてPrefabからGameObjectを生
成する。コメントアウトされているfor文などを用いて蝶の数を変更すること
ができる
18

19. 蝶を複製する(4/4)
3. 蝶のInspectorのさきほど作ったスクリプトのpublic変数のところに、作成
した蝶のPrefabをドラッグ&ドロップする
19

20. 完成！
 この状態で実行すると、5色の蝶がぱたぱたと飛ぶような演出が起こる
 蝶の数は複製をするコードを変更すればすぐに調整可能です
20