初めに

Photoshopを使って作成した透明部分を持ったPNG画像をUE5にインポートすると、透明部分との境界部分で一部白くなってしまった問題を解消した備忘録です。

UE側の設定というよりPhotoshop側での設定の問題となります。

環境

Windows 11
Unreal Engine 5.3
Photoshop 24.2.0

冒頭で記載した通りPhotoshopを使って作成した透明部分があるPNG画像をUE5.3にインポートすると透明部分との境目の一部が白くなってしまう問題が発生していました。

■Photoshop

■UE

少し分かり辛いのですが、拡大してみるとUE側では文字の境目部分がうっすらと白くなっています。

実際にWidgetで使用してみるとその影響が良く分かります。

Photoshopの方で背景を黒くしてみても境界部分は白くなっていないので画像自体に白い部分があるというわけではありません。

問題点はどうやらPhotoshopでPNG画像を生成する方法にあったようです。
問題が起こった時に作成していた画像は以下の方法で作成したものです。
①ファイル→保存を選択
②ファイルの種類でPNGを選択

それに対してUE側で問題にならない場合は以下の方法で作成したものです。
①ファイル→書き出し→書き出し形式...を選択
②「形式」の中から「PNG」を選択
③「透明部分」にチェックを入れる
④「書き出し」を押下

上記の方法で作成したPNG画像をUEにインポートするとUE側で透明部分との境界が白くなる問題が発生しなくなりました。

ただ問題となっていた、ファイルの種類でPNGを選択して作成したPNG画像をPhotoshopで見てみても白い部分は発生していませんでした。
上記2パターンでのPNG画像の生成方法の違いによってUE側での結果が異なる原因は不明です。