개요
이 가이드는 PicoPixel의 sprite에 대해 알아야 할 모든 것을 안내합니다. sprite가 무엇인지, 언제 사용하는지, 직접 단계별로 만드는 방법, 화면에서 일어나는 일에 반응하게 만드는 방법, 같은 것을 두 번 만들지 않도록 재사용하는 방법을 다룹니다.
애니메이션 경험은 필요 없습니다. 이미지를 드래그 앤 드롭할 수 있다면 sprite를 만들 수 있습니다.
무엇인가요?
sprite는 여러 다른 애니메이션을 담고 원하는 때마다 전환할 수 있는 하나의 PicoPixel widget입니다. 각 애니메이션은 mode 또는 state라고 부르며, 예를 들면 "Idle", "Running", "Happy"가 있습니다.
비디오 게임 캐릭터처럼 생각해 보세요. 화면 위 캐릭터는 하나지만 상황에 따라 걷고, 뛰고, 손을 흔듭니다. sprite도 같습니다. 하나의 widget, 여러 모습, 어떤 것을 재생할지는 당신이 결정합니다.
PicoPixel의 강력한 event editor를 사용하면 서로 다른 state를 트리거해 sprite에 생동감을 줄 수 있습니다.
예: 애니메이션 캐릭터가 있거나 ESP32 또는 다른 LVGL 애플리케이션용 stack-chan 얼굴을 만들고 싶다고 해 봅시다. 하나의 sprite를 사용해 "Running", "Thinking", "Failed" 같은 여러 mode를 조건부로 트리거할 수 있으며, 별도 widget을 잔뜩 관리할 필요가 없습니다.
기술적으로 LVGL은 서로 다른 state를 가진 sprite를 기본 지원하지 않으므로, 우리는 LVGL animated image widget을 기반으로 자체 구현했습니다. 직접 연결 작업을 하지 않고도 편리하게 사용할 수 있습니다.
언제 sprite를 사용해야 하나요?
모든 이미지를 sprite로 만들 필요는 없습니다. 빠르게 판단하는 방법은 다음과 같습니다.
- 하나의 정지 이미지인가요? 일반 Image를 사용하세요. 전혀 움직이지 않는 것에는 sprite가 과합니다.
- 계속 반복되는 하나의 애니메이션인가요(회전하는 로더처럼)? Animated Image를 사용하세요. 더 단순하고 가볍습니다.
- 상황에 따라 바뀌어야 하는 것인가요? 작업이 성공하면 웃는 얼굴, idle에서 running으로 바뀌는 캐릭터 같은 경우가 바로 sprite의 용도입니다.
경험칙은 이렇습니다. 그래픽에 둘 이상의 "mood"나 "behavior"가 있고 그 사이를 전환하고 싶다면 sprite를 사용하세요.
sprite를 만드는 방법
- "Sprite" widget을 선택합니다. 오른쪽 사이드바에서 그 sprite의 첫 mode를 추가할 수 있습니다. 예를 들어 첫 state가 "Idle"일 수 있습니다. 나중에 triggers를 설정할 때 알아보기 쉽도록 각 state에 명확한 이름을 주세요.
- 이미지 시퀀스, 즉 이 mode를 구성하는 프레임 세트를 업로드합니다. 각 프레임은 하나의 그림이고, 순서대로 재생하면 플립북처럼 애니메이션이 됩니다.
- 해당 state의 duration을 조정할 수 있습니다. duration이 길면 천천히, 짧으면 빠르게 재생됩니다.
- 다른 state를 추가합니다. 최소 2개의 mode가 필요합니다. (애니메이션이 하나만 필요하다면 Animated Image widget을 쓰는 편이 낫습니다. 위의 When should I use a sprite?를 참고하세요.)
- Events tab/editor를 사용해 조건에 따라 서로 다른 state를 트리거하고 전환합니다. 이것이 sprite를 살아 있게 만듭니다. 다음 섹션에서 더 설명합니다.
sprite의 모든 mode에 들어가는 이미지나 프레임은 정확히 같은 치수를 공유해야 합니다. 한 프레임이 64×64이고 다른 프레임이 80×80이면 sprite가 제대로 정렬되지 않습니다. 업로드 전에 크기를 맞추세요.
프레임 수와 이미지 크기를 적당히 유지하세요. 프레임이 많고 이미지가 클수록 더 부드럽게 보이지만 디바이스 메모리를 더 많이 사용합니다. 작은 마이크로컨트롤러에서는 특히 중요합니다. 플래시 후 sprite가 보이지 않는다면 Common issues를 보세요.
sprite에 생명 불어넣기
한 state만 보여 주는 sprite는 별로 많은 일을 하지 않습니다. 진짜 핵심은 언제 전환할지 알려 주는 것이며, 이것이 Events editor의 역할입니다.
아이디어는 간단합니다. 무언가가 일어나면 state로 전환한다. 그 "something"(버튼 누름, 값 변경, 타이머 등)을 고르면 나머지는 PicoPixel이 처리합니다.
대표적인 예:
- sprite는 기본적으로 "Idle" state에서 시작합니다.
- Events editor에서 이벤트를 추가합니다. 버튼이 눌리면 sprite를 "Running" state로 전환합니다.
- 다른 이벤트를 추가합니다. 작업이 끝나면 "Happy"(또는 다시 "Idle")로 전환합니다.
그게 전부입니다. 코드를 작성하지 않아도 sprite가 사용자 동작에 반응합니다. 이런 이벤트를 원하는 만큼 연결해 정말 표현력 있는 widgets를 만들 수 있습니다.
작게 시작하세요. 먼저 두 state가 서로 전환되는 것을 만들고 preview에서 제대로 보이는지 확인한 뒤, 만족하면 state를 더 추가하세요.
sprite를 재사용하는 방법
sprite를 만들고 나면 프로젝트마다 처음부터 다시 만들고 싶지 않을 것입니다. Library 기능을 사용하면 한 번 저장하고 어떤 프로젝트에든 넣을 수 있습니다.
- 완성한 sprite widget을 오른쪽 클릭하고 "Add Library Widget"을 클릭합니다.
- Assets 탭의 library에 재사용 가능한 항목이 만들어집니다. 바로 꺼내 쓸 수 있는 widget 선반이라고 생각하세요.
- 그 library를 프로젝트 사이에서 옮기거나 팀원과 공유하려면 Library로 가서 Export를 클릭합니다.
- 이제 새 프로젝트를 만들거나 기존 workspace를 열 때 그 library를 import하고 sprite를 바로 넣을 수 있습니다. 다시 만들 필요가 없습니다.
- 모든 frames, durations, states가 원본에서 완벽히 동기화되므로 어디서 사용하든 똑같이 동작합니다.
흔한 문제
디바이스에 플래시한 뒤 sprite가 보이지 않습니다.
- 거의 항상 메모리 문제입니다. 디바이스에는 sprite의 이미지 프레임을 담을 충분한 RAM이 필요합니다.
- 이는 LVGL 설정에서 정해지며 PicoPixel이 대신 바꿀 수 없습니다. 사용하는 보드에 따라 달라집니다.
- 내보낸
README.md파일에 이 내용이 적혀 있으므로 AI assistant가 임베디드 디바이스용 SDK/LVGL 설정 업데이트를 도울 수 있습니다.
프레임이 어긋나거나 튀어 보입니다.
- 모든 state의 모든 프레임이 정확히 같은 치수인지 다시 확인하세요. 몇 픽셀 차이만 있어도 정렬이 깨집니다.
애니메이션이 너무 빠르거나 느립니다.
- 해당 state의 duration을 조정하세요. state마다 duration이 따로 있으므로 개별적으로 조정해야 할 수 있습니다.
sprite를 저장할 수 없거나 다른 state를 요구합니다.
- sprite에는 최소 2개의 state가 필요합니다. 하나만 있다면 두 번째 state를 추가하거나 Animated Image widget으로 전환하세요.
