この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
Unityの画像の端に謎の線・点が出たこと、ありませんか？直したいですね。
こんにちは。最近はずっとuGUIでUIをいじっています。
この記事画像に並んでいるのは弊社ゲームシリーズ「式姫Project」の 狛犬 です。
この子に例になってもらい、下の画像のような謎の線について、どうしてこれが起こるのか・どうすればこれが起こらないのかについて書きたいと思います。
どうして線が見えるのか
この線が一体どこから出てきたものかというと、画像の逆の端の色からきたものです。
少し間をあけて並べてみるとわかりやすいですね。
どうしてそんなところの色が混ざってしまうのか、テクスチャのインポート設定(の一部)を見ていきたいと思います。
今の Texture Import Settings はこんな感じです。
ここで見るべき設定は
- Wrap Mode
- (Filter Mode)
です。
結論から言うと
Wrap Mode が Repeat になっていたら Clamp にしましょう。
Wrap Mode
画像を伸ばすときにどうやって伸ばすか？というのが Wrap Mode です。
- Repeat
- Clamp
Repeatは同じ画像を並べて使うときなど、端の隣を逆の端とする設定です。
Clampは画像を並べず単体で使うときなど、端の隣は端をそのままのばしたものになる設定です。
ここが Repeat になっていると逆側の端を見てしまい謎の線が出るわけです。
続きはそもそもなぜ逆の端を参照する必要があるのか？という話です。
Filter Mode
画像の1ピクセルがそのまま画面の1ピクセルになるわけではありません。
では画面の1ピクセルの色をどうやって決めるのか？というのが Filter Mode です。
- point
- bilinear
- trilinear
Filter Mode には上の3種類があります。
Point は、近い1点のみをみてその色をとってきます。
たとえばドット絵をぼやかさずにドットらしく見せたいときははこの設定を使います。
Biliner は近い点の平均の色をとります。
極端な拡大縮小でなければうまくぼかして見えるので、UIを作っている中ではたいていBilinerを使っています。
Triliner は Biliner と似たようなものですが、これはミップマップを参照します。
他の方の記事にありますが、2Dではあまりカメラとの距離が変わらないので使うことはありません。
PointとBilinearの画像を見比べてみると、どういったときにどちらを使うかわかりやすいですね。
ここまででわかったかと思いますが、逆の端の色が混ざるのは
- Filter Mode が Bilinerなので近くの色を平均して色を決めている
- Wrap Mode が Repeatなので近くの色に逆の端の色が入る
からですね。Wrap Mode を Clamp にしましょう。
きれいになりました。
この設定、特に動的にTexture2Dを生成したときに忘れがちです。
スクリプトからもWrapModeは変更できるので忘れずに設定しておきましょう。
