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

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

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

すいみん

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

スプライトアトラス（Sprite Atlas）の使い方

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

※SpriteAtlasだけResources入れること（重複防止）

[timeline]
[tl label=’STEP.1′ title=’設定’]
Edit＞Project Settings＞Editorを開き、**Always Enabled**(パックを常に有効)に

[/tl]
[tl label=’STEP.2′ title=’Sprite Atlasを選択’]
Projectウインドウで右クリック＞Create>Sprite Atlasを選択

[/tl]
[tl label=’STEP.3′ title=’生成されたSprite Atlasを選択’]

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

[/tl]
[tl label=’STEP.3′ title=’Pack Previewボタンを選択して、パッキング’]

[/tl]
[/timeline]

Qiita

Sprite Atlasの作り方 - Qiita はじめに この記事を執筆するに当たっての作業環境は以下の通りです。 Unity (version 2017.1.0b9[最新のβ版]) Visual Studio Code (Version 1.13.0) また、参考資....

(:3[kanのメモ帳]

Spriteをパックする新しい仕組み、SpriteAtlasを使ってみた【Unity】【SpriteAtlas】 - (:3[kanのメモ帳] この記事でのバージョン Unity 2017.1.0f3 はじめに Unity 2017から新たにSpriteAtlasなるものが追加されました。 今までもSpriteをパックする(一つの画像にする)機能とし...

テラシュールブログ

【Unity】Unity 2017の新しいスプライトをパッキングする仕組み、”SpriteAtlas”について - テラシュールブ... Unity 2017でSpritepackerの仕組みが新しくなったみたいです。 新しいパッキングの仕組み、SpriteAtlas パッキングの単位はフォルダ・テクスチャ・スプライト 圧縮フォーマ...

スプライトパッカー（SpritePacker）の使い方

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

[timeline]
[tl label=’STEP.1′ title=’SpritePackerの有効’]

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

[/tl]
[tl label=’STEP.2′ title=’Packing Tagを入れる’]

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

[/tl]
[tl label=’STEP.2′ title=’パックする’]

Window＞Sprite Packerを起動

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

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

[/tl]
[tl label=’STEP.3′ title=’再生してBatchesに比較’]

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

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

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

[/tl]
[/timeline]

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

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

注意点

パッキングする画像は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のメモ帳] エディタ拡張とは この記事でのバージョン Unity 5.3.4f1 Personal はじめに Unityには複数のスプライトをまとめて使えるSprite Packerという機能があります。 これを使う...

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

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

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

[timeline]
[tl label=’STEP.1′ title=’検証用画像’]

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

[/tl]
[tl label=’STEP.2′ title=’スプライトアトラスでパッキング’]

[/tl]
[tl label=’STEP.2′ title=’スプライトパッカーでパッキング’]

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

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

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

[/tl]
[/timeline]

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

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

• スプライトパッカー

• スプライトアトラス

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

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

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

32ｘ32の画像に収まる

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

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

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