Using tilemaps

소개

타일맵은 2D 게임 레벨들을 만들기에 간단하고 빠른 방법입니다. 기본적으로 격자에 원하는 횟수만큼 놓을 수 있는 참조 타일(또는 조각) 뭉치로 시작합니다. 지도 편집기와 같은 것이라 생각하세요:

../../_images/tilemap.png

충돌 효과를 타일에 추가할 수도 있어 2D 사이드 스크롤링과 탑 다운 게임을 할 수 있습니다.

Making a tileset

To begin, a tileset needs to be made. Here are some tiles for it. They are all in the same image for optimization reasons. There are so-called texture packers that will generate these spritesheets out of your separate texture files. Having them as separate images also works.

../../_images/tileset.png

Create a new project and move the above PNG image into the directory. Next, go into the image's import settings and turn off Filter, keeping it on will cause issues later. Mipmaps should already be disabled; if not, disable this too.

We will be creating a TileSet resource. While this resource exports properties, it's pretty difficult to get complex data into it and maintain it. Here is what it would look like to manually edit the resource:

../../_images/tileset_edit_resource.png

There are enough properties to get by. With some effort, editing this way can work. But the easiest way to edit and maintain a tileset is exporting it from a specially-crafted scene!

TileSet scene

Create a new scene with a regular Node or Node2D as root. For each tile you want to define, add a sprite node as a child. Since tiles here are 50x50, you should turn on the grid (View -> Show Grid or G key) and enable snap (Use Snap icon or Shift + S keys). Moving tiles with the mouse might still be a bit inaccurate, so use your arrow keys as well.

If more than one tile is present in the source image, make sure to use the region property of the sprite to adjust which part of the texture is being used.

마지막으로 스프라이트 노드 이름을 올바르게 지어야 합니다. 그래야 다음의 타일셋 편집(예를 들어 충돌효과를 주거나 Region을 변경하는 등)에서 타일이 정확하게 식별되고 업데이트 됩니다. 이름은 유일해야 합니다.

Sounds like quite a few requirements, so here's a screenshot that shows where everything of relevance is:

../../_images/tile_example.png

모든 타일을 계속 추가하고 필요한 경우 오프셋을 조정하세요(즉, 단일 원본 이미지에 여러 타일이 있는 경우). 다시 말하자면 타일 이름이 유일해야 한다는 것을 기억하세요.

../../_images/tile_example2.png

충돌 효과(Collision)

타일에 충돌효과를 넣기 위해서 스프라이트 자식 노드로 StaticBody2D 노드를 만듭니다. StaticBody2D는 static collision 노드입니다. 그런 다음 CollisionShape2D 또는 CollisionPolygon를 StaticBody2D 자식 노드로 만듭니다. CollisionPolygon이 편집하기 쉬우므로 추천합니다.

../../_images/tile_example3.png

Finally, edit the polygon; this will give the tile a collision and fix the warning icon next to the CollisionPolygon node. Remember to use snap! Using snap will make sure collision polygons are aligned properly, allowing a character to walk seamlessly from tile to tile. Also do not scale or move the collision and/or collision polygon nodes. Leave them at offset 0,0, with scale 1,1 and rotation 0 with respect to the parent sprite.

../../_images/tile_example4.png

다 할 때까지 충돌 효과를 추가합니다. BG는 그냥 배경이므로 충돌효과를 주어선 안되는 것을 유의하세요.

../../_images/tile_example5.png

됐습니다! 우리는 해냈습니다! 나중에 편집할 수 있도록 이 씬을 저장하십시오. 씬을 "tileset_edit.scn" 또는 비슷한 이름으로 짓습니다.

타일셋(TileSet) 내보내기

에디터에서 만들었던 씬을 연 다음 타일셋을 만들겁니다. 씬 메뉴에서 씬 > 변환... > 타일 셋... 을 이용하여 만듭니다:

../../_images/tileset_export.png

Then choose a filename, like "mytiles.tres". Make sure the "Merge With Existing" option is toggled on. This way, every time the tileset resource file is overwritten, existing tiles are merged and updated (they are referenced by their unique name, so again, name your tiles properly).

../../_images/tileset_merge.png

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

새 씬을 만드십시오. 루트는 Node 또는 Node2D로 합니다. 그런 다음 자식 노드로 :ref:`TileMap <class_TileMap>`을 만드십시오.

../../_images/tilemap_scene.png

타일맵 노드의 타일셋 속성으로 가서 이전 단계에서 만든 타일셋을 할당하십시오:

../../_images/tileset_property.png

Also set the cell size to '50', since that is the size used by the tiles. Quadrant size is a tuning value, which means that the engine will draw and cull the tilemap in blocks of 16x16 tiles. This value is usually fine and does not need to be changed, but can be used to fine tune performance in specific cases (if you know what you are doing).

Painting your world

모두 설정이 된 상태에서 타일맵 노드가 선택되었는지 확인하십시오. 왼쪽 팔레트에 선택된 타일로 칠할 수 있는 빨간 격자가 화면에 나타날 겁니다.

../../_images/tile_example6.png

To avoid accidentally moving and selecting the tilemap node (something common, given it's a huge node), it is recommended that you lock it, using the lock button:

../../_images/tile_lock.png

만약 실수로 원하지 않은 곳에 타일을 놓았다면 타일맵 에디터에서 RMB (마우스 오른쪽 버튼)으로 제거할 수 있습니다.

You can also flip and rotate sprites in the TileMap editor (note: flipping the sprite in the TileSet will have no effect). Icons at the top right of the editor allow flipping and rotating of the currently selected sprite - you can also use the A and S keys to flip the sprite horizontally and vertically. With a brick pattern like this tutorial uses, flipping the sprites would create unpleasant discontinuities unless you're flipping an entire region of bricks. But for some kinds of tiles, flipping can be a convenient and space-saving feature.

Offset and scaling artifacts

When using a single texture for all the tiles, scaling the tileset (or even moving to a non pixel-aligned location) will most likely result in filtering artifacts like so:

../../_images/tileset_filter.png

This is unavoidable, as it is the way the hardware bilinear filter works. To avoid this situation, there are a few workarounds. Try the one that looks better for you:

  • Disable filtering and mipmaps for either the tileset texture or all tile textures if using separate images (see the 이미지 가져오기 asset pipeline tutorial).
  • 픽셀 스냅을 활성화하세요. (프로젝트 > 프로젝트 설정 > Rendering > Quality > 2d > Use Pixel Snap 또는 Pixel Snap 검색해서 사용으로 체크합니다).
  • Viewport Scaling can often help with shrinking the map (see the Viewports tutorial). Simply adding a camera, setting it to Current and playing around with its Zoom may be a good starting point.
  • You can use a single, separate image for each tile. This will remove all artifacts, but can be more cumbersome to implement and is less optimized.