【Unity】TexturePacker でパッキングしたテクスチャを SpriteRenderer や uGUI の Image で使用する

はじめに

TexturePacker でパッキングしたテクスチャは
SpriteRenderer や uGUI の Image で使用することができます

検証環境

• Unity 2018.3.7f1
• TexturePacker 4.12.1

準備

上記サイトから TexturePacker をインストールします

　
また、 「TexturePacker Importer」を
Asset Store から Unity プロジェクトにインポートしておきます

使い方

Texture Packer を起動して「Sprites」の領域に
パッキングしたいテクスチャをドラッグします

そして「Settings」の領域で下記の項目を設定します

項目	内容
Framework	Unity - Texture2D sprite sheet
Data file	パッキングしたテクスチャの出力先 （Unity プロジェクトの「Assets」フォルダ内を推奨）
Algorithm	Max Rects
Trim mode	None

設定が完了したら「Publish sprite sheet」を選択します

すると、パッキングしたテクスチャが指定したフォルダに出力されます
Unity プロジェクトの「Assets」フォルダ内に出力すると、
1つのテクスチャの中に複数のスプライトが分割して格納されていることもわかります

パッキングしたテクスチャ内のスプライトを
SpriteRenderer や Image にドラッグして設定することで

パッキングしたテクスチャ内のスプライトを描画できます

Frame Debugger を見てみると描画回数が1回だけになっている
（最適化されている）ことも確認できます

ポリゴンメッシュの最適化

Texture Packer で「Algorithm」を「Polygon」にして出力すると
透明な部分は描画されないようにポリゴンメッシュが最適化されます

例えばこのような画像を SpriteRenderer で描画する場合、

ワイヤーフレームを見てみると透明部分は描画されないように
ポリゴンメッシュが作成されていることがわかります

Overdraw を見てみると、透明部分が描画されなくなっていることがわかります

uGUI の Image の場合は「Use Sprite Mesh」をオンにすることで
最適化されたポリゴンメッシュを使用することができます

TexturePacker で「Advanced settings」を選択して

「Tracer Tolerance」を調整することで、
ポリゴンメッシュを作成する時の頂点数を変更できます

描画時に不要な線が描画されてしまう場合

TexturePacker で「Advanced settings」を選択して

「Shape Padding」を増やすと、不要な線が描画されてしまう現象を改善できます