Omówienie
Ten przewodnik wyjaśnia wszystko, co trzeba wiedzieć o sprite'ach w PicoPixel: czym są, kiedy po nie sięgnąć, jak zbudować własny krok po kroku, jak sprawić, żeby reagował na to, co dzieje się na ekranie, i jak używać go ponownie, aby nie budować tej samej rzeczy dwa razy.
Nie potrzebujesz wcześniejszego doświadczenia z animacją. Jeśli potrafisz przeciągnąć i upuścić obraz, potrafisz zrobić sprite.
Co?
Sprite to pojedynczy widget PicoPixel, który zawiera kilka różnych animacji i pozwala przełączać się między nimi w dowolnym momencie. Każda animacja nazywa się trybem albo stanem, na przykład "Idle", "Running" albo "Happy".
Pomyśl o postaci w grze. Na ekranie jest jedną rzeczą, ale może chodzić, skakać albo machać zależnie od sytuacji. Sprite działa tak samo: jeden widget, wiele wyglądów, a Ty decydujesz, który ma być odtwarzany.
Za pomocą mocnego edytora zdarzeń PicoPixel możesz wyzwalać różne stany i dodać sprite'owi życia.
Przykład: masz animowaną postać albo chcesz zrobić własną twarz stack-chan dla ESP32 lub innej aplikacji LVGL. Możesz użyć jednego sprite'a i warunkowo przełączać tryby takie jak "Running", "Thinking", "Failed" i inne, bez żonglowania wieloma oddzielnymi widgetami.
Technicznie LVGL nie obsługuje natywnie sprite'ów z różnymi stanami, więc zbudowaliśmy własne rozwiązanie na bazie widgetu animated image LVGL. Dostajesz wygodę bez ręcznego łączenia wszystkiego.
Kiedy używać sprite'a?
Nie każdy obraz musi być sprite'em. Oto szybki sposób wyboru:
- Pojedynczy, nieruchomy obraz? Użyj zwykłego Image. Sprite to za dużo dla czegoś, co nigdy się nie rusza.
- Jedna animacja zapętlona bez końca (np. obracający się loader)? Użyj Animated Image. Jest prostszy i lżejszy.
- Coś, co ma zmieniać się zależnie od sytuacji, twarz, która uśmiecha się po sukcesie zadania, albo postać przełączająca się z bezczynności na bieg? Do tego służy sprite.
Zasada praktyczna: jeśli grafika ma więcej niż jeden "nastrój" albo "zachowanie" i chcesz między nimi przełączać, wybierz sprite.
Jak utworzyć sprite?
- Wybierz widget "Sprite". W prawym pasku bocznym możesz dodać pierwszy tryb tego sprite'a. Na przykład pierwszy stan może nazywać się "Idle". Nadaj każdemu stanowi jasną nazwę, aby później rozpoznać go podczas ustawiania wyzwalaczy.
- Prześlij sekwencję obrazów, czyli zestaw klatek tworzących ten tryb. Każda klatka to jeden obraz, a odtwarzanie ich po kolei tworzy animację, jak flipbook.
- Możesz dostosować czas trwania tego konkretnego stanu. Dłuższy czas odtwarza animację wolniej, krótszy ją przyspiesza.
- Dodaj kolejny stan. Wymagane są co najmniej 2 tryby. (Jeśli potrzebujesz tylko jednej animacji, lepiej użyć widgetu Animated Image; zobacz Kiedy używać sprite'a? powyżej.)
- Użyj karty/edytora Events, aby warunkowo wyzwalać i przełączać różne stany. To sprawia, że sprite wydaje się żywy; więcej o tym w następnej sekcji.
Wszystkie obrazy lub klatki muszą mieć dokładnie te same wymiary we wszystkich trybach sprite'a. Jeśli jedna klatka ma 64×64, a inna 80×80, sprite nie wyrówna się poprawnie. Dopasuj rozmiary przed przesłaniem.
Utrzymuj rozsądną liczbę klatek i rozmiar obrazów. Więcej klatek i większe obrazy wyglądają płynniej, ale zużywają więcej pamięci urządzenia, co ma znaczenie na małych mikrokontrolerach. Zobacz Typowe problemy, jeśli sprite nie pojawia się po flashowaniu.
Ożywianie sprite'a
Sprite, który zawsze pokazuje jeden stan, nie robi zbyt wiele. Magia zaczyna się wtedy, gdy powiesz mu, kiedy ma się przełączać; do tego służy edytor Events.
Pomysł jest prosty: gdy coś się wydarzy, przełącz na stan. Wybierasz "coś" (naciśnięcie przycisku, zmianę wartości, timer itd.), a PicoPixel zajmuje się resztą.
Typowy przykład:
- Sprite domyślnie zaczyna w stanie "Idle".
- W edytorze Events dodajesz zdarzenie: gdy przycisk zostanie naciśnięty, przełącz sprite na stan "Running".
- Dodajesz kolejne zdarzenie: gdy zadanie się skończy, przełącz na "Happy" (albo z powrotem na "Idle").
To wszystko. Sprite reaguje teraz na działania użytkownika bez pisania kodu. Możesz łączyć dowolnie wiele takich zdarzeń, aby budować naprawdę ekspresyjne widgety.
Zacznij mało. Najpierw przełączaj dwa stany tam i z powrotem, sprawdź w podglądzie, czy wygląda dobrze, a potem dodawaj kolejne stany.
Jak ponownie używać sprite'a?
Gdy zbudujesz sprite, pewnie nie chcesz tworzyć go od zera w każdym projekcie. Funkcja Library pozwala zapisać go raz i wstawiać do dowolnego projektu.
- Kliknij prawym przyciskiem gotowy widget sprite i wybierz "Add Library Widget".
- Tworzy to wpis wielokrotnego użytku w bibliotece na karcie Assets. Pomyśl o tym jak o osobistej półce gotowych widgetów.
- Aby przenieść tę bibliotekę między projektami albo udostępnić ją członkowi zespołu, przejdź do Library i kliknij Export.
- Gdy tworzysz nowy projekt albo otwierasz istniejący workspace, możesz zaimportować tę bibliotekę i wstawić sprite bez przebudowywania.
- Wszystkie klatki, czasy trwania i stany synchronizują się idealnie z oryginału, więc sprite zachowuje się tak samo wszędzie.
Typowe problemy
Sprite nie pojawia się po flashowaniu na urządzenie.
- To prawie zawsze problem pamięci: urządzenie potrzebuje dość RAM, aby przechować klatki obrazów sprite'a.
- Ustawia się to w konfiguracji LVGL i PicoPixel nie może zmienić tego za Ciebie; zależy to od konkretnej płytki.
- Wyeksportowany plik
README.mdopisuje tę kwestię, więc Twój asystent AI może pomóc zaktualizować konfigurację SDK/LVGL dla urządzenia.
Klatki są źle wyrównane albo skaczą.
- Sprawdź, czy każda klatka w każdym stanie ma dokładnie te same wymiary. Nawet kilka pikseli różnicy zepsuje wyrównanie.
Animacja odtwarza się za szybko albo za wolno.
- Dostosuj czas trwania danego stanu. Pamiętaj, że każdy stan ma własny czas trwania, więc czasem trzeba stroić je osobno.
Sprite nie pozwala mi go zapisać / prosi o kolejny stan.
- Sprite potrzebuje co najmniej 2 stanów. Jeśli masz tylko jeden, dodaj drugi stan albo przełącz się na widget Animated Image.
