SpriteRenderer、とりあえずの隣接ドット対策
2DのSpriteRendererで、Multiplueを使用して画像を区切った際、
例えばマップチップ的な使い方をしてると、縮尺によっては、線が入ってしまう時がある。
■線が入った状態
■本来はこう表示したい
ピクセル数が完全に決まってる画面なら、
ピクセルがずれないようにカメラの設定をしておけば問題ないが、
スマホ向けだと画面サイズと比率がまちまちなので、どうしても縮尺とピクセルが
うまくあわない可能性が出てくる。
今回は、この現象に対する1つの対処方法について。
ちなみに、この現象の線の部分というのは、
どうも隣のドットが表示されている様子。
2Dとはいえ、仕組みとしては、オブジェクトに
テクスチャを貼り付けてる仕組みだと思うので
多分このズレは防ぎようがなさそう。
そこで、隣のドットを表示されることを諦めて、
1ドット余分に画像を書いておくという対処が考えられる。
ただし、本来表示したいものと別に1ドット余分になるので
元の画像のサイズが8で割れない数字になったり、
単純に書き込み作業が面倒だったりと、結構大変そう。
なので、何か他に良い方法がありましたらコメントいただけると
助かります!!
って事で、1ドット余分な画像を作る作業はちょっと
片手間ではできないので、現在の画像をひと回り小さく利用する形で
やってみました。
どういうことかというと、今マップチップが
16ドットで構成されているんですが、
それを14ドットとみなすことで、
上下左右1ドットを余分な部分とするということです。
早速やってみました。
まずは、Pixel To Units を現在16で設定しているので、
これを14にします。
そして、Sprite Editorを開きます。
現在は、こんなかんじです。
ちなみに、透明部分はGridでスライスした時に、
Sprite対象外になってしまうので、一時的に背景にダミーの塗りつぶしを設定しています。
スライス後に背景を非表示にして保存しなおせば、透明部分も
Sprite対象にできるので、画像の並び順に意味を持たせたいときには便利です。
・・・
次に、Slice設定を変更します。
PxcelSizeを14にしました。
画像には、上下左右位置ドットの余白をつけてるつもりなので、
Offsetでxy、1ドットずつ
Paddingは、自分の1ドットと、隣の1ドットの距離があるので、
2,2で設定します。
そうすると、こんなかんじになりました。
これで、Gameビューの縮尺を色々変えてみても、
線が入る事はなくなりました。