Free Texture Packer の使い方 【UE5】

Unreal Engine 5 での Free Texture Packer の使い方を残したいと思います。（UE4でも同じです。）
確認環境: Windows 10 + Unreal Engine 5.1.0

Free Texture Packer とは

http://free-tex-packer.com/
無料でオープンソースの、テクスチャパッキングツールです。
Windows, Linux, MaxOS, Web対応。
cocos2d Godot Unity Spine UnrealEngine などへの出力フォーマットが備わっています。
通常使用では十分以上の機能がある為、Unreal Engine 5 での活用方法を載せておこうと思います。

テクスチャパッキングとは

UIのパーツ（ボタン、アイコンなど）や、2Dゲームのキャラクター画像を配列する工程。

使い方

ウェブブラウザー版と、インストール版があり、設定、作業データの保存ができる以外の機能的な違いは特に無いようです。

軽く使うだけか、機能を試すだけなら、ウェブ版。
長期的に使う場合は、作業データは残った方が良いので、インストール版になると思います。

≫インストール版ダウンロードリンク

【インストール】
ダウンロードデータをダブルクリック。（Windows 11 で動くかは未確認）
インストール場所は、任意の場所で良いです。
アンインストールは、フォルダ内の　Uninstall Free texture packer.exe　をダブルクリックで全て消えます。

【テクスチャを並べる】
並べたいテクスチャを、左側のリスト欄に 「ドラッグ＆ドロップ」
中央にテクスチャパーツが並びます。
いろいろいじって好みの配列にすればよいのですが、確実に確認すべき点を上げると、

Unreal Engine で使う場合に気を付ける点として （オレンジ線）

• Format: を UnrealEngine に。
• Power of two: に チェック 。（2の乗数指定）
• Padding: は 1 以上に。（テクスチャ同士を1px以上離した方が良い。）

この3点は確認した方が良いと思います。

エクスポート前に確認すべき点として （水色枠）

• Texture name: を任意の名前に。（T_UI_Button など）
• Save path 保存、管理したいフォルダを指定。
• Width: Height: 自動でいい感じの縦横比にならない場合は、直接打った方が良いです。理想は、正方形。

その他、並び順パターンの種類などいろいろな機能があるので、試しにいろいろ触ってみてください。

【エクスポート】
右側の Export ボタンを押すと、以下の二種類のデータが書き出されます。

• .paper2dsprites （切り分けの指示か書かれた、Json形式）
• .png

二つのデータのうち、 .paper2dsprites の方を、Unreal Engine 5 のコンテンツブラウザに 「ドラッグ＆ドロップ」 します。

【Unreal Engine 5】
.paper2dsprites を読み込むだけで、テクスチャと分割されたスプライトが生成されます。

• Frames フォルダ に分割されたスプライトが格納されています。
• Textures フォルダ にPNGデータが読み込まれている状態になります。
• Sprite Sheet 水色の帯のデータ。 このデータが読み込みデータなので、データの差し替えなどは、このデータを再読み込みすることで、更新されます。再読み込みなどしない場合は、削除して構いません。

Frames の中にあるスプライトを、UMGや、2Dゲームに活用することになります。

老舗のTexturePacker

今回説明したツールとは別に、
Unreal Engine の公式ドキュメントで紹介されている、有料の TexturePacker では、スプライトのピボットポイントを簡単に調整ができる点が、とても便利です。

基点の調整を気軽にしたい場合は、有料のツールを活用した方が幸せかもしれません。
https://www.codeandweb.com/texturepacker
購入プランが複数あり、どれがいいと安易に言いにくいのと、毎回割引のカウントダウンが始まるのが、怪しさを醸し出していて、他人に勧めていいのか躊躇します・・・。

Free Texture Packer でも、素材作成時に基点にしたい点が中心になるよう、余白を作る事で、基点の位置が指定できます。（余白は自動でトリムされます。）

UMGのボタンやアイコンなど、基点の調整が頻繁に必要ない場合は、Free Texture Packer で十分だと思います。

さいごに

昔、検索で見た時は、使い方わからなかったので、スルーしてましたが、
最近、海行プログラムさんが話題に上げていたのを見て、改めて触ってみたところ、有料のツールと使い方がだいたい一緒だったので、誰かの参考になるかもなと、今回の記事を書いてみました。

Unreal Engine は、使用されているテクスチャを、自動でパッキング（的なメモリ管理）をする為、

あまり、ユーザー側がやっきになってパッキング作業をする必要はないようですが、
参考：alwei先生 paing.net

データ管理上の都合や、2Dキャラクターアニメーションなど、バラで読むと整理が面倒なものなどは、パッキングツールを使いたくなる場合があると思います。
特に、余白が大きい素材を大量に読み込みたい時に、大きな力を発揮するツールだと思います。
そんな場合に活用してみてください。