Free Texture Packer の使い方 【UE5】

__Unreal Engine 5__ での [__Free Texture Packer__](http://free-tex-packer.com/) の使い方を残したいと思います。（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 での活用方法を載せておこうと思います。


# テクスチャパッキングとは
![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/f2c9e1d4-23a4-85bd-8a4d-956fa9557c22.jpeg)
UIのパーツ（ボタン、アイコンなど）や、2Dゲームのキャラクター画像を配列する工程。



# 使い方
[__ウェブブラウザー版__](https://free-tex-packer.com/app/)と、[__インストール版__](http://free-tex-packer.com/download/)があり、設定、作業データの保存ができる以外の機能的な違いは特に無いようです。
![002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/4d520c8f-bdfa-9852-f44c-5aff8042190b.jpeg)

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

[__≫インストール版ダウンロードリンク__](http://free-tex-packer.com/download/)

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

__【テクスチャを並べる】__
並べたいテクスチャを、左側のリスト欄に __「ドラッグ＆ドロップ」__
中央にテクスチャパーツが並びます。
いろいろいじって好みの配列にすればよいのですが、確実に確認すべき点を上げると、
![003_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/08a4b91b-4564-41f5-6dec-ec26f49a4c6f.jpeg)



Unreal Engine で使う場合に気を付ける点として __<font color="orange">（オレンジ線）</font>__
- __<font color="orange">Format:</font>__ を __UnrealEngine__ に。
- __<font color="orange">Power of two:</font>__ に __チェック__ 。（2の乗数指定）
- __<font color="orange">Padding:</font>__ は __1__ 以上に。（テクスチャ同士を1px以上離した方が良い。）

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

エクスポート前に確認すべき点として __<font color="#00aaaa">（水色枠）</font>__
- __<font color="#00aaaa">Texture name:</font>__ を任意の名前に。（T_UI_Button など）
- __<font color="#00aaaa">Save path</font>__ 保存、管理したいフォルダを指定。
- __<font color="#00aaaa">Width: Height:</font>__ 自動でいい感じの縦横比にならない場合は、直接打った方が良いです。理想は、正方形。

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

__【エクスポート】__
右側の __Export__ ボタンを押すと、以下の二種類のデータが書き出されます。
![004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/1da7e32e-ca41-5b60-93d3-03a7a41ae573.jpeg)

- __.paper2dsprites__ （切り分けの指示か書かれた、Json形式）
- __.png__

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

__【Unreal Engine 5】__
__.paper2dsprites__ を読み込むだけで、テクスチャと分割されたスプライトが生成されます。
![005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/37d2ae2f-26d7-ab31-509e-854c5c0c89d4.jpeg)

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

__Frames__ の中にあるスプライトを、UMGや、2Dゲームに活用することになります。
![bandicam 2022-11-26 13-50-34-477.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/d93f0010-baf9-4f12-98b7-99e7b4a39406.jpeg)



# 老舗のTexturePacker
今回説明したツールとは別に、
[__Unreal Engine の公式ドキュメントで紹介__](https://docs.unrealengine.com/5.1/ja/import-sprites-in-unreal-engine/)されている、有料の [__TexturePacker__](https://www.codeandweb.com/texturepacker) では、スプライトのピボットポイントを簡単に調整ができる点が、とても便利です。
![bandicam 2022-11-26 14-15-13-503.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/e4541cd1-4155-0a9a-55fa-1768cb128771.jpeg)

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

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

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

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

Unreal Engine は、使用されているテクスチャを、自動でパッキング（的なメモリ管理）をする為、
![bandicam 2022-11-26 13-41-58-744.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/f7ccc657-4d8e-7f42-0c4a-a83ae6a4c438.jpeg)
あまり、ユーザー側がやっきになってパッキング作業をする必要はないようですが、
[参考：alwei先生 paing.net](https://peing.net/ja/q/8c3dfb71-35b7-4446-9f0e-740f4e41d0e3)

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

https://twitter.com/O_Y_G/status/1598488406337753089