【UE5】イラストの周囲に出現する白い線を排除する

この記事のゴール

これ（↓）を

こう（↓）する

はじめに

Unreal Engine で2Dゲームを開発している際、イラスト（スプライト）をレベルに配置すると、その周囲が白い線で囲まれる現象が発生しました。この白い線をマテリアルの改造またはプロジェクト設定の変更により出現しないようにしました。

環境

Unreal Engine 5.4.4
CLIP STUDIO PAINT PRO 4.1.4

他のペイントアプリでは本現象は発生しないかもしれません。

事象

1. CLIP STUDIO PAINT PRO で描いたイラストをPNG形式で書き出します。透過情報を書き出します。
   
   

2. 作成したPNGファイルを Unreal Engine にドラッグ＆ドロップでインポートします。テクスチャの設定は以下のようにします。

• Mip Gen Settings: NoMipmaps
• Texture Group: 2D Pixels(unfiltered)
• Compression Settings: UserInterface2D(RGBA)
• Filter: Bi-linear

Filterが「Default(from Texture Group)」または「Nearest」の場合はこの現象が発生しないはずです。Filterが「Bi-linear」または「Tri-linear」のときに白い線が出現します。ドット絵の場合は前者の設定にすることが多いため、この現象はあまり関係ありません。

3. テクスチャを右クリック > Sprite Actions > Create Sprite によりスプライトを作成します。

4. 作成したスプライトをレベルに配置します。
   
   イラストの縁が白い線で囲まれてしまっています。

原因

不明

対処方針 -1-

マテリアルを改造します。
アルファチャンネルでRGBチャンネルをマスクするようにします。

対処方法 -1-

1. スプライトが使用しているマテリアルを調べます。
   

2. 使われているマテリアルは「TranslucentUnlitSpriteMaterial」ということが分かったので、それが置かれているフォルダへ移動します。
   

3. 「TranslucentUnlitSpriteMaterial」を見てみると、親マテリアルは「DefaultSpriteMaterial」ということなので、この2つをコピーします。
   

必ずコピーします。エンジンコンテンツを直接いじるのは絶対に止めましょう。

4. 分かりやすいようにリネームします。
   

5. 「MI_MyTranslucentUnlitSpriteMaterial」の親マテリアルを「M_MyDefaultSpriteMaterial」に変更します。
   

6. 「M_MyDefaultSpriteMaterial」を開きます。
   

7. Stepノードを使用してアルファチャンネルでRGBチャンネルをマスクします。ここでは、パラメータ「AlphaThreshold」の初期値を0.95としています。最後にApplyします。
   

Stepノードは「y > x の場合 0」「y <= x の場合 1」を返します。

8. スプライトのマテリアルを「MI_MyTranslucentUnlitSpriteMaterial」に変更します。
   

9. スプライトをレベルに配置します。
   
   イラストの縁の白い線がなくなっています。

制限 -1-

1. UMGの対処になっていない
   UMGで白い線を出ないようにしようと思ってイメージにスプライトを設定しても効果はありません。
   UMGでも白い線を消したい場合は、同じようにアルファチャンネルでRGBチャンネルをマスクしたUI用のマテリアルを作成する必要があります。

2. 線画が黒のイラストにしか効果がない
   元のイラストの周囲が黒でないと、逆に黒い線が出現する場合があります。

対処方針 -2-

プロジェクト設定を変更します。

対処方法 -2-

1. Project Settings > Editor > Texture Import > When to infill RGB in transparent white PNG を「Always」に変更します。
   

2. イラストをインポートします。テクスチャからスプライトを作成してレベルに配置すると白い線が現れません。