読者です 読者をやめる 読者になる 読者になる

Unity / VRゲーム開発日記@長崎

Unityを使ったVRのゲーム開発をやってます。

SpriteRenderer、とりあえずの隣接ドット対策

2DのSpriteRendererで、Multiplueを使用して画像を区切った際、
例えばマップチップ的な使い方をしてると、縮尺によっては、線が入ってしまう時がある。

■線が入った状態
f:id:icoc_dev:20140929103724p:plain


■本来はこう表示したい
f:id:icoc_dev:20140929103754p:plain


ピクセル数が完全に決まってる画面なら、
ピクセルがずれないようにカメラの設定をしておけば問題ないが、
スマホ向けだと画面サイズと比率がまちまちなので、どうしても縮尺とピクセルが
うまくあわない可能性が出てくる。


今回は、この現象に対する1つの対処方法について。



ちなみに、この現象の線の部分というのは、
どうも隣のドットが表示されている様子。

f:id:icoc_dev:20140929104818j:plain


2Dとはいえ、仕組みとしては、オブジェクトに
テクスチャを貼り付けてる仕組みだと思うので
多分このズレは防ぎようがなさそう。

そこで、隣のドットを表示されることを諦めて、
1ドット余分に画像を書いておくという対処が考えられる。


ただし、本来表示したいものと別に1ドット余分になるので
元の画像のサイズが8で割れない数字になったり、
単純に書き込み作業が面倒だったりと、結構大変そう。



なので、何か他に良い方法がありましたらコメントいただけると
助かります!!



って事で、1ドット余分な画像を作る作業はちょっと
片手間ではできないので、現在の画像をひと回り小さく利用する形で
やってみました。


どういうことかというと、今マップチップが
16ドットで構成されているんですが、
それを14ドットとみなすことで、
上下左右1ドットを余分な部分とするということです。


早速やってみました。


まずは、Pixel To Units を現在16で設定しているので、
これを14にします。


f:id:icoc_dev:20140929105702p:plain


そして、Sprite Editorを開きます。
現在は、こんなかんじです。

f:id:icoc_dev:20140929105743p:plain

ちなみに、透明部分はGridでスライスした時に、
Sprite対象外になってしまうので、一時的に背景にダミーの塗りつぶしを設定しています。


スライス後に背景を非表示にして保存しなおせば、透明部分も
Sprite対象にできるので、画像の並び順に意味を持たせたいときには便利です。


・・・


次に、Slice設定を変更します。


f:id:icoc_dev:20140929110032p:plain


PxcelSizeを14にしました。
画像には、上下左右位置ドットの余白をつけてるつもりなので、
Offsetでxy、1ドットずつ
Paddingは、自分の1ドットと、隣の1ドットの距離があるので、
2,2で設定します。


そうすると、こんなかんじになりました。

f:id:icoc_dev:20140929110248p:plain


これで、Gameビューの縮尺を色々変えてみても、
線が入る事はなくなりました。

f:id:icoc_dev:20140929110403p:plain