Unity│スプライトアトラス(Sprite Atlas)の作成方法

複数のスプライト画像を1枚にまとめる「スプライトアトラス」を使うと、描画回数(Batches)を減らしてパフォーマンスを向上できます。

Unity 2017から追加されたSprite Atlasと、従来のSprite Packerの両方の使い方を解説します。

目次

Sprite Atlasとは

複数のスプライトを1枚のテクスチャにパッキングする機能です。

特徴説明
描画回数削減パッキングによりBatchesとSetPass callsが減少
Resourcesで使用可能従来のSprite PackerはResources内で使えなかった

Resourcesフォルダを使う場合は、SpriteAtlasだけをResourcesに入れ、元画像は入れないようにします(重複防止)。

Sprite Atlasの使い方(Unity 2017以降)

手順

  1. Edit → Project Settings → Editorを開く
  2. Sprite Packer ModeをAlways Enabled(常に有効)に設定
  3. Projectウィンドウで右クリック → Create → Sprite Atlas
  4. 生成されたSprite Atlasを選択
  5. 必要に応じてTexture → Filter ModeをPointに変更
  6. Objects for Packingの「+」ボタンをクリック
  7. パッキングしたいフォルダまたはスプライトを選択
  8. Pack Previewボタンでパッキング結果を確認

Sprite Packerの使い方(Unity 5系)

Unity 5系を使用している場合や、従来の方法を使いたい場合はこちらです。

手順

  1. Edit → Project Settings → Editorを開く
  2. Sprite Packer ModeをAlways EnabledまたはEnabled for Buildsに設定
  3. パッキングしたいスプライトを選択
  4. InspectorのPacking Tagに名前を入力(同じ名前のものがまとめられる)
  5. Window → Sprite Packerを起動
  6. 左上のPackボタンをクリック(Always Enabledなら自動でパッキング)

パッキング結果の確認

パッキングされた画像はLibrary/AtlasCacheフォルダ内に生成されます。

注意点

Sprite Packerを使う場合、パッキングする画像はResourcesフォルダに入れないでください。

パッキングの効果検証

画像を6枚並べて再生した場合の比較です。

状態Batches
パッキングなし7
パッキングあり2

透明部分の削除検証

パッキング時に不要な透明部分がどの程度削除されるか検証しました。

検証条件

64×64pxのベースに8×8pxの四角形を配置した画像を4枚用意。

結果

条件パッキング後のサイズ
透明部分あり(4枚)32×32px
透明部分なし(4枚)32×32px
透明部分なし(8枚)32×32px
透明部分あり(8枚)64×32px

透明部分がある画像8枚では64×32pxになり、透明部分がない画像8枚の32×32pxより大きくなりました。

結論:不要な透明部分を削除してからパッキングすると、よりコンパクトに収まります。

便利なエディタースクリプト

自動でタグ付けとパッキングを行うスクリプトがあります。

使い方

  1. Editorフォルダを作成してSpritePostprocessor.csを配置
  2. Spriteフォルダを作成して画像を入れる
  3. Hierarchyに画像を入れると自動でタグ付けとパッキングが実行される

参考:https://kan-kikuchi.hatenablog.com/entry/SpritePostprocessor

Sprite AtlasとSprite Packerの比較

項目Sprite AtlasSprite Packer
対応バージョンUnity 2017以降Unity 5系
Resources対応×
設定方法アセットとして管理Packing Tagで指定
使いやすさシンプルやや手間

まとめ

  • Sprite Atlasを使うと描画回数を大幅に削減できる
  • Unity 2017以降はSprite Atlasを推奨
  • Resourcesフォルダを使う場合はSprite Atlasだけを入れる
  • 不要な透明部分は事前に削除するとパッキング効率が上がる
  • 自動タグ付けスクリプトを使うと作業効率が向上する
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次