16
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Free Texture Packer の使い方 【UE5】

Last updated at Posted at 2022-12-01

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 での活用方法を載せておこうと思います。

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

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

使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Frames の中にあるスプライトを、UMGや、2Dゲームに活用することになります。
bandicam 2022-11-26 13-50-34-477.jpg

老舗のTexturePacker

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

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

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

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

さいごに

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

Unreal Engine は、使用されているテクスチャを、自動でパッキング(的なメモリ管理)をする為、
bandicam 2022-11-26 13-41-58-744.jpg
あまり、ユーザー側がやっきになってパッキング作業をする必要はないようですが、
参考:alwei先生 paing.net

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

16
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?