충돌 다각형 만들기

알파 실루엣에서 충돌 다각형을 만들고 꼭짓점 수와 오차를 숫자로 확인하세요.

스프라이트의 알파로 따낸 충돌 폴리곤은 박스보다 실루엣을 더 가깝게 따릅니다. Nerulio는 프레임마다 알파 임계값(기본 127, 즉 절반 이상 불투명한 픽셀이 포함)으로 픽셀 가장자리를 따라 윤곽을 따고, 윤곽이 스스로 교차하지 않게 하면서 꼭짓점 상한(기본 12, 3~64)에 맞을 때까지 단순화하며, 프레임마다 폴리곤을 최대 8개까지 프레임 캔버스 픽셀로 저장합니다. 폴리곤은 Godot 번들의 메타데이터와 일반 JSON으로 내보내며, CollisionPolygon2D 노드나 Unity 콜라이더를 만들지는 않습니다.

이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다

업로드 없음 · 이 기기에서 처리

윤곽 따기, 단순화, 엔진에 점 넘기기

윤곽은 픽셀 중심이 아니라 불투명 픽셀과 투명 픽셀 사이의 경계를 따라가므로, 모든 꼭짓점이 정수 픽셀 모서리에 놓입니다. 16 × 16 불투명 정사각형은 정확히 (0, 0), (16, 0), (16, 16), (0, 16)이 됩니다. 바깥 윤곽은 화면 기준 시계 방향(y 아래)으로 나오고, 4px²보다 작은 점 조각은 버립니다.

단순화(Ramer–Douglas–Peucker)는 직선에 가까운 점을 지웁니다. 허용 오차는 1px에서 시작해 꼭짓점 수가 상한 이하가 될 때까지 올라가고, 윤곽이 스스로 교차하게 만드는 오차는 거부합니다. 스스로 교차하는 윤곽은 물리 도형으로 쓸 수 없기 때문입니다. 오차는 단계적으로 오르므로 상한보다 적은 꼭짓점으로 끝날 수 있고, 상한이 낮으면 두 다리 사이 같은 틈이 뭉개질 수 있습니다.

엔진은 이런 폴리곤을 오브젝트 기준 점 목록으로 받습니다. Godot의 CollisionPolygon2D는 오목한 폴리곤도 받으며, 기본 솔리드 모드에서는 스스로 볼록 조각으로 나눕니다. Area2D나 물리 바디의 자식이어야 합니다. Unity의 PolygonCollider2D는 로컬 공간의 점을 받고, 스프라이트의 Custom Physics Shape로 자체 윤곽을 만들 수도 있습니다. 두 엔진 모두 먼저 프레임의 피벗을 빼고, Unity라면 y를 뒤집고 Pixels Per Unit으로 나눕니다.

알파 임계값: 투명으로 치는 가장 높은 알파 값. 127이면 절반 이상 불투명한 픽셀이 남음.
꼭짓점 상한: 단순화 후 폴리곤이 가질 수 있는 최대 점 수.
허용 오차: 단순화가 윤곽을 옮겨도 되는 거리(픽셀).

예시: 32 × 48 캐릭터 프레임 하나, 설정 세 가지

머리, 몸, 4px 틈을 둔 두 다리, 머리 둘레의 옅은 빛(알파 60). Nerulio 윤곽 추적기로 계산한 값:

따낸 윤곽(알파 > 127)                  꼭짓점 48개, 면적 544px²
상한 64   오차 1px       꼭짓점 16개, 면적 540px²(−0.7%), 최대 편차 1.0px, 다리 사이 유지
상한 12   오차 3.8px     꼭짓점 5개, 면적 428px²(−21%), 최대 편차 3.8px, 다리 사이 틈 사라짐
임계값 40, 상한 12      빛까지 포함: 면적 628px², 오차 2.0px에서 꼭짓점 12개

Godot, 피벗 (16, 48)    폴리곤 점 (22, 48) → 노드 공간 (22 − 16, 48 − 48) = (6, 0)

여기서는 상한 12가 꼭짓점 12개를 주지 않았습니다. 다음 오차 단계에서 이미 5개로 줄었기 때문입니다. 모양이 중요하면 상한을 올리고, 알파로 자동 생성 뒤 Studio가 알려 주는 꼭짓점 수를 비교하세요.

폴리곤이 가는 곳

대상	내보내기에 든 폴리곤	엔진에서 만들 것
Godot 4	`metadata/nerulio`의 프레임별 `collision`, 폴리곤마다 x0, y0, x1, y1 … 평탄한 목록	Area2D나 바디 아래 CollisionPolygon2D. 스크립트로 프레임마다 목록에서 피벗을 뺀 값을 `polygon`에 설정
일반 JSON	`frames[key].collision`: 폴리곤마다 [[x, y], …]	점 목록을 받는 어느 엔진이든
Unity 6	없음. 내보내기 안내가 일반 JSON을 가리킴	일반 JSON의 점으로 PolygonCollider2D, 또는 Unity 자체 Custom Physics Shape
Aseprite, Phaser, PixiJS, LÖVE, Spine, Starling, Defold, GameMaker, CSS	없음	아틀라스 옆에 일반 JSON을 함께 불러오기

결과 확인

알파로 자동 생성하면 알림에 만든 프레임 수와 꼭짓점 수가 나옵니다. 태그를 넘기며 프레임마다 윤곽을 봅니다.
빛이나 연기가 있는 프레임에서 임계값을 127과 낮은 값 사이로 바꿔 윤곽을 비교합니다.
Godot에서 Area2D 아래에 변환한 점으로 CollisionPolygon2D를 추가하고, Debug › Visible Collision Shapes를 켜서 스프라이트 위에 겹쳐 봅니다.

문제 해결

증상	유력한 원인	확인 방법	해결
폴리곤이 다리 사이 같은 틈을 메움	꼭짓점 상한 때문에 틈보다 큰 오차가 쓰임	자동 생성 후 꼭짓점 수가 상한보다 훨씬 적거나, 윤곽이 틈을 건너감	상한을 올리고(예: 24) 다시 자동 생성
빛이나 연기가 충돌 도형 안에 들어감	그 픽셀의 알파가 임계값보다 높음	임계값을 낮췄다 올리며 비교	임계값을 올려 옅은 픽셀을 투명으로 취급
엔진에서 도형이 어긋남	점은 피벗이 아니라 프레임 캔버스 왼쪽 위 기준 픽셀	예시와 점 하나를 비교	피벗을 빼기. Unity라면 y를 뒤집고 Pixels Per Unit으로도 나누기
일부 부분에만 폴리곤이 생김	프레임마다 떨어진 도형은 8개까지만 남고, 4px² 미만 조각은 버림	자동 생성 메시지에 버린 조각이나 초과 도형이 나옴	그림에서 부분을 잇거나, 빠진 폴리곤을 직접 그리기

다른 방법

방법	이럴 때 더 낫습니다
Unity Sprite Editor의 Custom Physics Shape	Unity 전용. Unity가 윤곽을 만들고 편집하며, Polygon Collider 2D가 스프라이트의 새 인스턴스에 그 윤곽을 씁니다.
프레임마다 박스나 원 하나	대부분의 플랫포머 몸체. 복잡한 폴리곤보다 가볍고 안정적입니다. 히트박스 편집기로 그리거나, 기존 스프라이트 랩의 볼록 껍질·사각형·원 옵션을 쓰세요.

이 방법의 한계

폴리곤은 내보내기에 데이터로만 들어갑니다. CollisionPolygon2D 노드나 Unity 콜라이더는 만들지 않습니다.
충돌 폴리곤은 Unity, Aseprite, 아틀라스 형식으로 가지 않습니다. 일반 JSON을 쓰세요.
도형 안의 구멍은 Studio 폴리곤에 포함되지 않습니다.

버전과 출처

윤곽 추적과 예시의 숫자는 Nerulio 자체 모듈(src/game/contour.js)에서 나왔습니다. 메타데이터가 든 Godot 번들은 Godot 4.7.2가 불러왔지만, 그 실행에서 충돌 폴리곤을 물리 도형으로 쓰지는 않았습니다. 엔진 동작은 Godot 4.7과 Unity 6 문서를 따릅니다.

참고한 공식 문서

충돌 다각형 만들기

알파 실루엣에서 충돌 다각형을 만들고 꼭짓점 수와 오차를 숫자로 확인하세요.

사용 방법

이미지 넣기
필요한 설정을 조정하고 결과 확인
다운로드로 새 파일 저장

지원 형식

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 입력 디코딩은 브라우저 지원과 추가 엔진 사용 여부에 따라 다릅니다.

이 도구로 할 수 있는 일

알파 실루엣에서 충돌 다각형을 만들고 꼭짓점 수와 오차를 숫자로 확인하세요.

처리 방식과 검증 수준

advanced · Studio Sprite workspace: measured grid (margin, spacing) or alpha islands, colour key, previewed import decisions; GIF/APNG/.aseprite decoders; timeline, pivots, boxes, alpha contour collision. 품질 검증을 진행 중입니다. Pro·Flagship 수준은 아직 입증되지 않았습니다.

저장 전에 확인하세요

볼록 분해는 하지 않습니다. 볼록 도형이 필요하면 볼록 외피를 쓰세요.

자주 묻는 질문

이 도구의 한계는 무엇인가요?

볼록 분해는 하지 않습니다. 볼록 도형이 필요하면 볼록 외피를 쓰세요.

파일이 서버에 업로드되나요?

이 도구에서 연 파일은 서버에 업로드하지 않고 사용자 기기에서 처리합니다. 커뮤니티 글에 직접 첨부하는 이미지는 별도로 업로드됩니다. 일부 엔진과 모델은 외부에서 내려받으므로 IP 주소 등 연결 정보가 해당 서비스에 전달됩니다.

작업이 자동 저장되나요?

아니요. 이미지와 편집 상태는 이 탭에 있고 미디어 결과는 기기 내 임시 저장소를 사용할 수 있습니다. 언어를 바꿔도 작업은 유지되지만 새로고침, 탭 닫기, 다른 페이지로 이동하면 사라질 수 있습니다.