개요
pet은 animated sprite, 즉 프레임을 순환하며 살아 움직이는 작은 캐릭터입니다. 제출하면 커뮤니티 Pets gallery에 소개되어 모두가 사용하고 즐길 수 있습니다.
pet을 제출하는 방법은 두 가지입니다. 가장 빠른 방법은 Petdex를 이용하는 것으로, URL 하나만 붙여 넣으면 됩니다. 다른 방법은 GitHub를 이용하는 것으로, 직접 호스팅하는 spritesheet와 sprite.json을 제출합니다. 기존 Petdex pet을 제출할 수도 있고, 나만의 오리지널 pet을 만들 수도 있습니다.
두 방법 모두 PicoPixel 앱 안에서 이루어지므로 먼저 로그인해야 합니다.
시작하기 전에
모든 과정은 PicoPixel 앱 안에서 진행됩니다. 제출 화면으로 가려면:
- app.picopixel.io에서 앱을 엽니다.
- 아직 로그인하지 않았다면 로그인합니다. 로그인은 Google 또는 GitHub OAuth입니다. 건너뛰면 제출 전에 안내가 표시됩니다.
- 왼쪽 사이드바 아래쪽의 계정을 클릭합니다.
- "Your account"를 선택합니다.
- "Submit Sprite"를 엽니다.
Submit Sprite 화면에는 아래의 두 가지 방법이 제공됩니다.
무엇이든 제출하려면 로그인해야 합니다. 로그인하지 않은 경우 계속하기 전에 앱이 안내합니다.
Petdex로 제출하기
권장되는 가장 빠른 방법입니다. Petdex는 petdex.crafter.run에 있는 외부 pet 디렉터리로, pet을 둘러보고 만들고 호스팅할 수 있습니다. 모든 pet에는 https://petdex.crafter.run/pets/<pet-id> 형태의 공유 URL이 있습니다.
제출 방법:
- Petdex에서 pet을 찾거나 만들고 URL을 복사합니다.
- Submit Sprite 화면에서 "Submit via Petdex"를 선택합니다.
- "Petdex URL" 필드에 pet URL을 붙여 넣습니다.
- 선택 사항인 "Notes" 필드에 도움이 되는 내용을 추가합니다.
- 보냅니다.
Petdex로 제출하는 것이 가장 빠른 경로입니다. RECOMMENDED와 FASTEST라고 표시된 데에는 이유가 있습니다. URL 하나면 충분합니다.
GitHub로 제출하기
sprite를 직접 호스팅할 때 사용하는 방법입니다. Petdex 링크 대신 원본 파일을 제공합니다.
- spritesheet 이미지와 그에 맞는
sprite.json을 공개 GitHub 저장소에 넣습니다. - Submit Sprite 화면에서 "Submit via GitHub"를 선택합니다.
- 저장소 URL(
https://github.com/...)을 붙여 넣습니다. - "Credits / Author"를 채워 작업물이 올바르게 표시되도록 합니다.
- 선택 사항인 "Notes" 필드에 유용한 내용을 추가한 뒤 보냅니다.
spritesheet와 sprite.json은 특정 형식을 따라야 합니다. 다음 섹션에서 설명합니다.
나만의 고유한 pet 만들기
추천 Petdex pet을 재사용하는 대신 오리지널을 만들 수 있습니다. OpenAI Codex나 AI image generators 같은 AI 도구는 캐릭터 spritesheet를 처음부터 만드는 실용적인 방법입니다.
spritesheet는 균일한 그리드로 배치된 하나의 이미지(PNG 또는 WebP)이며 "atlas"라고도 합니다. 한 행에 하나의 애니메이션을 배치하고, 모든 프레임 크기를 동일하게 유지하세요.
모든 프레임은 정확히 같은 너비와 높이를 가져야 합니다. 셀 크기가 맞지 않는 그리드는 깔끔하게 잘리지 않으며, 애니메이션이 튀거나 깨집니다.
sprite.json은 sheet를 설명합니다. 크게 두 부분이 있습니다.
- atlas, 그리드 레이아웃:
columns,rows,frameWidth,frameHeight. - states, 애니메이션 배열. 각 state에는
id,label, 위치한row,frames수, 선택 사항인durationMs,group,caption이 있습니다.
일반적인 state에는 idle, wave, jump, run-right, run-left, running, waiting, failed, review가 있습니다. sprite에는 최소 두 개의 state가 필요하므로 최소한 idle과 하나의 동작을 생성하세요.
좋은 흐름은 일관된 크기로 프레임을 만들고, 한 행에 하나의 애니메이션이 오도록 규칙적인 그리드에 배치한 뒤, sprite.json에 그리드와 states를 설명하고 Petdex 또는 GitHub로 제출하는 것입니다.
sprite의 개념, states, phases, 재사용은 LVGL Sprites에서 더 자세히 설명합니다.
다음에 일어나는 일
제출하면 PicoPixel 팀이 pet을 검토하고, 필요한 경우 추가 확인을 요청할 수 있습니다. 승인된 pet은 Pets gallery에 표시되며 당신의 크레딧이 붙습니다. 이후 커뮤니티 누구나 당신의 창작물을 찾아 사용할 수 있습니다.
다음 단계
- LVGL Sprites, sprite states와 frames가 작동하는 방식.
- Event Editor, 디자인에 인터랙션 추가하기.
- Submit a Template, 다른 사람이 시작점으로 사용할 PicoPixel 디자인 공유하기.
- Report Content, 규칙을 어기는 pet 또는 template 신고하기.
- Pets gallery, 커뮤니티 pets 둘러보기.
