[20171113] Strange line of tile map

오래전에 해결했던 문제를 다시 마주할 일이 있었습니다.

"이런 사소한걸 정리하는게 무슨 의미가 있겠어."
"아냐 누군가 절박한 사람에겐 도움이 될거야."
...라고 30분쯤 고민하다가 귀차니즘을 극복하고 적어봅니다.

cocos2d-x 에서 Tmx 관련 Class 를 사용하거나 SpriteBatchNode 를 사용해서 Tile map 을 Render 할때 타일의 경계면에 심기를 몹시 불편하게 만드는 라인이 보일 때가 있습니다.

< Strange line of tile map >

이 문제의 원인은 Texture에 있을 가능성이 매우 높으며 Vertex가 특정 공간을 커버하지 못해서 발생할 가능성은 낮은편입니다.

빈공간이 있어서 생긴 문제라면 Vertex의 크기와 위치를 조정하는 것으로 해결될겁니다.

이 문제를 해결하기 위해 Vertex를 약간 겹치게 한다고 해도 원인이 Texture에 있을경우 이 문제를 해결할 수 없습니다.


Tile을 만드실때...

타일 주변의 1px을 타일의 경계면 색상과 동일하게 칠해주는것

...이 가장 간단한 해결방법입니다.
( 노가다가 동반되서 아닐 수도 있습니다. ( '_')y-~ )
( 그럴땐 Texture Filter 쪽을 디벼보세요. 참고 )


이 방법으로 해결하는 이유는 이 문제가...
Vertex가 Render 되는 과정에서 정해진 Texture값 그대로 그려지지 않을 수 있기 때문입니다.
즉 아주 미세한 수준에서...

1. Tex 값이 모자르거나
2. Tex 값이 넘거나
3. Texture Filter 때문에 Src 값 자체가 변하거나.

...할 수 있습니다.


그리고 1px 를 칠해주는 것으로 문제가 되는 2번과 3번의 경우에 대응할 수 있습니다.


그래서 Tile이 실질적으로 어떤 모양이 되어야 하냐면

< 1번 : Tile 주변에 1px 를 칠하지 않았다. >

< 2번 : Tile 주변에 1px 를 칠했다. >

1번 이미지 처럼 타일을 그리면 안됩니다.
2번 이미지 처럼 주변 1px를 채워주시면 됩니다.

그리고 당연하게도...
경계면 색상이 동일한 Tile이 있을 경우 1px를 채우지 않고 Tile을 연속되게 배치하셔도 됩니다.

물론 주변 1px의 색을 맞춰주는 것을 잊지 맙시다.

< 칠하세요 1px >