PicoPixel에서 펫 사용하기

펫이란?

펫은 스프라이트입니다. 여러 가지 다른 애니메이션을 담고 있으며 필요할 때 그 사이를 전환할 수 있는 단일 위젯입니다. 각 애니메이션은 모드(상태 또는 단계라고도 함)입니다. 예를 들어 "Idle", "Run right", "Jumping" 등이 있습니다.

Codex 또는 Petdex 스타일 팩에서 제공되는 펫은 일반적으로 기본 9가지 모드를 포함합니다. 예를 들어 Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running, Review가 있습니다. 각 모드는 자체적인 작은 프레임 루프이며, 어떤 모드를 언제 재생할지는 직접 결정합니다.

하나의 위젯에 여러 동작을 담고, 원하는 조건에 따라 전환하는 것이 펫의 기본 원리입니다.

펫을 사용하는 이유

펫은 ESP32나 LVGL 프로젝트에서 일어나는 일을 움직임으로 표현합니다. 정적인 얼굴이나 하나의 반복 애니메이션 대신, 기기의 상태에 맞춰 모드를 바꿀 수 있습니다.

펫은 코딩을 도와주는 화면 속 캐릭터에서 출발했습니다. 작은 캐릭터가 코딩 세션에 반응하는 Codex 스타일 화면을 상상해 보세요. 생각할 때는 Idle 상태, diff를 읽을 때는 "Review" 모드, 빌드가 실패하면 "Failed"가 됩니다. 펫은 앱이 하는 일을 반영합니다.

PicoPixel은 이를 더욱 발전시킵니다. 표현할 수 있는 모든 액션이나 트리거를 애니메이션으로 만들 수 있습니다. 몇 가지 예를 들면:

• 온도 측정값이 임계값을 초과할 때 Jumping으로 전환.
• API에서 데이터를 가져오는 동안 Running 재생 후, 응답이 도착하면 Idle로 복귀.
• 센서가 움직임을 감지하면 Waving 실행, 요청이 타임아웃되면 Failed 표시.

프로젝트의 상태를 눈에 보이게 전달하고 싶다면 펫을 활용해 보세요. 애니메이션 코드를 작성하지 않아도 생동감 있게 표현할 수 있습니다.

디렉터리에서 펫 선택하기

시작하려면 PicoPixel 계정을 만들고 picopixel.io/pets의 펫 디렉터리로 이동하세요.

갤러리를 둘러보고 마음에 드는 캐릭터를 찾아 세부 페이지를 엽니다.

펫의 세부 페이지에서 프로젝트에 추가를 클릭합니다. PicoPixel이 펫을 가져와 대시보드에 바로 추가합니다. 설정도 파일 관리도 필요 없습니다.

추가된 내용 확인

펫을 추가하면 해당 펫이 제공하는 모든 모드가 미리 로드된 Sprite 위젯 하나가 포함된 단일 프로젝트가 생성됩니다. 열어보면 캔버스에 스프라이트가 표시되고, 오른쪽 패널에 모든 모드가 나열됩니다. Idle, Run right, Run left, Waving, Jumping 등 각각의 프레임 수와 재생 시간과 함께 표시됩니다.

Sprite 위젯이 처음이라면 스프라이트란 무엇인가? 가이드에서 모드, 프레임, 재생 시간에 대해 자세히 설명합니다.

Assets 탭으로 전환하면 프로젝트의 로컬 라이브러리에 재사용 가능한 컴포넌트로 저장된 같은 스프라이트를 찾을 수 있습니다. 이것이 펫을 실제 프로젝트로 옮기는 핵심입니다.

펫을 사용하는 3가지 방법

가져온 펫 프로젝트에는 재사용에 필요한 구성 요소가 들어 있습니다. 실제 작업 중인 프로젝트에 펫을 추가하는 방법은 세 가지입니다.

1. 레이어 복사 및 붙여넣기

가장 빠른 방법: 펫 프로젝트에서 스프라이트 레이어를 선택해 복사하고, 다른 프로젝트를 열어 붙여넣습니다. 스프라이트는 모든 모드를 그대로 유지한 채 추가됩니다. 일회성 사용에 적합하며, 이 펫을 한 곳에서만 사용한다면 이것으로 완료됩니다.

2. 펫을 라이브러리로 만들기 (재사용에 권장)

여러 워크스페이스에서 펫을 사용할 계획이라면 해당 프로젝트를 라이브러리로 전환하세요. 파일을 게시하면 이 스프라이트를 포함한 에셋을 팀의 워크스페이스 어디서든 가져올 수 있게 됩니다.

게시 방법:

1. 펫 프로젝트에서 Assets 탭을 열고 Add library를 선택합니다.
2. Publish를 클릭합니다.

다른 프로젝트에서 사용하려면:

1. 새 워크스페이스나 기존 워크스페이스를 엽니다.
2. Add library를 선택합니다.
3. 아래 그림과 같이 SHARED LIBRARIES 목록에서 펫의 라이브러리를 연결합니다.

연결되면 해당 워크스페이스의 Assets에 스프라이트가 표시됩니다. 캔버스로 드래그 앤 드롭하면 모든 모드가 준비된 펫이 추가됩니다.

3. 하드웨어에 맞게 프로젝트 속성 변경하기

펫 프로젝트의 속성(화면 크기, 대상 보드)을 기기에 맞게 편집하고 거기서 직접 빌드할 수도 있습니다. 이 방법은 동작하지만 권장하는 방법은 아닙니다. 펫과 실제 프로젝트 간의 깔끔한 분리가 사라지고, 펫 프로젝트는 템플릿이 아닌 쇼케이스로 설정되어 있기 때문입니다. 먼저 옵션 1이나 2를 사용하세요.

연결하기: 펫이 반응하도록 만들기

이벤트 에디터에서 언제 모드를 전환할지 지정하면, Idle 모드만 반복하던 펫이 기기의 상태에 반응하게 됩니다.

패턴은 간단합니다. 조건이 충족되면 지정한 모드로 전환합니다. 트리거(버튼 누름, 값 변경, 타이머)를 선택하고 Set Sprite Mode 액션과 재생할 모드를 지정합니다.

아래 스크린샷에서는 JUMP! 버튼에 이벤트를 추가했습니다. 클릭하면 액션이 스프라이트 모드를 Jumping으로 설정하여 버튼을 누르는 순간 펫이 점프합니다.

트리거를 프로젝트에서 제공하는 것(센서 읽기, API 호출 완료, 타이머 실행)으로 교체하면 같은 연결로 펫이 반응합니다. 트리거, 소스, 액션에 대한 전체 설명은 이벤트 에디터 사용하기를 참고하세요.

유의 사항

실제 하드웨어에서 펫이 잘 보이고 원활하게 동작하도록 하는 몇 가지 방법을 소개합니다.

• 사용하지 않을 모드를 삭제하세요. 이것은 강력히 권장됩니다. 유지하는 모드마다 더 많은 프레임이 메모리에 저장되며, 사용하지 않는 모드도 메모리를 차지합니다. 특히 스토리지나 메모리가 제한된 보드에서 중요합니다. 트리거할 계획이 없는 모드는 삭제하세요.
• 이벤트를 잊지 마세요. 펫은 스스로 아무것도 하지 않습니다. 위에서 JUMP! 버튼을 연결한 것처럼, 재생하고자 하는 각 모드에 대한 조건을 이벤트 에디터에서 추가하세요.
• 기기의 메모리에 주의하세요. 애니메이션 이미지는 프레임을 저장하기 위한 충분한 RAM이 필요합니다. 코딩 어시스턴트에게 내보낸 LVGL 코드의 README.md 파일을 참조하게 하세요. 또는 애니메이션 이미지에 충분한 메모리를 직접 할당했는지 확인하세요. 플래시 후 스프라이트가 나타나지 않으면 거의 항상 이것이 원인입니다.

다음 단계

• 스프라이트란 무엇인가?: 펫의 기본 개념 — 모드, 프레임, 재생 시간.
• 이벤트 에디터 사용하기: 펫을 반응하게 만드는 모든 트리거와 액션.
• 라이브러리 및 재사용 가능 컴포넌트 가이드: 펫을 한 번 게시하고 어디서든 재사용하기.
• 펫 제출 방법: 나만의 펫을 만들어 커뮤니티와 공유하기.
• 펫 갤러리: 커뮤니티 펫을 둘러보고 새 펫 가져오기.