스프라이트란 무엇인가요?

무엇인가요?

스프라이트는 여러 다른 애니메이션을 담고 원하는 때마다 전환할 수 있는 하나의 PicoPixel 위젯입니다. 각 애니메이션은 모드 또는 상태라고 부르며, 예를 들면 "Idle", "Running", "Happy"가 있습니다.

비디오 게임 캐릭터처럼 생각해 보세요. 화면 위 캐릭터는 하나지만 상황에 따라 걷고, 뛰고, 손을 흔듭니다. 스프라이트도 같습니다. 하나의 위젯, 여러 모습, 어떤 것을 재생할지는 직접 결정합니다.

PicoPixel의 강력한 이벤트 에디터를 사용하면 서로 다른 상태를 트리거해 스프라이트에 생동감을 줄 수 있습니다.

예: 애니메이션 캐릭터를 만들거나 ESP32 또는 다른 LVGL 애플리케이션용 stack-chan 얼굴을 만들고 싶다고 해 봅시다. 하나의 스프라이트를 사용해 "Running", "Thinking", "Failed" 같은 여러 모드를 조건부로 트리거할 수 있으며, 별도 위젯을 잔뜩 관리할 필요가 없습니다.

언제 스프라이트를 사용해야 하나요?

모든 이미지를 스프라이트로 만들 필요는 없습니다. 빠르게 판단하는 방법은 다음과 같습니다.

• 하나의 정지 이미지인가요? 일반 Image를 사용하세요. 전혀 움직이지 않는 것에는 스프라이트가 과합니다.
• 계속 반복되는 하나의 애니메이션인가요(회전하는 로더처럼)? Animated Image를 사용하세요. 더 단순하고 가볍습니다.
• 상황에 따라 바뀌어야 하는 것인가요? 작업이 성공하면 웃는 얼굴, Idle에서 Running으로 바뀌는 캐릭터 같은 경우가 바로 스프라이트의 용도입니다.

표정이나 동작을 두 가지 이상 준비하고 상황에 따라 전환하려면 스프라이트를 사용하세요.

스프라이트를 만드는 방법

1. "Sprite" 위젯을 선택합니다. 오른쪽 사이드바에서 그 스프라이트의 첫 모드를 추가할 수 있습니다. 예를 들어 첫 상태가 "Idle"일 수 있습니다. 나중에 트리거를 설정할 때 알아보기 쉽도록 각 상태에 명확한 이름을 주세요.
2. 이미지 시퀀스, 즉 이 모드를 구성하는 프레임 세트를 업로드합니다. 각 프레임은 하나의 그림이고, 순서대로 재생하면 플립북처럼 애니메이션이 됩니다.
   • 해당 상태의 재생 시간을 조정할 수 있습니다. 재생 시간이 길면 천천히, 짧으면 빠르게 재생됩니다.
3. 다른 상태를 추가합니다. 최소 2개의 모드가 필요합니다. (애니메이션이 하나만 필요하다면 Animated Image 위젯을 쓰는 편이 낫습니다. 위의 스프라이트를 사용하는 경우를 참고하세요.)
4. Events 탭의 이벤트 에디터에서 조건에 따라 상태가 전환되도록 설정합니다. 다음 섹션에서 자세히 설명합니다.

스프라이트에 생명 불어넣기

스프라이트가 상황에 반응하려면 언제 상태를 바꿀지 설정해야 합니다. 이벤트 에디터에서 이 조건을 지정할 수 있습니다.

설정 원리는 간단합니다. 특정 조건이 충족되면 원하는 상태로 전환합니다. 버튼 누름, 값 변경, 타이머 같은 조건을 정하면 나머지는 PicoPixel이 처리합니다.

대표적인 예:

1. 스프라이트는 기본적으로 "Idle" 상태에서 시작합니다.
2. 이벤트 에디터에서 이벤트를 추가합니다. 버튼이 눌리면 스프라이트를 "Running" 상태로 전환합니다.
3. 다른 이벤트를 추가합니다. 작업이 끝나면 "Happy"(또는 다시 "Idle")로 전환합니다.

그게 전부입니다. 코드를 작성하지 않아도 스프라이트가 사용자 동작에 반응합니다. 이런 이벤트를 원하는 만큼 연결해 정말 표현력 있는 위젯을 만들 수 있습니다.

스프라이트를 재사용하는 방법

완성한 스프라이트는 Library 기능으로 저장해 두고 다른 프로젝트에서도 재사용할 수 있습니다.

1. 완성한 스프라이트 위젯을 오른쪽 클릭하고 "Add Library Widget"을 클릭합니다.
   • Assets 탭의 라이브러리에 재사용 가능한 항목이 만들어집니다. 필요할 때 꺼내 쓸 수 있는 위젯 모음입니다.
2. 그 라이브러리를 프로젝트 사이에서 옮기거나 팀원과 공유하려면 Library로 가서 Export를 클릭합니다.
3. 이제 새 프로젝트를 만들거나 기존 워크스페이스를 열 때 그 라이브러리를 가져오고 스프라이트를 바로 넣을 수 있습니다. 다시 만들 필요가 없습니다.
   • 모든 프레임, 재생 시간, 상태가 원본에서 완벽히 동기화되므로 어디서 사용하든 똑같이 동작합니다.

흔한 문제

디바이스에 플래시한 뒤 스프라이트가 보이지 않습니다.

• 거의 항상 메모리 문제입니다. 디바이스에는 스프라이트의 이미지 프레임을 담을 충분한 RAM이 필요합니다.
• 이는 LVGL 설정에서 정해지며 PicoPixel이 대신 바꿀 수 없습니다. 사용하는 보드에 따라 달라집니다.
• 내보낸 README.md 파일에 이 내용이 적혀 있으므로 AI 어시스턴트가 임베디드 디바이스용 SDK/LVGL 설정 업데이트를 도울 수 있습니다.

프레임이 어긋나거나 튀어 보입니다.

• 모든 상태의 모든 프레임이 정확히 같은 치수인지 다시 확인하세요. 몇 픽셀 차이만 있어도 정렬이 깨집니다.

애니메이션이 너무 빠르거나 느립니다.

• 해당 상태의 재생 시간을 조정하세요. 상태마다 재생 시간이 따로 있으므로 개별적으로 조정해야 할 수 있습니다.

스프라이트를 저장할 수 없거나 다른 상태를 요구합니다.

• 스프라이트에는 최소 2개의 상태가 필요합니다. 하나만 있다면 두 번째 상태를 추가하거나 Animated Image 위젯으로 전환하세요.