アップロード画像の白いラインについて

こんにちは、らいおんです。

 

今、読み込み時のラグを極力なくすように努力していますが、それにともない、Unityで使っていたオプションの一つをOFFにしました。

これによって、【一部の】透過PNGのまわりに白いラインが見えるかもしれません。

 

これは、テクスチャの透過部分と絵の部分の境界線の処理が甘いせいで発生しているもので、今までは読み込み時に掃除するオプションを入れていたのできれいに見えていたのですが、ラグをなくすためには仕方ないと思い、OFFにしました。

幸いにも解決策はあります!

f:id:gridrooms:20200402161242p:plain

こんな感じに、透過が100%でない時に、その後ろのもともとの白背景データが出てしまうのが原因のようです。

 

解決する方法:

これは画像処理、主にベクター画像などをPNGに出力したり、切り取った画像の境界線がきれいになっていない時に起こります。

これを解決するには、お使いのペイントソフトのアンチエイリアス機能や境界線に関する機能を使います。

 

フォトショップ:レイヤー>マッティング(一番下)>フリンジ削除

 

paint.net(無料ソフト)プラグインを使って調節(AAアシスタントFeather)

プラグインのインストール後、AAアシスタントプラグインかFeatherプラグインを使う

 

結果:左側が未処理のPNGsvgファイルをCorelDRAWでPNG出力)、右はフォトショップで加工後(フリンジ削除 1px)

f:id:gridrooms:20200402161827p:plain

 

こちらはpaint.net, AAアシスタントでデフォルト設定

f:id:gridrooms:20200402161228p:plain

 

未処理の画像の角

f:id:gridrooms:20200402161955p:plain

 

フォトショップでフリンジ削除後(きれいに角も処理されている)

f:id:gridrooms:20200402161936p:plain

 

paint.netでの角の処理、未処理に比べ抑えられてはいるが完璧ではない。

これは設定次第かあるいはFeatherが必要なのか?

f:id:gridrooms:20200402161949p:plain

 

Gimpなど他の無料ソフトでも同様の機能はあると思います。

アンチエイリアス機能、または、Feather、フリンジ機能などと呼ばれています。

気になる方は調べてみてください。

個人的には、フォトショップでのフリンジ削除が一発で不具合もなくきれいに消してくれるのでおすすめです。

 

それでは、また軽量化に励んでまいります!

 

らいおんでした!

(^_^)/