渋谷ほととぎす通信

新しいこと、枯れたこと問わずサムザップ大庭が興味を持ったものを調査、生活の効率を求める完全趣味の技術ブログ。基礎を大事にしています。※あくまで個人ブログであり所属組織とは関係ありません

TexturePackerで画像を追加する際のちょっとした効率化Tips


Unityでゲーム開発中アトラスを作成する際によくTexturePackerを使用します。 アトラスとは複数の画像を一枚の画像と座標情報をセットにして書き出したもので、CPU負荷削減のために使用されます。

f:id:esakun:20200222231238p:plain:w500

本記事ではTexturePackerで画像追加時の効率化アップTipsを1つ紹介します。


TexturePacker公式サイト

非効率な画像追加の方法

以下のようにtpsファイル(TexturePackerファイル)、1~4の画像を例にします。

f:id:esakun:20200222223012p:plain:w300 これらの画像をTexturePackerでアトラス化するとこうなります。


f:id:esakun:20200222223522p:plain:w500 書き出す前のTexturePackerの状態です。


この状態から5枚目の画像を追加してみます。

f:id:esakun:20200222224318p:plain:w500 追加したい画像を図のようにSpritesエリアにドラッグアンドドロップします。


f:id:esakun:20200222224451p:plain:w500 するとこのように画像が追加されます。


追加はできますが、毎度毎度画像が追加されるたびにドラッグアンドドロップするのは手間です。

またこの例では5種類しか存在しないので良いですが、大量の画像を扱った際に何を追加したいのかが分からなくなる可能性もあります。


以下の方法を使うと多少効率が上がります。

ルート階層をフォルダにする

画像を個別にTexturePackerにドラッグアンドドロップするのではなく、ルート階層にフォルダを追加してそのフォルダに画像を追加するようにします。

f:id:esakun:20200222225825p:plain:w500 TexturePackerにフォルダをドラッグアンドドロップします。今回はSpritesという名前にしました。


f:id:esakun:20200222230042p:plain:w250 Finder上から画像をSpritesフォルダに追加しました。


f:id:esakun:20200222230340p:plain:w500 するとこのように自動でTexturePacker側が更新されます。


いちいち画像をドラッグアンドドロップする必要がなく、あくまでフォルダの中身を更新するだけで良いのと、フォルダの中身は必ず追加されるため、追加の抜け漏れがなくなります。

まとめ

TexturePackerはフォルダをルート階層にすると以下のメリットがあります。

  1. 追加画像をドラッグアンドドロップする作業がなくなり、オペレーション工数が下がる
  2. 画像追加の抜け漏れがなくなり管理コストが下がる

もしルート階層をフォルダにしていない場合は一度試してみると良いかもしれません。


以上