본문으로 건너뛰기
Moriqa
Moriqa 후원로그인

타일셋 가장자리 확장

타일 사이에 가는 선이 보이나요? 타일셋의 가장자리를 확장하세요. 모든 타일에 자기 가장자리 픽셀로 된 테두리가 생기고, 엔진에서 선이 사라집니다. 이미지는 절대 기기를 떠나지 않습니다.

기기에서 만들어집니다. 이미지는 절대 업로드되지 않습니다.

  • 업로드되지 않음
  • 이음매 없음
  • 무료, 가입 불필요

작동 방식

타일셋 가장자리를 확장하는 방법

  1. 1단계: 타일셋 추가

    시트를 선택하거나 끌어다 놓거나 붙여넣으세요. 타일 크기는 자동으로 추측됩니다. 타일 크기가 다르면 고치세요.

  2. 2단계: 확장량 설정

    대부분의 게임에는 1픽셀이면 됩니다. 타일을 클릭하고 타일처럼 깔기를 선택해 가장자리가 맞는지 확인하세요.

  3. 3단계: 내려받아 가져오기

    PNG를 저장하고, 옆에 표시된 타일 크기, 여백, 간격을 엔진에 입력하세요.

타일셋 가장자리 확장

선 없이 맞닿는 타일

  • 바깥으로 반복되는 가장자리

    모든 타일에 자기 가장자리 픽셀로 된 테두리가 생겨, 엔진이 옆 타일을 샘플링하지 않습니다.

  • 타일 미리보기

    어떤 타일이든 3 × 3으로 깔아, 가장자리 선을 켜거나 끈 채로 보면서 그림 자체의 이음매를 찾아내세요.

  • 엔진에 넣을 숫자

    새 여백과 간격을 자동으로 계산해 주므로 Godot, Unity, Tiled, Phaser에 바로 쓸 수 있습니다.

  • 업로드되지 않음

    모든 작업이 브라우저에서 이루어지므로 그림은 기기에 남습니다.

자세히 보기

타일 사이에 선이 보이는 이유와 가장자리 확장이 해결하는 방법

타일 사이에 선이 생기는 이유

타일맵은 큰 텍스처 한 장의 작은 사각형에서 각 타일을 그립니다. 카메라가 픽셀의 일부만큼 움직이거나 맵이 확대되거나 필터링되면, 엔진은 그 사각형 바로 바깥을 읽어 이웃 타일의 조각을 가져옵니다. 화면에서는 그 조각이 움직일 때마다 깜빡이는 가는 선으로 보입니다.

가장자리 확장은 모든 타일 둘레에 그 타일 자신의 가장자리 픽셀을 반복한 테두리를 둡니다. 엔진이 타일 바로 바깥에서 무엇을 읽든 이제 타일 가장자리와 같은 색이므로 보이는 것이 없습니다.

확장한 시트 사용하기

  • Godot: TileSet의 아틀라스 설정에서 Margins를 여기 표시된 여백으로, Separation을 간격으로 설정하세요. 텍스처 영역 크기는 타일 크기 그대로입니다.
  • Unity: Sprite Editor에서 셀 크기로 자르고, Offset을 여백으로, Padding을 간격으로 설정하세요.
  • Tiled: 타일셋을 추가할 때 같은 Margin과 Spacing을 입력하세요.
  • Phaser: 여백과 간격을 addTilesetImage의 마지막 두 인수로 넘기세요.

타일 자체를 확인하기

가장자리 확장은 엔진 때문에 생기는 선을 해결합니다. 그림 때문에 생기는 선은 다른 문제입니다. 왼쪽 가장자리와 오른쪽 가장자리가 맞지 않는 잔디 타일은 어떻게 패킹하든 이음매가 보입니다.

타일을 클릭하고 타일처럼 깔기를 선택하면 맵에 깔리는 것처럼 3 × 3으로 반복된 모습을 볼 수 있습니다. 타일 가장자리 표시를 켜면 한 복사본이 끝나고 다음 복사본이 시작되는 곳이 정확히 보입니다.

타일셋 가장자리 확장

자주 묻는 질문

이미지가 어딘가에 업로드되나요?

아니요. 모든 작업이 브라우저에서, 내 기기에서 실행됩니다. 이미지는 Moriqa나 다른 누구에게도 전송되지 않으며, 페이지를 닫은 뒤에는 아무것도 남지 않습니다.

몇 픽셀을 확장해야 하나요?

대부분의 2D 게임에는 1픽셀이면 충분합니다. 텍스처가 밉맵을 쓰거나, 카메라가 멀리 줌아웃하거나, 선이 여전히 보이면 2픽셀 이상을 쓰세요.

가장자리 확장이 타일을 바꾸나요?

아니요. 타일은 크기와 모든 픽셀을 그대로 유지합니다. 바뀌는 것은 둘레의 공간뿐이어서, 시트가 커지고 엔진에서 여백과 간격이 필요해집니다.

추가 간격은 왜 있나요?

확장한 타일 사이에 빈 픽셀을 더합니다. 대부분의 엔진에는 필요 없고, 도구가 타일 사이의 빈 공간까지 요구할 때 도움이 됩니다.

타일셋에 이미 간격이 있습니다. 쓸 수 있나요?

네. 지금 가진 시트를 열고 그 여백과 간격을 입력하세요. 타일을 거기서 읽어 확장과 함께 다시 배치합니다.

타일이 이음매 없이 이어지는지 어떻게 확인하나요?

타일을 클릭한 다음 타일처럼 깔기를 선택하세요. 복사본들이 눈에 보이는 선 없이 만나면 그 타일은 깔끔하게 반복됩니다.

타일도 직접 그리시나요?

Moriqa의 픽셀 아트 에디터는 픽셀 격자 위에 타일과 스프라이트를 그리고 엔진용으로 내보냅니다. 브라우저에서 무료입니다.