격자, 타일, 스프라이트 프레임용 이미지 분할

01

이미지 분할로 정확한 타일 만드는 방법

이미지 분할 — 파일 생성 전에 모든 자르기 확인

완성 격자가 중요하면 행과 열을 선택합니다. 이미지 분할 도구는 사용 영역을 고르게 나누고 남는 픽셀을 일정하게 배정해 숨은 틈을 만들지 않습니다. 2분할, 4분할, 3×3 프리셋과 최대 20×20 사용자 설정을 지원합니다.

게임 런타임, 인쇄, 스프라이트 시트가 크기를 정해 놓았다면 정확한 타일 크기를 선택합니다. 바깥 여백 뒤에서 시작해 타일 크기와 간격만큼 이동하고, 나누어떨어지지 않는 끝부분은 작은 마지막 타일로 보존합니다.

번호 미리보기는 각 사각형과 출력 이름을 연결합니다. 기본은 왼쪽 위부터, 역순은 오른쪽 아래를 01로 지정합니다. 한 타일을 먼저 확인하거나 전체 계획을 ZIP으로 만들 수 있습니다.

• 이미지 분할 — 2×1은 좌우 절반입니다.
• 이미지 분할 — 1×2는 상하 절반입니다.
• 이미지 분할 — 3×3은 아홉 개 패널입니다.
• 이미지 분할 — 정확한 크기는 스프라이트에 적합합니다.

02

이미지 분할 — 격자 또는 정확한 크기 선택

이미지 분할 — 각 자르기는 원본 픽셀과 일치

이미지 분할은 디코딩된 고유 너비와 높이로 사각형을 계산합니다. 격자 방식은 여백과 간격을 빼고 나머지를 배분하며, 정확한 방식은 지정 크기로 이동하고 끝을 보존합니다. 미리보기와 내보내기는 같은 계획을 사용합니다.

03

이미지 분할 — 원본 이미지를 브라우저에 보관

이미지 분할 — 로컬 API로 처리 업로드 방지

이미지 분할은 로컬 File을 createImageBitmap()으로 읽고 drawImage()로 각 영역을 임시 Canvas에 복사합니다. 업로드 요청이나 원격 프로젝트가 없습니다. 지우면 bitmap을 닫고 로컬 URL을 해제합니다.

04

이미지 분할 — 한 타일 또는 ZIP 저장

이미지 분할 — 형식, 품질, 이름을 명확하게

이미지 분할 출력은 PNG, JPEG, WebP입니다. PNG는 글자와 투명, JPEG는 사진, WebP는 지원 대상에 적합합니다. 개별 저장은 한 영역만, ZIP은 번호가 있는 전체 계획을 인코딩합니다.

05

이미지 분할 검증 방법

이미지 분할 — 공식 자료와 재현 가능한 좌표 검사

검증은 크기가 알려진 색상 이미지를 불러와 격자, 정확한 크기, 여백, 간격을 시험하고 좌표, 다시 연 파일 크기, ZIP 목록을 비교합니다. 소스 코드에서 네트워크 통신 기능도 별도로 검사합니다.

06

이미지 분할 — 전용 프로그램 없이 스프라이트 시트 만들기

이미지 분할 — 순서, 셀, 움직임, 좌표를 한 흐름에서 확인

이미지 분할 — 재생 순서대로 프레임을 추가하세요. 이동이나 삭제는 미리보기와 메타데이터 번호에 반영됩니다. 짧은 반복은 한 줄, 긴 시퀀스는 지나치게 넓어지지 않는 그리드가 좋습니다.

이미지 분할 — 너비와 높이가 셀을 정합니다. 전체 표시는 원본을 보존하고, 채우기는 셀을 채우며 자르고, 늘리기는 크기를 고정합니다. 간격과 바깥 여백은 x, y 좌표에 포함됩니다.

이미지 분할 — 좌표를 복사하기 전에 생성하세요. 안전한 Canvas 한도를 넘으면 이미지와 좌표를 함께 축소합니다. 따라서 CSS나 JSON은 저장된 이미지와 정확히 일치합니다.

07

이미지 분할 — 아틀라스 크기를 먼저 결정하기

이미지 분할 — 셀, 간격, 여백이 좌표를 결정

이미지 분할 — 스프라이트 시트 만들기는 내보내기 전에 배치 구조를 확인하게 합니다. 열 수가 행 바꿈을 정하고 가로·세로 방식은 한 행 또는 한 열을 고정합니다. 각 셀의 시작점은 바깥 여백에서 출발해 프레임 크기와 간격만큼 이동합니다. Canvas를 줄여야 할 때도 이미지와 좌표에 같은 최종 배율을 적용합니다.

08

이미지 분할 — 공개 전 그래픽을 브라우저 안에 유지

이미지 분할 — 스프라이트 시트 만들기는 순서가 있는 프레임을 업로드 없이 하나의 아틀라스로 묶습니다. 그리드, 가로, 세로 배치를 고르고 셀 크기, 간격, 여백, 맞춤을 정한 뒤 FPS 애니메이션을 확인하고 이미지와 정확히 일치하는 CSS 또는 JSON 좌표를 저장하세요.

이미지 분할 — 선택한 파일은 createImageBitmap()으로 읽어 로컬 Canvas에 그립니다. 미리보기는 브라우저가 만든 blob 주소를 사용합니다. 업로드 엔드포인트, 계정, 클라우드 프로젝트가 필요하지 않습니다. 작업 공간을 지우면 bitmap을 닫고 미리보기 URL을 해제하며 기기의 원본 파일은 바꾸지 않습니다.

09

이미지 분할 — CSS 또는 게임 엔진용으로 내보내기

이미지 분할 — 세 형식이 같은 아틀라스를 설명

이미지 분할 — JSON 배열은 재생 순서를 유지하고 JSON 객체는 파일 이름 검색에 적합합니다. CSS는 공통 배경 규칙과 음수 background-position을 가진 프레임별 클래스를 만듭니다. PNG는 알파를 유지하고 WebP는 품질을 조절할 수 있습니다. 모든 크기는 실제 내보낸 아틀라스를 기준으로 합니다.

10

이미지 분할 — 출력 검증 방법

이미지 분할 — 공식 명세에 따른 재현 가능한 확인

이미지 분할 — 검증은 공식 문서와 재현 가능한 브라우저 시험을 함께 사용합니다. MDN은 drawImage()와 toBlob()을, W3C는 background-position을 설명합니다. 크기와 투명도가 다른 단색 이미지를 읽고 순서와 사각형을 확인한 뒤 WebP를 내보내 148×414 픽셀을 다시 읽으며 네트워크에서 정적 자원과 로컬 blob만 구분합니다.

11

이미지 분할 — 실용적인 이미지 합치기 흐름

이미지 분할 — 여러 파일에서 예측 가능한 한 장으로

이미지 분할 — 먼저 결과 순서를 정합니다. 목록은 최종 배치를 보여 주고 원본을 바꾸지 않은 채 이동하거나 삭제할 수 있습니다. 가로는 비교, 세로는 단계, 그리드는 모음, 스마트 긴 화면은 연속 스크린샷에 맞습니다.

이미지 분할 — 원본 크기 유지, 너비 맞춤, 높이 맞춤, 동일한 셀 가운데 목적에 맞는 크기 방식을 고릅니다. 간격, 정렬, 배경은 내보내기 전에 계산되며 미리보기로 순서와 여백을 확인합니다.

이미지 분할 — 도구는 파일 선택과 드롭을 지원하고 목록에서 순서를 바꾸거나 항목을 삭제할 수 있습니다. 다운로드하기 전까지 설정을 바꿀 수 있으며 원본 파일은 덮어쓰지 않습니다.

12

이미지 분할 — 로컬 이미지 처리가 중요한 이유

이미지 분할 — 개인정보 보호를 구조에 포함

이미지 분할 — 브라우저는 이용자가 선택한 파일만 읽고 호환 이미지를 디코딩해 로컬 Canvas에 결과를 만듭니다. 계정, 원격 처리 서버, 유료 API가 필요하지 않고 핵심 흐름에서 MergeImage로 보내는 원본은 0개입니다.

이미지 분할 — 로컬 처리는 가족 사진, 청구서, 미공개 디자인, 내부 스크린샷처럼 불필요하게 전송하고 싶지 않은 자료에 유용합니다. 업로드와 재다운로드의 대기 시간도 없습니다.

이미지 분할 — 작업 공간은 30개 이미지와 파일당 20MB를 허용합니다. 결과가 한 변 12,000px 또는 80MP를 넘으면 비율대로 줄입니다. 이는 제품 안전 경계이며 모든 브라우저의 보편적 한도는 아닙니다.

13

이미지 분할 — 숨은 처리 없이 품질 조절

이미지 분할 — 내용에 맞는 출력 형식 선택

이미지 분할 — PNG는 글자, 화면, 투명 배경에 적합합니다. JPEG는 사진 용량을 줄이기 쉽지만 손실 압축이며 투명을 보존하지 않습니다. WebP는 받는 서비스가 지원할 때 품질과 용량의 균형을 잡습니다.