メニュー

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

eyecatch_unity

Unity2017をインストールしたので、Sprite Atlasを試してみました。

感想としては、すごく簡単でわかりやすいです!

目次

スプライトアトラス(Sprite Atlas)の使い方

  • パッキングするので、再生時、描画回数(Batchse)が減る(SetPass calls)
  • Resourcesでも使用できる(以前のSpritePackerはResources内では使えず)

※SpriteAtlasだけResources入れること(重複防止)


STEP.1
設定

Edit>Project Settings>Editorを開き、**Always Enabled**(パックを常に有効)に


STEP.2
Sprite Atlasを選択

Projectウインドウで右クリック>Create>Sprite Atlasを選択


STEP.3
生成されたSprite Atlasを選択

・Texture>Filetr ModeをPointに
・下側にあるのObject for Packingの+ボタンをクリック
・パッキングしたいフォルダを選択


STEP.3
Pack Previewボタンを選択して、パッキング


Qiita
Sprite Atlasの作り方 - Qiita
Sprite Atlasの作り方 - Qiita はじめに この記事を執筆するに当たっての作業環境は以下の通りです。 Unity (version 2017.1.0b9[最新のβ版]) Visual Studio Code (Version 1.13.0) また、参考資....
(:3[kanのメモ帳]
Spriteをパックする新しい仕組み、SpriteAtlasを使ってみた【Unity】【SpriteAtlas】 - (:3[kanのメモ帳]
Spriteをパックする新しい仕組み、SpriteAtlasを使ってみた【Unity】【SpriteAtlas】 - (:3[kanのメモ帳]この記事でのバージョン Unity 2017.1.0f3 はじめに Unity 2017から新たにSpriteAtlasなるものが追加されました。 今までもSpriteをパックする(一つの画像にする)機能とし...
テラシュールブログ
【Unity】Unity 2017の新しいスプライトをパッキングする仕組み、”SpriteAtlas”について - テラシュールブ...
【Unity】Unity 2017の新しいスプライトをパッキングする仕組み、”SpriteAtlas”について - テラシュールブ...Unity 2017でSpritepackerの仕組みが新しくなったみたいです。 新しいパッキングの仕組み、SpriteAtlas パッキングの単位はフォルダ・テクスチャ・スプライト 圧縮フォーマ...

スプライトパッカー(SpritePacker)の使い方

前項目ではUnity2017から新機能のSprite Atlasのやり方を書きましたがUnity 5系のスプライトパッカーの作成方法も調べてみました。


STEP.1
SpritePackerの有効

Edi>Project Settings>EditorでEnabled for BuildsまたはAlways Enabled(推奨)にします。


STEP.2
Packing Tagを入れる

パッキングしたいスプライトを選択して、 Packing Tagに名前を入れます


STEP.2
パックする

Window>Sprite Packerを起動

Enabled for Buildsの場合はここで左上のPackボタンを押すとパッキングされます。

逆に、Always Enabledした場合はPackボタンを押さなくてもパッキングされます


STEP.3
再生してBatchesに比較

画像を並べて、再生します。

パッキングしない場合 Batchesは7

パッキングした場合 Batchesは2


パッキングでまとめた画像の場所

Library>AtlasCacheの中に生成されます。

注意点

パッキングする画像はResourcesに入れないこと!

テラシュールブログ
【Unity】SpritePackerとResourcesについて - テラシュールブログ
【Unity】SpritePackerとResourcesについて - テラシュールブログ昨日はSpritepackerとAssetBundleについて書きましたが、今日はSpritePackerとResourcesについて書こうと思います。 tsubakit1.hateblo.jp SpritePackerとResourcesについ...

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

下記のURLで紹介されているスクリプトを使用すると、自動でタグ付け&パッキングされるようになります。

  • Editorフォルダを作成して、SpritePostprocessor.csを入れる
  • Spriteフォルダを作成して、画像を入れる。→設定したスプライトの設定に
  • ヒエラルキーに画像をいれると自動で自動でタグ付け&パッキング下状態に
(:3[kanのメモ帳]
Sprite Packerの設定を自動で行う【Unity】【エディタ拡張】 - (:3[kanのメモ帳]
Sprite Packerの設定を自動で行う【Unity】【エディタ拡張】 - (:3[kanのメモ帳]エディタ拡張とは この記事でのバージョン Unity 5.3.4f1 Personal はじめに Unityには複数のスプライトをまとめて使えるSprite Packerという機能があります。 これを使う...
あわせて読みたい
【Unity】SpritePackerで自動パッキング | 未知の路

パッキングで透明部分がどのくらい削除されるかの検証

パッキングで、不要な透明部分が削除されるのはわかってたのですが、ちゃんと検証したことがなかったので、テスト。

透明部分がどのくらい削除されるか検証


STEP.1
検証用画像

64×64ピクセルのベースに8x8ピクセルの四角形をのせた画像を4枚用意


STEP.2
スプライトアトラスでパッキング


STEP.2
スプライトパッカーでパッキング

仮に透明部分が一切削られない場合、128x128になるところ

削られて32x32の画像に8x8の画像が4枚収まりました。

ということで、ある程度は余計な透明部分は削ってくれます。


不要な透明部分が一切ない状態でパッキング

ちなみに不要な透明部分が一切ない状態でパッキングすると

  • スプライトパッカー

  • スプライトアトラス

両方、32x32の画像になりました。

画像の数を倍の8枚にして、パッキング

画像の数を倍の8枚にして、パッキング(単純に画像を倍に複製)

32x32の画像に収まる

不要な透明部分がある画像8枚でのパッキング

ちなみに不要な透明部分がある画像8枚でのパッキングは64x32になってしまいました。

まとめです。不要な透明部分は削除したほうが、よりコンパクトに収まる確率が高いです。

この記事も読まれてます

目次
閉じる