도트 에디터 온라인 · 브라우저 픽셀아트 편집기
브라우저 탭에서 바로 여는 게임 스프라이트용 도트 에디터입니다. 에이스프라이트에서 익숙한 연필·페인트통·도형·선택·레이어를 그대로 쓰고, 그린 그림은 Studio의 애니메이션·패킹·엔진 내보내기와 같은 프로젝트에 있습니다. 설치가 필요 없고 그림은 기기 밖으로 나가지 않습니다.
- .aseprite검증됨· Aseprite 1.3.18
- Palette files측정 확인· read back
- Engine bundles검증됨· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio일반 파일
이렇게 작동합니다
- 에이스프라이트와 같은 키의 도구 11개: 연필(B), 지우개(E), 페인트통(G), 스포이트(I), 직선(L), 사각형·타원(U, Shift+U), 사각 선택(M), 올가미(Q), 자동 선택(W), 이동(V). 브러시는 사각·원형 1~16px이고 [ ]로 바꿉니다.
- 픽셀 퍼펙트가 기본으로 켜져 있어, 손으로 그은 계단 선에 생기는 L자 모서리를 그리는 동안 지웁니다. Shift+클릭은 마지막 점에서 직선을 긋고, 직선 도구에서 Shift는 도트용 각도로 맞춥니다.
- 명암 작업용 잉크: 알파 합성, 알파 잠금, 팔레트에서 고른 램프를 따라 한 단계씩 밝히는 셰이딩(오른쪽 버튼은 반대 방향), 농도를 정하는 디더 패턴(Bayer 2·4·8, 체커, 가로줄, 세로줄).
- 레이어마다 표시·잠금·불투명도와 에이스프라이트의 블렌드 모드 19종(에이스프라이트와 같은 계산). 아래로 합치기, 복제, 순서 변경. 대칭은 세로·가로·양쪽이며 축 위치는 숫자로 입력합니다.
- 선 하나, 채우기, 이동, 뒤집기, 팔레트 수정, 레이어 변경이 모두 히스토리에 정확히 한 단계로 남습니다. 프로젝트는 브라우저에 자동 저장되고 .nerulio 파일로 보관하며, 픽셀 메뉴에서 .aseprite·PNG로 저장합니다.
사용 방법
- PNG, 번호 붙은 프레임, GIF, .aseprite 파일을 이 페이지에 끌어다 놓거나, 빈 픽셀 작업 공간을 열어 새 스프라이트(크기, RGB 또는 인덱스)를 만듭니다.
- B로 연필을 고릅니다. 왼쪽 버튼은 전경색, 오른쪽 버튼은 배경색으로 칠하고 X로 두 색을 바꿉니다.
- Shift+N으로 명암용 레이어를 추가하고 레이어 패널에서 블렌드 모드를 정한 뒤, 선화 레이어는 잠가 실수로 칠하지 않게 합니다.
- 레이어와 팔레트를 유지하려면 픽셀 메뉴에서 .aseprite로 저장하고, 게임에 넣을 때는 패킹·내보내기를 열어 Godot·Unity·Phaser용으로 내보냅니다.
픽셀 작업 공간에서 쓰는 에이스프라이트 키
전체 목록은 Studio에서 ?를 누르세요. 그릴 때 가장 많이 쓰는 키입니다.
| 키 | 도구·명령 | 설명 |
|---|---|---|
| B / E / G | 연필 / 지우개 / 페인트통 | 페인트통: 연결 영역 또는 전체, 허용 오차, 모든 레이어 기준 |
| L / U / Shift+U | 직선 / 사각형 / 타원 | Shift는 직선을 도트 각도로, 도형을 정사각형·원으로 |
| M / Q / W | 사각 선택 / 올가미 / 자동 선택 | Shift 추가, Alt 빼기, Shift+Alt 교집합 |
| Ctrl+C / X / V | 복사 / 잘라내기 / 붙여넣기 | 붙인 픽셀은 떠 있음: 방향키 1px 이동, Enter 확정, Esc 취소 |
| Shift+N / Ctrl+J / Ctrl+E | 새 레이어 / 복제 / 아래로 합치기 | 두 레이어 중 하나라도 셀이 있는 모든 프레임을 합침 |
| [ / ] | 브러시 크기 1~16 | 사각 또는 원형 끝 |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 검증됨 Aseprite 1.3.18실제 Aseprite 명령줄이 파일을 인덱스 모드, 레이어 2개, 불투명도 160의 곱하기, 편집 불가로 잠긴 레이어 그대로 다시 열었고 프레임 픽셀이 같았습니다. |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 측정 확인 read back형식마다 쓰고 다시 읽어 같음을 확인했고, Aseprite가 만든 .gpl·.pal·.hex·.act와 실제 Adobe .ase(16색)를 읽었습니다. |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 검증됨 Godot 4.7.2 · Unity 6000.5그린 스프라이트는 패킹·내보내기에서 묶습니다. 그 엔진 파일은 실제 CC0 에셋으로 각 엔진에서 불러와 확인했습니다(49회 중 47회 통과, 실패 2회는 Phaser 3 프리셋이 피하는 Phaser 3.90 버그). |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 일반 파일어떤 도구에서도 쓰는 일반 파일이며, 엔진 실행 검증은 주장하지 않습니다. |
검증 근거
정리 벤치마크(원래 1배 그림을 아는 CC0 사례 69개): 크기를 정확히 찾은 비율 81 %(±1px 90 %), 배경 유지 시 픽셀 74.0 % 정확. 가장 나은 경쟁 도구는 크기 30 %(perfectPixel), 정확한 픽셀 44.6 %(unfake.js). Aseprite로 만든 ×4 최근접 확대는 100 %, ×3.78 쌍선형 확대는 99.7 % 정확하게 돌아왔고 두 경우 모두 크기를 자동으로 찾았습니다. 1px 외곽선과 드롭 섀도는 Aseprite 결과와 픽셀까지 같았습니다(1846px, 705px). 여기서 쓴 .aseprite는 Aseprite 1.3.18에서 인덱스 모드와 레이어·블렌드·잠금이 그대로 열립니다.
한계
- 픽셀 작업 공간에 없는 것(Aseprite에는 있음): 레이어 그룹, 링크된 셀, 타일맵 레이어, 참조 레이어, RotSprite와 선택 영역 자유 회전·크기 조절(뒤집기와 90°만), 그라디언트·스프레이·윤곽·텍스트 도구, 사용자 브러시(사각·원 1~16px), 타일 반복 그리기, Lua 스크립트와 명령줄.
- 대칭 축은 숫자로 입력하며 캔버스에서 끌 수 없습니다. 터치에서는 오른쪽 버튼이 없어 배경색은 전환 버튼이나 X로 씁니다.
- 정리: JPEG는 가깝게 돌아오지만(배경 유지 시 84 %가 ΔE 0.02 이내) 정확히 같은 경우는 드뭅니다(12 %). 모의 생성 그림은 크기를 정확히 맞힌 비율이 20 %(±1px 80 %)이고, 실제 생성 그림 7장은 하나도 자동으로 맞추지 않았습니다. 패널이 제안한 픽셀 크기를 직접 입력해야 합니다.
- 인덱스 변환은 Aseprite의 RGB 거리가 아니라 Oklab에서 가장 가까운 색을 고릅니다. 시험 스프라이트의 68 % 픽셀이 다른(눈으로 더 가까운) 색이 됐습니다. Lospec 검색이 유일한 네트워크 요청이며 먼저 묻습니다.
자주 묻는 질문
에이스프라이트 단축키가 그대로 되나요?
주요 키는 같습니다. B·E·G·I·L·U·M·Q·W·V가 같은 도구를 고르고, X는 색 바꾸기, Shift+N은 새 레이어, Ctrl+E는 아래로 합치기, Shift+H·Shift+V는 뒤집기, Enter·F3·F7은 재생·어니언 스킨·미리보기 창입니다. 키를 바꾸는 설정 화면은 아직 없습니다.
스프라이트가 얼마나 커야 느려지나요?
512×512 크기에 100프레임인 스프라이트로 시험했을 때 선을 그으면 바뀐 영역만 다시 그렸고(한 번에 약 0.03ms), 선 확정은 21~25ms, 프레임 전환은 16ms였습니다(헤드리스 Chromium 측정).
휴대폰에서도 되나요?
좁은 화면에서는 패널이 아래에서 올라오는 시트(색, 팔레트, 레이어, 정리, 점검, 타임라인, 히스토리)로 열리고, 탭 한 번이 한 픽셀을 칠합니다. 터치에는 오른쪽 버튼이 없으니 배경색은 전환 버튼이나 X를 쓰세요. 두 손가락 제스처는 테스트하지 않았습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).