LoginSignup
4
2

【UE5.3】Photoshopで作成したPNG画像をインポートすると透明との境界部分が白くなる

Posted at

初めに

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

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

環境

Windows 11
Unreal Engine 5.3
Photoshop 24.2.0

問題点

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

■Photoshop
image.png

■UE
image.png

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

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

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

解決方法

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

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

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

image.png

image.png

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

4
2
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
4
2