初めに
本記事では、Spriteからアニメーションを作る方法をまとめます。
Index
アニメーションを作ってみる
アニメーションにしたい画像を用意する
Spriteからアニメーションを作る場合、このように１つの画像に様々な画像が入っている画像データを利用します。
Spriteをスライスする
まず、Spriteを切り分けましょう。
- Sprite Mode をMultipleに変更する。
- Splite Editorを開く
Sprite Editorをクリックすると、次のようなウィンドウが開きます。このウィンドウでSpriteを切り分けます。
- Sliceをクリックし、Spriteを切り分ける
Sliceをクリックすると、上のような画面が現れます。スライスの仕方はTypeで変更できます。
| Type | 説明 |
|---|---|
| Automatic | テクスチャの透明度から自動で切り分け |
| Grid By Cell Size | テクスチャを取り決めた値で切り分け |
| Grid By Cell Count | テクスチャを指定した数になるように切り分け |
Automaticで切り分けた場合
Grid By Cell Sizeで切り分けた場合
Grid By Cell Count
Pixel Sizeは切り分けるサイズ、Offsettは切り分けを開始する位置を何ドットずらすか、Paddingは隣り合うSprite同士の間隔、Pivotは切り分けたスプライトの基準位置をどこに指定するのかを表します。
Applyをクリックすると切り分けたことを確定できます。Revertをクリックすると元に戻します。
- Spriteが切り分けられていることを確認する
AssetsにあるSpriteが次のように切り分けられていることを確認しましょう。
アニメーションを作る
切り分けたSpriteからアニメーションを作ります。ほかの手順でもアニメーションを作れますが、筆者が最も簡単だと思う方法を紹介いたします。
- 切り分けたSpriteでアニメーションにしたい部分を選択し、Hierarchyにドラッグ&ドロップする
- アニメーションを保存する
下の画像のようにアニメーションを保存するため、フォルダが開かれます。名前を付けて保存します。
- AnimatorとAnimation Clipが作られていることを確認する
AnimatorとAnimation ClipがAssets内に作られていればokです。
これらの役割は次の通りです。
| Animator | 複数のAnimation Clipの関係を管理する |
|---|---|
| Animation Clip | アニメーションそのものを扱うファイル |
Animation Clipがアニメーションそのもの、Animatorがジャンプ、歩行、ダッシュなど複数のアニメーションの切り替えなどを管理するものです。
- 実行して確認する
若干、歩く速度が速いので、修正します。
- Animationウィンドウを開き、修正する
Window→Animation→Animationをクリックし、Animationウィンドウを開きます。
現在は、0.01秒ごとにSpriteを切り替えているので、編集します。また、アニメーションにSpriteを追加したい場合は、次の画像のように追加することもできます。
実行して問題がなければ完成です。
アニメーションを作る場合の注意点
必要があれば、画像の透過処理を事前にしておく
キャラクターのアニメーションを作るときなど、透過処理が必要な場合がほとんどです。事前にしておきましょう。
スライスするときの画像サイズは同じになるようにしておく
画像のサイズが途中で変わるとうまくアニメーションが作れません。そのため、あまりAutomaticで切り抜かず、Grid By Cell SizeかGrid By Cell Countで切り抜けるように画像を作りましょう。画像のサイズは2のべき乗にしておくと圧縮ができるので、できるだけ2のべき乗にしておきましょう。
地面についている場合の絵は必ず画像の一番下の位置に足を持ってくる事
当たり判定を作る際に手間が増えます。
他のアニメーションの作り方について
今回はスライスしたSpriteをドラッグ&ドロップしてアニメーション（AnimatorとAnimation Clip）を作りました。しかし、Animatorを事前につくっておき、SpriteにアタッチしてからAnimation Clipを作る方法もあります。あるキャラクターに複数のアニメーションをさせる場合は、そちらのほうが都合がよいため、私はそちらでアニメーションを作ることが多いです。機会があれば、また記事にします。
最後に
今回は、簡単にSpriteからアニメーションを作る方法をまとめました。おそらく、まだ疑問やできないことも多いと思われます。今後もいくつかアニメーションに関する記事を作っていきますので、見ていただければ幸いです。
