はじめに
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」を増やすと、不要な線が描画されてしまう現象を改善できます