Pixel Editor
스프라이트와 타일맵을 픽셀 단위로 다룹니다. 프레임, 어니언 스키닝, 팔레트, 타일별 충돌, 노멀 맵, 9-슬라이스, GIF와 Aseprite 내보내기까지 포함합니다.
In one line#
32×32에서도 1024×1024에서만큼 편안하게 작업할 수 있도록 만들어진 스프라이트 및 타일맵 에디터로, 애니메이션 프레임과 팔레트를 이해하는 색상 도구를 갖추고 있습니다.
The layout#
| Menu bar | File · Edit · View · Plugins |
| Mode tabs | Sprite와 Tilemap |
| Toolbar | New, undo/redo, 캔버스 크기, crop, 레이어 병합, 좌우/상하 뒤집기, grid, import, export, Save |
| Options row | 브러시 크기, 브러시 모양, opacity, split view, 프리셋 |
| Left rail | pencil, shapes, fill, gradient, text, selection, eyedropper, 색상 쌍, palette |
| 가운데 | 현재 도구와 색상이 작게 표시되는 캔버스, 1:1의 Preview |
| 오른쪽 | Layers, 그다음 Effects, Normal map, Reference, Modes |
| 아래 | 프레임 timeline, 그다음 팔레트 바 |
| Status bar | 캔버스 크기, 활성 레이어, 확대 배율 |
What you do here#
그리기#
Space + 드래그는 화면을 이동하고, 스크롤 휠은 확대/축소하며, 0은 뷰를
초기화합니다. 브러시에는 크기와 모양(기본값은 사각형), opacity가 있습니다.
프리뷰 패널은 확대해서 작업하는 동안에도 스프라이트를 1:1로 보여주는데,
이것이 픽셀 스프라이트를 정직하게 볼 수 있는 유일한 방법입니다.
레이어#
이름을 붙일 수 있고, 순서를 바꿀 수 있으며, 각각 blend mode와 opacity를 갖습니다. 레이어가 많을 때를 위한 색상 태그와 필터 상자도 있습니다. Effects는 비파괴적으로 적용됩니다.
애니메이션#
아래쪽의 timeline은 프레임들이 늘어선 띠입니다. 추가, 복제, 삭제, 순서 변경이 가능하고, 프레임마다 밀리초 단위의 duration을 설정할 수 있으며, 정방향, 역방향, ping-pong으로 재생할 수 있습니다. 표시창은 그 합계가 얼마인지 알려줍니다, 1 frame • 100 ms • ~10 fps 처럼요.
Onion은 인접한 프레임을 지금 프레임 아래에 희미하게 보여줍니다. 이것이 워크 사이클이 어긋나지 않게 유지하는 방법입니다.
색상#
팔레트 바는 배워 둘 가치가 있는 부분입니다:
| Palette | 개수와 + Add가 있는 작업 세트 |
| Recent | 최근에 고른 색상 |
| Shades | 현재 색상에서 생성된 밝음에서 어두움까지의 램프 |
| Harmony | 보색, 삼각, 유사색 제안 |
| Ramp | 직접 만들어 보관하는 램프 |
현재 색상은 hex로 편집할 수 있습니다.
타일맵#
Tilemap 탭은 스프라이트를 그리는 것에서 그것을 타일로 배치하는 것으로 전환합니다. 결과물은 Engine으로 가는데, Engine에는 레벨 자체를 위한 자신만의 타일맵 에디터가 있습니다.
노멀 맵#
Normal map 섹션은 스프라이트로부터 노멀 맵을 유도해서, 2D 스프라이트가 평평한 채로 남는 대신 Engine에서 조명을 받을 수 있게 해 줍니다.
레퍼런스#
Reference 섹션에 이미지를 넣으면, 그 위에 그림을 그리는 동안 캔버스 뒤에 자리 잡습니다.
The panels#
아홉 개가 있으며, 마지막 네 개가 스프라이트를 게임 에셋으로 바꿔주는 것들입니다:
| Tool Palette | 도구들 |
| Layers | 레이어 스택 |
| Timeline | 애니메이션 프레임 |
| Reference | 캔버스 뒤의 이미지 |
| Effects | 레이어 위의 비파괴 효과 |
| Tileset | 선택한 타일 크기로 캔버스에서 타일셋 만들기 |
| Tilemap | 그 타일들을 맵으로 배치하기 |
| Collisions | 타일별 충돌 셰이프 |
| Normal Map | 노멀 맵 유도와 편집 |
타일셋과 타일맵#
Tileset 패널은 캔버스를 타일(기본값 16px)로 자르고, Tilemap 패널은 그것들을 레이어를 가진 맵으로 배치하며, 크기도 조정할 수 있습니다.
타일맵은 .tilemap으로 저장되며, 두 가지 방식으로 내보낼 수 있습니다:
하나의 파일로, 또는 따로따로: 맵은 JSON으로, 각 타일셋은 자신만의
이미지로, 이것이 대체로 외부 엔진이 원하는 형태입니다.
충돌#
각 타일은 코드로 선언하는 대신 타일셋 위에 직접 그리는 충돌 셰이프를 갖습니다:
| Full | 타일 전체가 충돌 |
| None | 통과 가능 |
| Top / Bottom / Left / Right half | 부분 충돌 |
| Slope up / Slope down | 각도가 있는 충돌 |
Show Collisions는 이를 오버레이로 보여주며, 전체 세트는 JSON으로 내보내집니다. 여기서 이 작업을 해 두면 Engine이 플레이어가 어디를 걸을 수 있는지 이미 알고 있는 타일맵을 받게 됩니다.
노멀 맵#
Generate Normal Map은 strength와 함께 스프라이트로부터 노멀 맵을
유도해 냅니다. 그 뒤 Normal Map Editor로 노멀 방향을 손으로(P) 직접
칠할 수 있는데, 이것이 자동 처리가 틀리는 부분을 고칠 수 있는 유일한
방법입니다.
9-슬라이스와 피벗#
9-Slice guides는 UI 스프라이트에서 늘어나는 영역을 표시하고, Pivot / Origin은 스프라이트가 회전하고 고정되는 중심점을 정합니다. 둘 다 스프라이트와 함께 Engine으로 이동합니다.
대칭#
Mirror X와 Mirror Y는 양쪽을 동시에 칠합니다: 수평, 수직, 둘 다, 또는 방사형입니다.
색상 램프와 팔레트#
Color Ramp 모달은 눈대중이 아니라 제대로 램프를 만들어 주며, 팔레트는
대부분의 픽셀 아트 팔레트가 사용하는 GIMP 팔레트 형식인 **.gpl**에서
가져올 수 있습니다.
Exporting#
| 형식 | 용도 |
|---|---|
| PNG | 프레임 한 장 |
| GIF | 어디서나 통하는 애니메이션 |
| APNG | 진짜 알파를 가진 애니메이션 |
| Aseprite | 레이어를 그대로 유지한 채 Aseprite로 복귀 |
| Atlas / sprite sheet | 게임 엔진용 |
.tilemap | 맵, 하나로 합치거나 JSON과 이미지로 분리 |
Files it reads and writes#
| Native format | .editor |
| Imports | .png, .jpg, .aseprite, .tilemap, .gpl(팔레트) |
| Exports | .png, .gif, APNG, .aseprite, sprite atlas, .tilemap(합치거나 분리), 충돌 JSON |
Sending work to other studios#
만들어 내는 것: pixel art. 받아들이는 것: pixel art와 image.
pixel art는 Inkwell, Composer, Animator, Matter, Engine에서 받아들입니다: 스프라이트 시트는 파일을 거쳐 왕복할 필요 없이 곧장 게임으로 들어갈 수 있습니다.
Working with someone else#
Pixel Editor는 동작 단위로 동기화됩니다: 씬 데이터, 에셋, 애니메이션, 스크립트입니다.
Limits and common snags#
- 확대와 해상도는 다릅니다. 상태 표시줄은 실제 캔버스 크기를 보여주고, Preview는 1:1로 보여줍니다.
- 부드러운 브러시는 픽셀 브러시가 아닙니다. opacity가 100% 미만이면 가장자리에 안티에일리어싱이 생기는데, 스프라이트에서는 대체로 원하지 않는 결과입니다.
- 프레임 duration은 애니메이션이 아니라 프레임 단위입니다. 각각 100ms인 12프레임 사이클은 다른 프레임이 어떻든 ~10fps로 재생됩니다.