UEにおけるUIのテクスチャ設定周りについてのメモになります。 
意外にどこの現場に行ってもこの辺りの情報がなかったりすることが多かったのでまとめてメモしておこうかなと思った次第です。 
ここで記載している内容は以下になります。
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">UE用テクスチャの作成周り</li>
<li data-line="4" class="code-line">UE側のインポート設定</li>
</ul>
<aside class="msg message">!<div class="msg-content">
自分なりに解釈しているので間違っているところがあればぜひコメント等でお教えください！
</div></aside>
<h2 id="ue%E7%94%A8%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%81%AE%E4%BD%9C%E6%88%90%E5%91%A8%E3%82%8A" data-line="9" class="code-line">
<a class="header-anchor-link" href="#ue%E7%94%A8%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%81%AE%E4%BD%9C%E6%88%90%E5%91%A8%E3%82%8A" aria-hidden="true"></a> UE用テクスチャの作成周り</h2>
テクスチャ作成周りでは以下に関して書いていきます。
<ul data-line="11" class="code-line">
<li data-line="11" class="code-line">書き出し形式</li>
<li data-line="12" class="code-line">画像サイズ</li>
<li data-line="13" class="code-line">解像度</li>
</ul>
<h3 id="%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E5%BD%A2%E5%BC%8F" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E5%BD%A2%E5%BC%8F" aria-hidden="true"></a> 書き出し形式</h3>
自分が今までに現場で使用してきた形式はpng、tgaの2種類になります。 
どちらを使うかはデザイナーで決められたりプログラマさんに指定されたりするので 
プロジェクトによって変わります。 
一応、今までに使用した所感を記載します。
<ul data-line="19" class="code-line">
<li data-line="19" class="code-line">png 
今は大体の現場でこちらの形式を使用していることが多いような気がします。 
UE4のバージョンによっては、 
テクスチャの端に白いゴミが出てしまっていたのでtgaの方が安全だなーというイメージでした。 
アルファの指定が出来ないので、ゴミを取ることも出来なかったので…。 
UE4の最後のバージョン辺りからはその問題があまり起こらなくなったので 
その辺りから大体のプロジェクトで書き出しが楽なのもあってpngを使用してる印象があります。</li>
<li data-line="26" class="code-line">tga 
以前はこちらメインで使ってました。 
書き出す際は32bitで保存します。アルファなしの場合は24bit。 
今はpngを使うことが多いですが、 
UEでカラーではなくマスクとして使用させるための白黒テクスチャは 
たまにpngだと上手くいかなかったりするので 
そういうときは今でもそのテクスチャだけtgaにしてます。</li>
</ul>
今はpngを使ってる現場が多い印象ですが、 
個人的にはアルファが制御できるtgaの方が安心だったりします。
<h3 id="%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA" aria-hidden="true"></a> 画像サイズ</h3>
画像サイズは縦横それぞれ4の倍数にしています。 
4の倍数にしないとUEに取り込んだ際に圧縮されず、容量が大きくなってしまう為です。
<h3 id="%E8%A7%A3%E5%83%8F%E5%BA%A6" data-line="40" class="code-line">
<a class="header-anchor-link" href="#%E8%A7%A3%E5%83%8F%E5%BA%A6" aria-hidden="true"></a> 解像度</h3>
画面デザインのデータは96dpiで作成しています。 
72dpiだとUE内とフォントのサイズが異なってしまう為です。 
→ただし、5.3から72dpiでも大丈夫なようです！ 
<iframe id="zenn-embedded__76bd29e49646f" src="https://embed.zenn.studio/card#zenn-embedded__76bd29e49646f" data-content="https%3A%2F%2Fdev.epicgames.com%2Fdocumentation%2Fja-jp%2Funreal-engine%2Ffont-dpi-scaling-in-unreal-engine" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://dev.epicgames.com/documentation/ja-jp/unreal-engine/font-dpi-scaling-in-unreal-engine" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dev.epicgames.com/documentation/ja-jp/unreal-engine/font-dpi-scaling-in-unreal-engine</a>
テクスチャの作成周りに関してはこんな感じです。 
他にも必要なことがあれば追記するかもしれません。
<h2 id="ue%E5%81%B4%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E8%A8%AD%E5%AE%9A" data-line="50" class="code-line">
<a class="header-anchor-link" href="#ue%E5%81%B4%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> UE側のインポート設定</h2>
自分がいつも設定を触っている箇所を記載していきます。 
UI用は大体この辺りを設定していれば大丈夫だと思います。
UE5のテクスチャのインポート設定のDetailパネルのスクショを貼って説明します。
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line">青枠…固定の設定にする箇所</li>
<li data-line="56" class="code-line">黄枠…用途によって設定を変更する箇所 
<img src="https://storage.googleapis.com/zenn-user-upload/37100fb06f44-20250305.png" loading="lazy" class="md-img"> 
では各項目について説明していきます。</li>
</ul>
<h3 id="%E5%9B%BA%E5%AE%9A%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AE%E7%AE%87%E6%89%80" data-line="59" class="code-line">
<a class="header-anchor-link" href="#%E5%9B%BA%E5%AE%9A%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AE%E7%AE%87%E6%89%80" aria-hidden="true"></a> 固定の設定の箇所</h3>
まず青枠の箇所
<ul data-line="61" class="code-line">
<li data-line="61" class="code-line">
Mip Gen Setting 
　MipMap用の設定です。 
【設定内容】 
・NoMipMap 
UIは特に対応しないのでここはNoMipMapにしておきます。 
設定しないとテクスチャがぼやける場合があります。 
一応↓で説明しているTextureGroupをUIにして、 
MipGenSettingをFromTextureGroupにすることでも 
自動でNoMipMapの適用がされるようです！</li>
<li data-line="70" class="code-line">
Texture Group 
テクスチャのグループ設定です。 
【設定内容】 
・UI 
読み込みの処理とかに関係あるみたいです。 
プロジェクトにもよりますが基本的にはUIだと思います。</li>
<li data-line="76" class="code-line">
Never Stream 
テクスチャのストリーミング設定です。 
【設定内容】 
・チェックを入れる 
UIはストリーミングさせないのでチェックを入れます。</li>
</ul>
<h3 id="%E7%94%A8%E9%80%94%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E7%AE%87%E6%89%80" data-line="81" class="code-line">
<a class="header-anchor-link" href="#%E7%94%A8%E9%80%94%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E7%AE%87%E6%89%80" aria-hidden="true"></a> 用途によって設定を変更する箇所</h3>
次は黄枠の箇所
<ul data-line="83" class="code-line">
<li data-line="83" class="code-line">
Compression Setting 
圧縮方式の設定です。 
【設定内容】 
カラーテクスチャに使うもの 
・Default 
・BC7…大体はこれを使います。 
白黒テクスチャに使うもの 
・Alpha 
・Grayscale 
・Mask 
→カラーテクスチャ 
基本的にはBC7を使います！ 
容量の関係で軽くしたい場合はDefaultにします。（でも分かるくらい汚くなるので最近はあんまり使わないです） 
→マスク用とかに使う白黒画像 
BC7でもいいですが、容量のことを考えるならAlpha、Grayscale、Maskを使い分ける感じです。 
この3つの違いは以下にまとめてみました。
<table data-line="99" class="code-line">
<thead data-line="99" class="code-line">
<tr data-line="99" class="code-line">
<th>設定</th>
<th>Masks(DXT1/DXT5)</th>
<th>Alpha(BC4)</th>
<th>Grayscale(G8)</th>
</tr>
</thead>
<tbody data-line="101" class="code-line">
<tr data-line="101" class="code-line">
<td>チャンネル</td>
<td>RGBA</td>
<td>R</td>
<td>R</td>
</tr>
<tr data-line="102" class="code-line">
<td>圧縮</td>
<td>あり</td>
<td>あり</td>
<td>なし</td>
</tr>
<tr data-line="103" class="code-line">
<td>sRGB</td>
<td>なし</td>
<td>なし</td>
<td>あり・なし</td>
</tr>
</tbody>
</table>
画質の良さ　Grayscale &gt; Alpha &gt; Masks 
上記を踏まえたうえでのなんとなくの使い分け方です。 
・Masks…DefaultのsRGBなしver。ラフネスとかみたいに各チャンネルの数値を使用するとき。 
・Alpha…一番ベタなグレースケールのフォーマット。 
・Grayscale…無圧縮なので綺麗だけど重いので使いどころ注意。sRGBありなし両方使える。
</li>
<li data-line="110" class="code-line">
sRGB 
sRGBのガンマ補正をオンにするかどうかの設定です。 
【設定内容】 
・カラーテクスチャ…チェックを入れる 
・白黒テクスチャ…チェックを外す 
チェックを入れないと色が変わってしまうので基本的にはチェックを入れますが、 
白黒画像の場合は逆にチェックを入れると色が変わってしまうので外します。
</li>
<li data-line="117" class="code-line">
X-axis Tiling Method、Y-axis Tiling Method 
タイリング設定です。 
【設定内容】 
・Wrap…画像をリピートさせたい素材 
・Clamp…画像をリピートさせたくない素材（基本的にはこの設定） 
・Mirror…リピートした時に反転させたい素材 
ゴミを出さない意味でも大体Clampにしておきます。 
ただClampも厳密には画像の一番端のピクセルをリピートしている感じになるので、 
画像の周囲1pxは空白にしておくのが事故が少ないです。
</li>
<li data-line="126" class="code-line">
Filter 
補間方法の設定です。 
【設定内容】 
・Default…特に変更する必要がないとき 
・Nearest…ドットや線のように境界をパキっとさせたい素材のとき 
　大体はDefaultのままで問題ないです。 
　エッジを際立たせたいドット素材やライン素材のときだけNearestにします。 
　詳しく知りたい方はニアレストネイバー法等を調べてみてください。
</li>
</ul>
インポート設定に関してはこんな感じです。 
逆に言えばここ以外は詳しくないので、 
ここも知っておくと便利だよーとかあればぜひお教えください！
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A" data-line="140" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A" aria-hidden="true"></a> おわり</h2>
テクスチャを入れ込むにあたって必要な情報はこんな感じかなと思います。 
また必要なことや修正事項があれば加筆・修正していきます！

【UE4/UE5】UIに使用するテクスチャ設定メモ

用途によって設定を変更する箇所

Discussion