본문 바로가기

레퍼런스/고도엔진

고도엔진 튜토리얼 #21 타일맵 사용하기(Using tilemaps)

서론


타일맵은 2D 게임 레벨을 만드는 간단하고 빠른 방법입니다. 기본적으로 원할 때마다 격자판(grid)에 올릴 수 있는 참조 타일 더미부터 시작합니다 :


../../../_images/tilemap.png

2D 사이드 스크롤링과 탑타운 게임에서 허용되는 충돌도 타일에 추가될 수 있습니다.



타일셋 만들기


시작하려면 타일셋을 만들어야 합니다. 이를 위한 몇몇 타일이 있습니다. 타일들이 같은 이미지에 한꺼번에 있는데, 아티스트들이 종종 이를 선호합니다. 다른 이미지에 나누어 가지고 있는 것도 쓸만합니다.


../../../_images/tileset.png

새로운 프로젝트를 만들고 위의 png 이미지를 디렉토리에 넣어주세요.


우린 이제 TileSet 리소스를 만들겁니다. 이 리소스는 속성을 내보내는데 반하여, 복잡한 데이터를 얻고 유지하는 건 힘듭니다. 수동으로 리소스를 편집하는 건 이와 같은 모습입니다 :


../../../_images/tileset_edit_resource.png

얻을만한 속성이 충분하며, 약간의 노력으로 이런 방법으로 작동하게 할 수 있습니다. 하지만 특별하게 제작된 씬에서 타일셋을 편집하고 유지하는 게 가장 쉬운 방법입니다.



타일셋 씬


일반 노드 또는 노드2D를 루트로 새로운 씬을 만듭니다. 각 타일에, 스프라이트를 자식으로 추가합니다. 여기의 타일은 50x50이므로, 스냅을 사용하는 게 좋은 밥법입니다.


원본 이미지에 한 개 이상의 타일이 있다면 스프라이트의 지역 속성을 사용하여 텍스쳐의 어느 부분이 사용되는지 조정하십시오.


마지막으로 스프라이트 노드의 이름을 올바르게 지정하세요. 그러면 후속 편집에서 타일(예를 들면 충돌이 추가되거나, region이 바뀌는 등)이 올바르게 식별되고 업데이트됩니다. 이름은 유일해야 합니다.


많은 것을 필요로 하는 것 같지만, 관련성이 있는 모든 부분을 보여주는 스크린샷입니다 :


../../../_images/tile_example.png

계속해서 타일을 더하며 만약 필요하면 오프셋을 적용합니다(단일 소스 이미지에서 여러 타일일 수 있습니다). 다시, 이름들이 유일해야 한다는 것을 기억하세요.


../../../_images/tile_example2.png


충돌


충돌을 타일에 더하기 위해 각 스프라이트에 StaticBody2D를 생성합니다. 이게 정적 충돌 노드입니다. 그러면, StaticBody2D의 자식으로 CollisionShape2D나 CollisionPolygon을 생성합니다. 후자가 편집하기 쉽기 때문에 권장됩니다 :


../../../_images/tile_example3.png

마지막으로 타일에 충돌을 추가하기 위해 다각형을 편집합니다. 스냅을 쓰는 걸 기억하세요! 스냅을 쓸 때 충돌 다각형을 적절히 할당해, 캐릭터가 타일을 걷는 것처럼 보이게 합시다. 다각형 노드에 충돌을 스케일하거나 움직이지 마세요. 오프셋을 0,0에 두고 스케일 1, 1과 회전 0을 부모 스프라이트에 놓습니다.


../../../_images/tile_example4.png

다 할 때까지 충돌을 타일에 계속 더해주세요. BG는 배경입니다. 그러므로 충돌을 가져선 안됩니다.


../../../_images/tile_example5.png

좋아요! 다 됐습니다! 이 씬을 미래에 할 편집을 위해 기억하세요. "tileset_edit.scn" 같이 부르면됩니다.



타일셋 내보내기


씬이 만들어지고 에디터에서 열리면 다음 단계는 타일셋을 만드는 것입니다. Scene Menu에서 Use Scene > Convert To > Tile Set :


../../../_images/tileset_export.png

"mytile.res"처럼 파일 이름을 고르세여. "Merge With Existing" 옵션을 켜두세요. 이 방법으로 타일셋 리소스 파일이 덮여쓰일 때마다 존재하는 파일이 병합되고 업데이트됩니다(이들은 이름으로 참조됩니다). 그러니 다시, 이름을 적절히 지으세요.


../../../_images/tileset_merge.png


타일맵에서 타일셋 사용하기


어떤 노드나 노드 2d를 루트로 새 씬을 만듭니다. TileMap을 자식으로 만듭니다. 


../../../_images/tilemap_scene.png

이 노드의 타일셋 속성으로 가서, 이전 단계에서의 하나를 생성합니다.


../../../_images/tileset_property.png

그것이 타일에 사용되는 크기이기 때문에 셀 사이즈를 '50'으로 설정합니다. 사분면 크기는 튜닝 값으로, 엔진이 16x16 타일 블록으로 타일맵을 그려냅니다. 이 값을 대부분 괜찮으며 특정 상황에서 성능을 조정하는 데 사용할 수 있습니다 (수행 중인 작업을 알고 있는 경우).



여러분의 세계를 칠하세요.


모든 설정이 끝나면 TileMap 노드가 선택되었는지 확인하십시오. 빨간색 격자가 화면에 나타나며 선택한 팔레트를 왼쪽 팔레트에 칠할 수 있습니다.


../../../_images/tile_example6.png

실수로 타일맵 노드를 옮기고 선택하는 것을 피하려면 (일반적으로 거대한 노드가 주어집니다), 잠금 버튼을 사용하여 타일맵 노드를 잠그는 것이 좋습니다 :


../../../_images/tile_lock.png

여러분은 타일맵 에디터를 이용해 스프라이트를 뒤집고 회전할 수 있습니다(참고 : 타일셋에서 스프라이트를 돌리는 것은 아무런 영향이 없습니다). 편집기의 오른쪽 상단에 있는 아이콘을 사용하면 현재 선택한 스프라이트를 뒤집고 회전할 수 있습니다 - A와 S를 이용해 가로 및 세로로 뒤집을 수 있습니다. 이 튜토리얼과 같은 벽돌 패턴을 사용하면 스프라이트를 뒤집어서 벽돌의 전체 영역을 뒤집지 않는 한 불쾌한 불연속성이 생길 수 있습니다. 하지만 일부 타일의 경우 뒤집기는 편리하며 공간을 절약할 수 있습니다.



오프셋과 아티팩트(artifacts) 스케일링


모든 타일에 단일 텍스쳐를 사용하는 경우 타일셋을 크기조절(또는 픽셀 할당되지 않은 위치로 이동합니다)할 경우 다음과 같은 필터링 아티팩트가 발생할 가능성이 높습니다 :


../../../_images/tileset_filter.png

이것은 하드웨어 쌍 선형 필터가 작동하는 방식이기 때문에 피할 수 없습니다. 따라서 이 상황을 피하기 위한 몇 가지 해결 방법이 있습니다. 더 나은 것으로 보이는 방법을 시도해보세요.


  • 각 타일에 단일 이미지를 사용하면 모든 이슈가 제거되지만 구현하기가 더 어려워 질 수 있으므로 먼저 아래 옵션을 시도하세요.
  • 타일셋 텍스쳐 또는 전체 이미지 로더에 대한 필터링을 비활성화합니다 (Managing image files 에셋 파이프라인 튜토리얼 참조).
  • 픽셀 스냅을 사용합니다 (설정 : "Scene > Project Settings > Display/use_2d_pixel_snap:을 true로).
  • 뷰포트 스케일링은 맵 축소에 종종 도움이 됩니다 (뷰포트 튜토리얼 참조).