メニュー

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

eyecatch_unity

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ピクセルのベースに8x8ピクセルの四角形をのせた画像を4枚用意

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

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

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

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

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

[/tl]
[/timeline]

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

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

  • スプライトパッカー

  • スプライトアトラス

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

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

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

32x32の画像に収まる

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

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

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

全記事一覧

  • URLをコピーしました!

Unityに関する参考記事・ツール・書籍のまとめ

Unityの参考書籍

著:北村 愛実
¥2,970 (2023/01/14 00:41時点 | Amazon調べ)
著:吉谷幹人, 著:布留川英一, 著:一條貴彰, 著:西森丈俊, 著:藤岡裕吾, 著:室星亮太, 著:車谷勇人, 著:湊新平, 著:土屋つかさ, 著:黒河優介, 著:中村優一, 著:牙竜, 著:コポコポ, 著:かせ, 著:hataken, 著:monmoko
¥4,400 (2023/01/14 00:41時点 | Amazon調べ)
著:森哲哉, 著:布留川英一, 著:西森丈俊, 著:車谷勇人, 著:一條貴彰, 著:打田恭平, 著:轟昂, 著:室星亮太, 著:井本大登, 著:細田翔, 著:西岡陽, 著:平井佑樹, 著:コポコポ, 著:すいみん, 著:Maruton, 著:karukaru, 著:ハダシA, 著:notargs, 著:EIKI`, 著:おれんじりりぃ, 著:黒河優介, 著:中村優一, 著:藤岡裕吾
¥8,151 (2023/01/14 00:41時点 | Amazon調べ)
ボーンデジタル
¥5,060 (2023/01/14 00:41時点 | Amazon調べ)
技術評論社
¥4,620 (2023/01/14 20:57時点 | Amazon調べ)

Unityの人気アセット

目次