こんにちは、Unityエンジニアのオオバです。
SpriteAtlas(スプライトアトラス)とは、複数の画像を1枚の画像に合成したアセットです。1枚の画像にする最大の理由はパフォーマンスのため。具体的にはDraw Call(ドローコール)と呼ばれるCPU負荷軽減です。
![【Unity】SpriteをパックするSpriteAtlasの使い方_0](https://i.gyazo.com/560c669189789d99c87cf3535827a963.jpg#750__416)
上図のとおり本来6回の描画処理が必要なところ(左)、SpriteAtlasを使うことで1回で描画できるといったパフォーマンスの向上が期待できます。
UnityではSpriteAtlasという機能を使って1枚の画像に合成できます。しかし、 Unityのデフォルト状態ではSpriteAtlasを使えません。 設定を変更する必要があるのです。そこで本記事ではわかりやすくSpriteAtlasの始め方から使い方までを詳しく解説します。特に2DゲームやUIを開発する人は必ず知っておいた方がよいテクニックです。ぜひ最後まで読んでみてください。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!
SpriteAtlasを始める準備2つの手順
Unityのデフォルト設定では、SpriteAtlasを使えないため、使えるようにするための準備をします。
手順①2D Spriteパッケージのインストール
手順②Project SettingsでSpriteAtlasの有効化
手順①2D Spriteパッケージのインストール
Unityデフォルト状態ではスプライトアトラスは使えません。 メニュー Window > Package Manager
からPackage Managerウィンドウを開きます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_1](https://i.gyazo.com/47a0311b46cc6fa98a33b651be6a0ecd.jpg#750__442)
左上のプルダウンを「Packages: Unity Registry」にして「2D Sprite」をインストールしてください。
手順②Project SettingsでSpriteAtlasの有効化
Project SettingsウィンドウでSpriteAtlasを有効化する必要があります。 メニュー Edit > Project Settings
をクリックします。Project SettingsウィンドウのEditorメニュー内のSpritePackerのModeを Sprite Atlas V1 に設定します。
![【Unity】SpriteをパックするSpriteAtlasの使い方_2](https://i.gyazo.com/fd6d326ecba805f6c51a34def9d6bbcf.jpg#516__500)
以上で準備は完了です。1度設定すると同じUnityプロジェクトであれば以降適用されますのでご安心を。
SpriteAtlasの基本的な使い方
SpriteAtlasの準備ができたので、ここからは基本的な使い方を解説していきます。
①SpriteAtlasの作成して画像を1枚にパック
②SpriteAtlasのSpriteを使う
手順①SpriteAtlasの作成して画像を1枚にパック
最初ににSpriteAtlasを作成します。 メニュー Assets > Create > 2D > Sprite Atlas
をクリックしてください。
![【Unity】SpriteをパックするSpriteAtlasの使い方_3](https://i.gyazo.com/df5e1a6c9cb27d147e69fc291d083cf3.jpg#750__215)
するとProjectウィンドウにSpriteAtlasが作られます。SpriteAtlasの各種設定項目については「SpriteAtlasの各種設定項目」で後述します。
![【Unity】SpriteをパックするSpriteAtlasの使い方_4](https://i.gyazo.com/697a62af768f3873c1c192a9482e77a7.gif)
作ったSpriteAtlasに画像(Sprite)をドラッグアンドドロップしましょう。
![【Unity】SpriteをパックするSpriteAtlasの使い方_5](https://i.gyazo.com/9988c23884a8559dbd1a04a1959dda01.jpg#405__500)
画像を追加したら「Pack Preview」ボタンをクリックします。すると追加した画像が1枚にパックされます。
おすすめはSpriteAtlasにフォルダをまるごと追加
1枚ずつ画像をSprite Atlasに追加する方法もありですが、おすすめはフォルダのまるごと追加です。以下の動画のようにSpriteを格納したフォルダをSpriteAtlasに追加します。
![【Unity】SpriteをパックするSpriteAtlasの使い方_6](https://i.gyazo.com/3167e659c2617133b5c33d663bdca486.gif)
すると、1度の作業で追加できて便利です。また保守の面でも優秀です。フォルダ内の画像を入れ替えることで自動でSpriteAtlasを更新できるのです。
特に理由がない場合はSpriteAtlasにはフォルダを追加しましょう。
SpriteAtlasに画像が追加できない時の対処法
SpriteAtlasにうまく画像を追加できないときがあります。そんなときは追加しようとしている画像の Texture Type をチェックしてみてください。
![【Unity】SpriteをパックするSpriteAtlasの使い方_7](https://i.gyazo.com/1623a0bf32f7c7e3e89d95f91a1a88db.png#750__417)
Texture Typeが「Sprite(2D and UI)」であることを確認しましょう。
手順②SpriteAtlasのSpriteを使う
SpriteはUnity UI(uGUI)またはSpriteRendererで使用できます。
uGUIでSpriteAtlasを使用する
uGUIの場合は「Imageコンポーネント」を使ってSpriteを利用します。
![【Unity】SpriteをパックするSpriteAtlasの使い方_8](https://i.gyazo.com/7513ab3b46c237da892b32b6219f968a.png#750__175)
Imageの「Source Imageプロパティ」にSpriteをセットするだけで自動的にSpriteAtlas経由のアクセスになります。
![【Unity】SpriteをパックするSpriteAtlasの使い方_9](https://i.gyazo.com/2cb799697df5c031cff5eea570ed824d.png#750__363)
少し余談ですが、Imageの便利機能「SetNativeSize」を紹介します。 SetNativeSizeはSpriteの元サイズをUIに反映できます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_10](https://i.gyazo.com/68b71b93b3d1df38956bb179824154ca.jpg#750__212)
つまりRectTransformの幅と高さをSpriteのサイズにできるのです。UIを作る上で頻度高く使用するためぜひ覚えておきましょう。
SpriteRendererでSpriteAtlasを使用する
SpriteRendererもuGUIと同様で、SpriteAtlasでパックされたSpriteを普段どおりに使うだけで良いです。SpriteRendererにセットされたSpriteのサイズはuGUIのサイズとは違います。
![【Unity】SpriteをパックするSpriteAtlasの使い方_11](https://i.gyazo.com/1d2b0e404f3936c0cac0c7044fe65cff.png#750__469)
SpriteRendererには幅、高さという概念はなくスケールのみです。SpriteRendererごとにサイズを変更するときはスケールを変更します。
Spriteには個別の単位「Pixels Per Unit」という設定があります。これはスケール1に対して何ピクセル使うかという単位です。
![【Unity】SpriteをパックするSpriteAtlasの使い方_12](https://i.gyazo.com/2cdabb7134929e91243895a3638029dc.png#750__433)
例えばPixels Per Unitが「100」であれば、スケール1のときにディスプレイ上では100ピクセル使うということです。この「Pixels Per Unit」は 各Spriteごとに設定 できます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_13](https://i.gyazo.com/57950a861c53888d13cd7f141049ab5b.png#714__500)
詳しくは次の記事で解説していますので2Dゲームを作る方はぜひ読んでみてください。
SpriteAtlasの各種設定項目
SpriteAtlasの基本的な使い方を理解したところで、SpriteAtlasの各種設定を解説します。
![【Unity】SpriteをパックするSpriteAtlasの使い方_14](https://i.gyazo.com/de9ec97ffb64271dd89cad1360cffa3f.png#605__500)
いくつか重要な設定があるため、ぜひ頭に入れておいてくきましょう。「細かいことはよくわからないよ」という方は「SpriteAtlasの設定まとめ」を参考にしてください。よく使う設定を表にしてわかりやすくまとめました。
Type(Master or Variant)
「Master」と「Variant」という2つのTypeを設定できます。 Typeは通常「Master」に設定するで大丈夫 です。Masterとは大元のSpriteAtlasです。VariantとはMasterの縮小版を作るときに役立ちます。
例えば幅高さがが2048×2048のSpriteAtlas(Master)のVariantを作ったとします。Variantには「Scale」を指定できるのです。例えばここで「0.5」と入力してみましょう。すると ”Variant” のSpriteAtlasの幅と高さはそれぞれ半分の1024×1024になるのです。
つまりVariantを利用することでメモリの使用量を減らせるということです。
SpriteAtlas Variantの作り方
SpriteAtlas Variantはまず空のSpriteAtlasを作ります。
![【Unity】SpriteをパックするSpriteAtlasの使い方_15](https://i.gyazo.com/7323569e6c0c7c1bd36d493b4e95d240.png#750__265)
TypeをVariantに変更しましょう。
![【Unity】SpriteをパックするSpriteAtlasの使い方_16](https://i.gyazo.com/24f1628a8f2392823d0dfef36268af27.png#750__256)
Master Atlasに大元のSprite Atlasをセットします。
![【Unity】SpriteをパックするSpriteAtlasの使い方_17](https://i.gyazo.com/df154318879daf6e554ca2be65906252.png#750__409)
VariantのScaleを0.5にしてみましょう。VariantのSpriteAtlasのサイズが大元の半分になります。つまりサイズが1024×1024になります。
実際にプレビューを確認してみます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_18](https://i.gyazo.com/b6a8a210e01ad3cb0bf778cb304758d7.jpg#750__373)
このようにMasterとVariantのメモリ使用量が変わります。例えば低スペック向けにメモリ使用量を節約する方法の1つとして覚えておくと良いでしょう。
SpriteAtlas Variantの使い方
ではどのようにSpriteAtlas Variantを使えばよいでしょうか。最も簡単な方法は後述する「Include in Build」で行います。Include in Buildにチェックが入っている方が採用されるのです。
![【Unity】SpriteをパックするSpriteAtlasの使い方_19](https://i.gyazo.com/318a6262e20526f32c806e8634c86990.png#750__168)
MasterのInclude in Buildチェックを外し、VariantのInclude in BuildチェックをONにしましょう。この状態でUnityを実行してみます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_20](https://i.gyazo.com/e37d28cfefc4f7fd6c572de31a9368c6.gif)
するとMasterのSpriteAtlasを縮小したSpriteが適用されます。注意点として、Master、VariantはともにUnity実行時に反映されます。 Editモード中では画面が更新されません。
Include in Build
「Include in Build」にチェックするとビルドしたファイルにSpriteAtlasが含まれます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_21](https://i.gyazo.com/34a76b17a21d5b0b5a667c71002dc4ad.png#750__231)
ただし、例外もありチェックを入れているけどビルドに含まれないケース、またその逆もあったりしますので、詳しく解説します。
Include in Buildのチェックを入れてもビルドに含まれないケース
Include in Buildにチェックを入れてもビルドに含まれない場合があります。それはSpriteAtlasまたはSpriteAtlasの中のSpriteがどこからも参照されていない場合です。SpriteAtlas自身、またはSpriteがゲーム内で参照されて初めてアプリに含まれることに注意しましょう。
Include in Buildのチェックを外してもビルドに含まれる2つのケース
Include in Buildのチェックを外してもビルドに含まれる場合が2つあります。
①SpriteAtlasが参照されているケース
1つ目は「SpriteAtlasインスタンス自身が参照されている場合」です。
[SerializeField] SpriteAtlas _atlas;
void Awake()
{
Sprite sprite = _atlas.GetSprite("Sprite名");
}
上記のようなスクリプトを使ってSpriteAtlasから GetSpriteメソッド
でSpriteを取得するときに使います。
②SpriteAtlasがResourcesフォルダ内にある場合
2つ目はSpriteAtlasがResourcesフォルダに含まれる場合です。この場合、SpriteAtlasがどこからも参照されていなくてもゲームに含まれてしまいます。 意図せずゲームのファイル容量が増えているとき にResourcesフォルダをチェックしてみると良いかもしれません。
Allow Rotation / Tight Packing
「Allow Rotation」と「Tight Packing」はSpriteAtlasにより多くのSpriteを格納するための設定です。つまりビルドしたファイル容量の節約に繋がります。「Allow Rotation」はよりSpriteを詰め込むためにパックするSpriteを回転させるかどうか、「Tight Packing」とは、よりギチギチにパックする設定です。
Tight Packingの詰め込み仕様
Tight Packingがどのように詰め込むのか確認してみましょう。
![【Unity】SpriteをパックするSpriteAtlasの使い方_22](https://i.gyazo.com/2c0ae03328eb6736231fcd45d2619629.jpg#750__373)
Tight PackingのON/OFFを比較した画像です。パッと見何がTight Packingされたのよくわからないので、わかりやすい部分を拡大してみます(↓下図)。
![【Unity】SpriteをパックするSpriteAtlasの使い方_23](https://i.gyazo.com/8f3750e87dcec03ac392a9ac7e980a3d.jpg#750__364)
Spriteの矩形に対して「透明部分」に他のSpriteが食い込んでパックされるのです。
UIで「Allow Rotation」「Tight Packing」は使用不可
一見便利そうな「Allow Rotation」と「Tigh Packing」はUI(uGUI)では使用不可です。
![【Unity】SpriteをパックするSpriteAtlasの使い方_24](https://i.gyazo.com/f7ac35c2eb19375ba2efae03386361f4.jpg#750__420)
上図のとおりUIでは「Allow Rotation」と「Tigh Packing」が反映されません。UIでSpriteAtlasを使用する場合は「Allow Rotation」と「Tigh Packing」のチェックは外しておきましょう。
「Allow Rotation」「Tight Packing」はSpriteRendererで使用
「Allow Rotation」と「Tight Packing」はSpriteRenderer」はSpriteRendererで使用しましょう。
![【Unity】SpriteをパックするSpriteAtlasの使い方_25](https://i.gyazo.com/64ae35c5b086111278ffa1489f1480de.gif)
上の動画のとおりSpriteRendererでは意図通りの動作をします。繰り返しになりますが、SpriteAtlasはUnity実行時に反映されます。Editモード中は正常に見えてしまうため注意しましょう。
Padding
「Padding」とはSprite同士の間隔で「2、4、8」の3つから選択可能です。大きい値につれてパックするSprite同士の間隔が広がります。基本はデフォルトの「4」で大丈夫ですが、Spriteを表示したとき隣のSpriteも表示されてしまったときに調整します。
特にVariantを使ったときです。
![【Unity】SpriteをパックするSpriteAtlasの使い方_26](https://i.gyazo.com/3bababe4b05d84cd8264fe46e4e270a1.jpg#750__264)
MasterのSpriteAtlasでは正常でしたが(左)、解像度を低くしたVariantでは画像がぼやけた分、隣のSpriteに侵食していることが分かります(真ん中)。Paddingを「8」に数値を上げることで対処した例です(右)。
Variantの他に圧縮テクスチャを使用したときに画像がぼやけてしまうといった場合もあります。実際に目視で確認するしかありません。
Read/Write Enabled
「Read/Write Enabled」は基本的には「OFF」で大丈夫です。ONにするケースは何かしらの理由で、SpriteAtlasをランタイム中に読み書きしたい場合です。もしチェックをONにする場合は使用メモリが2倍になるため注意です。
Generate Mip Maps
「Generate Mip Maps」は必要に応じてON/OFF切り替えてください。UIで使用するSpriteAtlasであれば基本的に「OFF」です。Generate Mip MapsとはMip Map(ミップマップ)を作る機能です。Mip Mapとは1つの画像から複数解像度を下げた画像で、カメラからの距離に応じて低解像度の画像を使い、描画スピードを上げるのです。つまり解像度を下げた画像を自動生成するため、使用メモリが増えます。
チェックをONにすると分かりますが、少しぼやけた印象を受けます。繰り返しになりますが、必要に応じてチェックを切り替えてください。
sRGB
基本的にチェックは「ON」で大丈夫です。sRGBとは色空間の話です。sRGBにチェックを入れるとこのSpriteAtlasをガンマ空間の色として認識されます。
解説は割愛しますが、結論、意図せず初期設定のPhotoshopなどで画像を作成しているのであれば。sRGBにチェックを入れておくで大丈夫です。
Filter Mode
「Filter Mode」は必要に応じて「Point」または「Bilinear(バイリニア)」を選びます。 Filter Modeとは画像を拡大縮小した際の補間方法の指定 です。「Point」は補間しません。ドット絵のような逆に補間が効いてほしくないものに使用します。
「Bilinear」「Trilinear(トリリニア)」はともになめらかに補完されます。「Bilinear」と「Trilinear」の違いは前述の「Generate Mip Maps」でMip Mapを使用したときに現れます。Mip Mapsを使用しない場合はBilinearを使いましょう。
Show Platform Settings For
【2022.5.17時点】Unity2020.3およびUnity2021の公式マニュアルに記載がないため、未検証です。分かり次第追記します。
各プラットフォームの圧縮テクスチャ設定
適宜圧縮テクスチャを設定してください。
![【Unity】SpriteをパックするSpriteAtlasの使い方_27](https://i.gyazo.com/6681f7a1652061efcb4fb7180a0b97ea.png#750__238)
スマホ向け開発であればiOS、AndroidともにASTCを選んでおけば間違いありません。
SpriteAtlasの設定まとめ
よく使うSpriteAtlas設定を表にまとめました。困った時の参考にしてみてください。
項目 | 設定内容 |
---|---|
Type | Master |
Include Build | ON |
Allow Rotation | ON(UIではOFF) |
Tight Packing | ON(UIではOFF) |
Padding | 4 |
Read/Write Enabled | OFF |
Generate Mip Maps | OFF |
sRGB | ON |
Filter Mode | Bilinear |
SpriteAtlasの3つの注意点
ここからはSpriteAtlasの使用上の注意点を紹介します。
①元画像をResourcesフォルダに入れてはダメ
②いつの間にかSpriteAtlasの枚数の増加に注意
③UIにTight Packing、Allow Rotationは禁止
注意点①元画像をResourcesフォルダに入れてはダメ
元画像をResourcesフォルダに入れてはいけません。なぜなら本来SpriteAtlasでまとめられた1枚の画像だけがゲームに格納されるはずです。しかしResourcesフォルダに元画像を格納するとSpriteAtlasと元画像どちらもゲームに格納されてしまうのです。
![【Unity】SpriteをパックするSpriteAtlasの使い方_28](https://i.gyazo.com/868aa33a18c6a99af681e9c87a2fef8e.png#640__216)
このようにビルドした時のファイルサイズが増えてしまいます。Resourcesフォルダに元画像は入れないようにしましょう。
注意点②いつの間にかSpriteAtlasの枚数の増加に注意
SpriteAtlasに画像を追加していると、あるときSpriteAtlasの枚数が増えてしまいます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_29](https://i.gyazo.com/822760d9f105df96ca992b5d626ba67d.gif)
SpriteAtlasのInspectorウィンドウのPreview画面のプルダウンメニューで今の使用枚数をチェックできます。
![【Unity】SpriteをパックするSpriteAtlasの使い方_30](https://i.gyazo.com/c018909a43a45453a9aa687b73e4a319.png#750__200)
「Max Texture Size」を超えた場合はSpriteAtlasが増えていく仕様なので、気をつけながら画像を追加していってください。とくに警告やエラーで教えてくれません。
注意点③UIにTight Packing、Allow Rotationは禁止
![【Unity】SpriteをパックするSpriteAtlasの使い方_31](https://i.gyazo.com/f7ac35c2eb19375ba2efae03386361f4.jpg#750__420)
前述の「Allow Rotation / Tight Packing」で解説しましたが、UIで使うSpriteAtlasに「Tight Packing」と「Allow Rotation」は使用禁止です。SpriteRendererでは正常に動作しますが、UIでは動作しません。
SpriteAtlasのまとめ
この記事ではSpriteAtlasについて解説しました。簡単に内容をまとめます。
①SpriteAtlasとは複数の画像を1枚にまとめたアセット
②SpriteAtlasを使うことで描画パフォーマンスアップ
③UIやSpriteRendererで使用される
④TightPackingはUIでは使用不可
こんな感じです。
スプライトはUIや2Dゲームを作るときに必ず登場します。SpriteAtlasを使うことで描画コストを下げ、パフォーマンスをアップします。設定も紹介したとおり簡単ですので、ぜひSpriteAtlasを使ってみてください。
次の記事ではSpriteを使ってUIを作る方法を解説しています。UnityでUIを作ってみたい方はぜひ読んでみてください。
この記事があなたのゲーム開発に少しでもお役に立てたら嬉しいです。
![](https://i.gyazo.com/50584e4a795b322151da725f2229285c.jpg#1920.0__1280.0)
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!
最後まで読んでいただきありがとうございました!
すばらしいSpriteAtlasライフをお過ごしください。
- Unity2020.3.31f1