コガネブログ

平日更新を目標に Unity や C#、Visual Studio などのゲーム開発アレコレを書いていきます

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

はじめに

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

検証環境

  • Unity 2018.3.7f1
  • TexturePacker 4.12.1

準備

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

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

使い方

f:id:baba_s:20190323114244p:plain

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

f:id:baba_s:20190323114251p:plain

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

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

f:id:baba_s:20190323115419p:plain

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

f:id:baba_s:20190323114430p:plain

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

f:id:baba_s:20190323114914p:plain

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

f:id:baba_s:20190323114917p:plain

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

f:id:baba_s:20190323114921p:plain

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

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

f:id:baba_s:20190323120308p:plain

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

f:id:baba_s:20190323120604p:plain

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

f:id:baba_s:20190323120608p:plain

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

f:id:baba_s:20190323120613p:plain

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

f:id:baba_s:20190323120836p:plain

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

f:id:baba_s:20190323120959p:plain

TexturePacker で「Advanced settings」を選択して

f:id:baba_s:20190323121003p:plain

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

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

f:id:baba_s:20190323120959p:plain

TexturePacker で「Advanced settings」を選択して

f:id:baba_s:20190323121319p:plain

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