[Phaser] Pixel bleeding 이슈

타일맵 기반으로 개발을 하다보면 타일에 없는 격자가 생기는 이슈가 발생한다.

Pixel bleeding 현상이라고 하는데 타일맵의 크기를 늘려서 돌출 시키는 형태로 변경하면 사라진다. 

 

https://github.com/sporadic-labs/tile-extruder

이쪽에서 tile-extruder를 설치하고 기존에 처리하던 타일맵을 돌려준다. 그러면 각 타일의 크기가 2px씩 증가되어 타일맵 이미지가 형성이 되는데, 기존에 처리하던 Tiled 프로젝트가 있다면 이미지를 수정해주어야 한다.

나의 경우 32 x 32 타일맵을 사용하고 있었고, 돌출한 이후에는 34 x 34 형태가 되었다.

상단의 tileset 탭에서 속성을 누르고 image를 다시 잡아준다. (34 x 34로 추가한다.)

=> 타일셋에서는 34px로 잡고 실제 타일에는 32px을 하나의 타일로 인식하여 돌출시킨다.

 

이후 코드에서 수정한 이미지를 로드하고 명시적으로 타일 사이즈를 지정해준다.

this.load.image("beach_tileset", "assets/beach_tileset_extruded.png"); 

this.load.image("beach_tileset2", "assets/beach_tileset2_extruded.png");

 

map.addTilesetImage("beach_tileset", "beach_tileset", 34, 34, 0, 0);

map.addTilesetImage("beach_tileset2", "beach_tileset2", 34, 34, 0, 0);

 

타일셋 이미지 크기를 변경하고 적용한 이후에는 격자가 사라진다.

 

---

근데 나무 밑에 초록색 밑줄 생기는 건 왜 안 없어지는거지....?

특이하게 저 나무에서만 생긴단 말이지...

 

고치려면 시간을 많이 잡을 것 같아서 일단 다른 텍스처를 쓰는 방식으로 수정해야겠다. 

 

수정 후) 타일맵 부분 바꿨다고 안 나오는 건 좀 불가사의하네...