Zenn
✏️

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

に公開
Unreal Engine
UI
UE4
umg
UE5
tech

UEにおけるUIのテクスチャ設定周りについてのメモになります。
意外にどこの現場に行ってもこの辺りの情報がなかったりすることが多かったのでまとめてメモしておこうかなと思った次第です。
ここで記載している内容は以下になります。

  • UE用テクスチャの作成周り
  • UE側のインポート設定

UE用テクスチャの作成周り

テクスチャ作成周りでは以下に関して書いていきます。

  • 書き出し形式
  • 画像サイズ
  • 解像度

書き出し形式

自分が今までに現場で使用してきた形式はpng、tgaの2種類になります。
どちらを使うかはデザイナーで決められたりプログラマさんに指定されたりするので
プロジェクトによって変わります。
一応、今までに使用した所感を記載します。

  • png
    今は大体の現場でこちらの形式を使用していることが多いような気がします。
    UE4のバージョンによっては、
    テクスチャの端に白いゴミが出てしまっていたのでtgaの方が安全だなーというイメージでした。
    アルファの指定が出来ないので、ゴミを取ることも出来なかったので…。
    UE4の最後のバージョン辺りからはその問題があまり起こらなくなったので
    その辺りから大体のプロジェクトで書き出しが楽なのもあってpngを使用してる印象があります。
  • tga
    以前はこちらメインで使ってました。
    書き出す際は32bitで保存します。アルファなしの場合は24bit。
    今はpngを使うことが多いですが、
    UEでカラーではなくマスクとして使用させるための白黒テクスチャは
    たまにpngだと上手くいかなかったりするので
    そういうときは今でもそのテクスチャだけtgaにしてます。

今はpngを使ってる現場が多い印象ですが、
個人的にはアルファが制御できるtgaの方が安心だったりします。

画像サイズ

画像サイズは縦横それぞれ4の倍数にしています。
4の倍数にしないとUEに取り込んだ際に圧縮されず、容量が大きくなってしまう為です。

解像度

画面デザインのデータは96dpiで作成しています。
72dpiだとUE内とフォントのサイズが異なってしまう為です。
→ただし、5.3から72dpiでも大丈夫なようです！
https://dev.epicgames.com/documentation/ja-jp/unreal-engine/font-dpi-scaling-in-unreal-engine

テクスチャの作成周りに関してはこんな感じです。
他にも必要なことがあれば追記するかもしれません。

UE側のインポート設定

自分がいつも設定を触っている箇所を記載していきます。
UI用は大体この辺りを設定していれば大丈夫だと思います。

UE5のテクスチャのインポート設定のDetailパネルのスクショを貼って説明します。

  • 青枠…固定の設定にする箇所
  • 黄枠…用途によって設定を変更する箇所

    では各項目について説明していきます。

固定の設定の箇所

まず青枠の箇所

  • Mip Gen Setting
    　MipMap用の設定です。
    【設定内容】
    ・NoMipMap
    UIは特に対応しないのでここはNoMipMapにしておきます。
    設定しないとテクスチャがぼやける場合があります。
    一応↓で説明しているTextureGroupをUIにして、
    MipGenSettingをFromTextureGroupにすることでも
    自動でNoMipMapの適用がされるようです！
  • Texture Group
    テクスチャのグループ設定です。
    【設定内容】
    ・UI
    読み込みの処理とかに関係あるみたいです。
    プロジェクトにもよりますが基本的にはUIだと思います。
  • Never Stream
    テクスチャのストリーミング設定です。
    【設定内容】
    ・チェックを入れる
    UIはストリーミングさせないのでチェックを入れます。

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

次は黄枠の箇所

  • Compression Setting
    圧縮方式の設定です。
    【設定内容】
    カラーテクスチャに使うもの
    ・Default
    ・BC7…大体はこれを使います。
    白黒テクスチャに使うもの
    ・Alpha
    ・Grayscale
    ・Mask
    →カラーテクスチャ
    基本的にはBC7を使います！
    容量の関係で軽くしたい場合はDefaultにします。（でも分かるくらい汚くなるので最近はあんまり使わないです）
    →マスク用とかに使う白黒画像
    BC7でもいいですが、容量のことを考えるならAlpha、Grayscale、Maskを使い分ける感じです。
    この3つの違いは以下にまとめてみました。

    設定 Masks(DXT1/DXT5) Alpha(BC4) Grayscale(G8)
    チャンネル RGBA R R
    圧縮 あり あり なし
    sRGB なし なし あり・なし

    画質の良さ　Grayscale > Alpha > Masks
    上記を踏まえたうえでのなんとなくの使い分け方です。
    ・Masks…DefaultのsRGBなしver。ラフネスとかみたいに各チャンネルの数値を使用するとき。
    ・Alpha…一番ベタなグレースケールのフォーマット。
    ・Grayscale…無圧縮なので綺麗だけど重いので使いどころ注意。sRGBありなし両方使える。

  • sRGB
    sRGBのガンマ補正をオンにするかどうかの設定です。
    【設定内容】
    ・カラーテクスチャ…チェックを入れる
    ・白黒テクスチャ…チェックを外す
    チェックを入れないと色が変わってしまうので基本的にはチェックを入れますが、
    白黒画像の場合は逆にチェックを入れると色が変わってしまうので外します。

  • X-axis Tiling Method、Y-axis Tiling Method
    タイリング設定です。
    【設定内容】
    ・Wrap…画像をリピートさせたい素材
    ・Clamp…画像をリピートさせたくない素材（基本的にはこの設定）
    ・Mirror…リピートした時に反転させたい素材
    ゴミを出さない意味でも大体Clampにしておきます。
    ただClampも厳密には画像の一番端のピクセルをリピートしている感じになるので、
    画像の周囲1pxは空白にしておくのが事故が少ないです。

  • Filter
    補間方法の設定です。
    【設定内容】
    ・Default…特に変更する必要がないとき
    ・Nearest…ドットや線のように境界をパキっとさせたい素材のとき
    　大体はDefaultのままで問題ないです。
    　エッジを際立たせたいドット素材やライン素材のときだけNearestにします。

インポート設定に関してはこんな感じです。
逆に言えばここ以外は詳しくないので、
ここも知っておくと便利だよーとかあればぜひお教えください！

おわり

テクスチャを入れ込むにあたって必要な情報はこんな感じかなと思います。
また必要なことや修正事項があれば加筆・修正していきます！

Discussion