도트 외곽선·그림자 넣기 · 1px 테두리 한 번에
스프라이트를 두르는 깔끔한 1px 외곽선과 그 아래 1px 그림자를 캔버스에서 명령 하나로 넣습니다. 비교에 쓴 스프라이트에서 외곽선은 에이스프라이트 결과와 픽셀까지 같았고, Aseprite 1.3.18에서는 손으로 여섯 단계쯤 걸리는 그림자가 여기서는 명령 하나입니다.
- .aseprite검증됨· Aseprite 1.3.18
- Palette files측정 확인· read back
- Engine bundles검증됨· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio일반 파일
이렇게 작동합니다
- 픽셀 › 외곽선은 불투명 픽셀 바깥쪽에 전경색으로 1px 테두리를 그립니다. 변으로 맞닿는(4방향) 모양이라 에이스프라이트 기본 외곽선과 같고, 원래 그림은 바뀌지 않습니다.
- 픽셀 › 드롭 섀도는 실루엣을 오른쪽 아래로 1px 옮겨 배경색으로 그림 뒤에 놓습니다. Aseprite 1.3.18에는 그림자 명령이 없어 레이어 복제, 채우기, 이동, 순서 변경, 합치기를 거쳐야 합니다.
- 선택 영역이 있으면 두 명령 모두 선택한 픽셀을 1px 넓힌 범위에만 적용되므로, 붐비는 시트에서 캐릭터 하나나 스프라이트 일부만 두를 수 있습니다.
- 캔버스 크기(Ctrl+Alt+C)로 먼저 여백을 늘리면 가장자리에 닿은 그림의 외곽선이 잘리지 않습니다. 명령 하나가 히스토리 한 단계라 통째로 되돌릴 수 있습니다.
- 여러 프레임을 한 번에 하려면 확대된 그림을 정리하는 정리 패널에서 외곽선과 그림자를 함께 넣을 수 있고, 결과는 프레임·시간·태그가 있는 새 스프라이트가 됩니다.
사용 방법
- 스프라이트나 프레임을 이 페이지에 끌어다 놓으면 첫 프레임이 열린 픽셀 작업 공간이 나옵니다.
- 그림이 가장자리에 닿아 있으면 Ctrl+Alt+C로 캔버스를 사방 1px씩 넓힙니다.
- 전경색을 외곽선 색으로 정하고 픽셀 › 외곽선을, 배경색을 그림자 색으로 정하고 픽셀 › 드롭 섀도를 실행합니다.
- 쉼표·마침표로 프레임을 넘기며 필요한 곳에 반복한 뒤, .aseprite로 저장하거나 패킹·내보내기에서 프레임을 내보냅니다.
같은 외곽선·그림자 작업의 실측
Eris의 Sumo Hulk 시트(OpenGameArt, CC0), 96×144. docs/STUDIO-PIXEL.md §6, T8.
| 단계 | Nerulio 픽셀 | Aseprite 1.3.18 |
|---|---|---|
| 여백 만들기 | 캔버스 크기 +1(명령 하나) | 캔버스 크기 +1 |
| 1px 외곽선 | 픽셀 › 외곽선: 1846px 추가 | Edit › FX › Outline: 1846px 추가, 동일 |
| 드롭 섀도 | 픽셀 › 드롭 섀도: 705px, 수작업 결과와 동일 | 명령 없음: 복제, 채우기, 1,1 이동, 아래로, 합치기(약 6단계) |
| 되돌리기 | 명령마다 히스토리 한 단계 | 동작마다 각각 되돌리기 |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 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 검색이 유일한 네트워크 요청이며 먼저 묻습니다.
자주 묻는 질문
외곽선은 스프라이트 안쪽에 그려지나요, 바깥쪽인가요?
바깥쪽입니다. 불투명 픽셀 옆의 투명 픽셀만 채우므로 그림 자체는 덮지 않습니다. 비교 시험에서 1846픽셀이 추가됐고, 같은 스프라이트에 에이스프라이트의 Edit › FX › Outline이 만든 4방향 외곽선과 정확히 같았습니다.
애니메이션 전체 프레임에 한 번에 넣을 수 있나요?
명령은 현재 프레임에 적용됩니다. 애니메이션 전체라면 프레임마다 실행하거나, 정리 패널의 외곽선·그림자 옵션을 쓰세요. 정한 범위(이 프레임, 태그, 모든 프레임)에 적용해 새 스프라이트를 만듭니다.
인덱스 스프라이트에서도 되나요?
네. 외곽선과 그림자는 팔레트의 전경색·배경색을 쓰고 셀은 다시 인덱스 PNG로 저장되므로 스프라이트는 인덱스 모드 그대로입니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).