スプライトシートアニメーションを実装する
検証環境
- Windows
-
- Windows 11
- Unity エディター
-
- 2020.3.25f1
- 入力システムパッケージ
-
- 1.2.0
この Tips の前提設定
この Tips の説明の前提として以下の設定を事前に行っています。
スプライトシートアニメーションとは
近年のゲームではキャラクターやエフェクトに動きを付ける際は 3D モデルを動かしたりリアルタイムに爆発の計算を行いエフェクトを表示する方法が行われたりしています。 これはゲーム機の計算能力が上がっているためできるようになったのですが、昔のゲーム機ではそこまで能力がないため画像を連続で切り替えて動いているかのように見せるスプライトシートアニメーションが主流でした。 原理はテレビなどで流れるアニメと同じです。 スプライトシートアニメーションは昔に比べれば使っているゲームは減りましたが、計算に必要な負荷がかなり低いので今でも使われることが多いです。
スプライトシートアニメーションは複数の画像を連続で切り替えて表示するのですが、 その数だけ画像ファイルを用意するということは少なく基本的には１枚の画像に全ての表示パターンを入れておきます。 この方が画像ファイルの管理も簡単ですし画像ファイルの読み込みにかかる負荷も軽減できます。 このアニメーションをまとめた画像ファイルのことを「スプライトシート」と呼びます。
スプライトシートを作成する
スプライトシートは実質ただの画像ファイルです。Unity とは関係ないので画像編集ツールで作成してください。 ファイル形式は最終的に Unity で扱える PNG ファイルなどで作成します。
またスプライトシートを作成するにあたって以下の決まり事があります。
- 全てのフレームの画像サイズを統一させる。例えば１枚目が 32x32 ピクセルなら２枚目以降も 32x32 ピクセルにする。 例えば６枚のフレームで「3x2」形式で用意するならスプライトシートのサイズは 96x64 ピクセルとなる。
- 画像の揃え方は「6x4」「2x8」など自由であるが、必ず全てのフレームを埋める前提で作成する。「6x4」なら24フレームなど。仮に 13フレームのアニメーションなら「1x13」か「13x1」で準備する。
- アニメーションなので前後のフレームで位置ずれがないようにきちんと合わせる。
- アニメーションをする方向は左上のマスから始まり右方向へ、一番右にいったら１段下の左から始まり再び右方向へ、という流れとなる。
実は Unity では上記の内容を厳密に行う必要がなかったりするのですが、あらかじめ仕様を決めておいた方がいろいろと楽です。
今回は以下のような数字を切り替えるスプライトシートを使ってみます。１マスは 32x32 ピクセルです。 「6x4」の24フレームでできていますので、画像サイズは 192x128 ピクセルとなります。
Unity エディターでスプライトシートの設定を行う
プロジェクトを作成したらスプライトシートファイルをプロジェクトに追加します。
ここではファイル名を NumberAnimation とした前提で説明します。
NumberAnimation ファイルを選択しインスペクターの内容を以下のようにします。
| 項目 | 値 |
|---|---|
| テクスチャタイプ | スプライト (2D と UI) |
| スプライトモード | 複数 |
他にもいろいろ設定できますがまずはこのままにします。 設定したら「Sprite Editor」ボタンをクリックします。
下のようなダイアログが出た場合は「Apply」ボタンをクリックします。 実はこのインスペクターの設定は保存対象であり、下の方にスクロールすると「適用する」ボタンがあるのでこのボタンで設定を保存する必要があります。 ダイアログの「Apply」でも保存になりますのでどちらで保存しても構いません。
スプライトエディターが表示されます。ここではスプライトシートからスプライトを分割する作業を行います。
左上に「スライス」というボタンがあるのでクリックし、タイプを「Grid By Cell Size」に変更します。 今回のスプライトシートはスプライトの１サイズが「32x32」ピクセルなのでピクセルサイズにそれぞれ 32 を入力します。 入力が完了したら「スライス」ボタンをクリックします。
今回の画像は初めから明確に分割されているような画像なので分かりにくいですが１スプライト 32px で分割されます。 「Ctrl」キーを押すと分割ラインが緑色で表示されます。
分割したら「適用する」ボタンで保存します。
プロジェクトの画像ファイルにある三角ボタンをクリックして展開するとスプライトが分割されていることが分かります。
スプライトの配置とアニメーション
設定したスプライトをビューにドラッグして配置してください。
するとダイアログが表示されますのでここでは NumberAnimation という名前で保存します。
このファイルはアニメーションの設定を保持するファイルです。
最初のスプライトがビューに配置され、プロジェクトにアニメーションコントローラーとアニメーションクリップが作成されます。 画像が小さい場合はスケール等を設定して大きくしてください。
この時点でデフォルトのアニメーション設定が行われるのでそのままゲームを実行してみてください。 ゲーム開始と同時にスプライトアニメーションが動くことを確認できると思います。
アニメーションをループさせないようにする
プロジェクトからアニメーションクリップファイル (NumberAnimation.anim) を選択します。
インスペクターに「時間をループ」のチェックがあるので外します。
ゲームを実行すればアニメーションが 24 で止まることを確認できます。 １回きりの爆発エフェクトなどで有効です。
アニメーションの速度を変える
ヒエラルキーからアニメーションするスプライトを選択します。
次にアニメーションタブを選択します。 アニメーションタブがない場合はメニューから「ウィンドウ > アニメーション > アニメーション」を選択してください。
「サンプル」という数値があり、これは１秒間に何回画像を切り替えるかの数値となります。 今回のサンプルでは２４フレームのアニメーションなので２秒ごとにアニメーションが繰り返される形になります。
この数値を減らせばアニメーションスピードが遅くなりますし、大きくすればスピードが早くなります。
そのほかのアニメーションの詳細設定について
アニメーションの各種設定については別途アニメーション専用の Tips で説明します。 これらの設定はスプライトアニメーション専用ではなく、 他の動きに関するアニメーションや 3D に関連するアニメーションの設定と共通となっています。
本 Tips ではスプライトシートからアニメーションとして動かせるまでの説明とします。