Omówienie
Ten przewodnik prowadzi przez używanie zwierzaków w PicoPixel: od wybrania postaci z katalogu, przez dodanie jej do własnego projektu, po sprawienie, aby reagowała na to, co robi hardware.
Artykuł opiera się bezpośrednio na dwóch innych przewodnikach. Jeśli chcesz poznać podstawową koncepcję, najpierw przeczytaj Czym jest sprite?. Jeśli chcesz opublikować własnego zwierzaka, zobacz Jak przesłać zwierzaka. Ten artykuł jest pośrodku: to praktyczny tutorial używania zwierzaka, którego ktoś już zbudował.
Nie potrzebujesz wcześniejszej pracy z animacją. Jeśli potrafisz kliknąć "Add to project" i przeciągnąć widget na canvas, możesz dać projektowi ESP32 albo LVGL żywą, reagującą postać.
Czym są zwierzaki?
Zwierzak to sprite, pojedynczy widget, który trzyma kilka różnych animacji i pozwala przełączać się między nimi na żądanie. Każda animacja jest trybem (nazywanym też stanem albo fazą): "Idle", "Run right", "Jumping" itd.
Zwierzak z paczek w stylu Codex albo Petdex zwykle ma od razu 9 trybów, na przykład Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running i Review. Każdy tryb to własna mała pętla klatek, a Ty decydujesz, który gra i kiedy.
O to właśnie chodzi: jeden widget, wiele zachowań, przełączanych przez Twoje warunki.
Technicznie LVGL nie ma natywnej koncepcji wielostanowego sprite'a; zbudowaliśmy ją na widgetcie LVGL animated image, aby wszystkie tryby były podłączone za Ciebie. Pełne tło znajdziesz w Czym jest sprite?.
Po co używać zwierzaka?
Zwierzak dodaje projektowi ESP32 albo LVGL iskry życia. Zamiast statycznej twarzy albo jednej zapętlonej animacji, sprite reaguje: przełącza tryby według tego, co naprawdę dzieje się na urządzeniu.
Pierwotną inspiracją był towarzysz kodowania. Wyobraź sobie ekran w stylu Codex, gdzie mała postać reaguje na sesję programowania: jest bezczynna, gdy myślisz, pokazuje "Review", gdy czyta diff, i "Failed", gdy build się psuje. Zwierzak odbija to, co robi aplikacja.
PicoPixel idzie dalej: każdą akcję albo wyzwalacz, który możesz wyrazić, możesz animować. Kilka przykładów:
- Przełącz na Jumping, gdy odczyt temperatury przekroczy próg.
- Odtwarzaj Running, gdy pobierasz dane z API, a potem wróć do Idle, gdy odpowiedź dotrze.
- Uruchom Waving, gdy czujnik wykryje ruch, albo Failed, gdy request przekroczy limit czasu.
Jeśli projekt ma stany warte pokazania, zwierzak jest szybkim i ekspresyjnym sposobem na ich pokazanie, bez pisania kodu animacji.
Wybierz zwierzaka z katalogu
Aby zacząć, utwórz konto PicoPixel, a potem przejdź do katalogu zwierzaków pod adresem picopixel.io/pets.
Przeglądaj galerię, znajdź postać, która Ci się podoba, i otwórz jej stronę szczegółów.
Na stronie szczegółów kliknij Add to project. PicoPixel importuje zwierzaka i wrzuca go prosto do dashboardu: bez konfiguracji i bez pracy z plikami.
Co właśnie dostałeś
Dodanie zwierzaka tworzy pojedynczy projekt zawierający jeden widget Sprite, wstępnie załadowany wszystkimi trybami tego zwierzaka. Otwórz go, a zobaczysz sprite na canvasie oraz wszystkie tryby w prawym panelu: Idle, Run right, Run left, Waving, Jumping i resztę, każdy z własną liczbą klatek i czasem trwania.
Jeśli widget Sprite jest dla Ciebie nowy, przewodnik Czym jest sprite? wyjaśnia tryby, klatki i czasy trwania dokładniej.
Przełącz się na kartę Assets, a znajdziesz tego samego sprite'a zapisanego jako komponent wielokrotnego użytku w lokalnej bibliotece projektu. To klucz do przeniesienia zwierzaka do prawdziwych projektów.
Trzy sposoby użycia zwierzaka
Własny projekt zwierzaka jest tak naprawdę tylko pojazdem dostawczym. Oto trzy sposoby przeniesienia go do projektu, który chcesz budować.
1. Skopiuj i wklej warstwę
Najszybsza opcja: wybierz warstwę sprite'a w projekcie zwierzaka, skopiuj ją, otwórz inny projekt i wklej. Sprite przychodzi ze wszystkimi trybami. Dobre na jednorazowe użycie; jeśli potrzebujesz tego zwierzaka tylko w jednym miejscu, gotowe.
2. Zrób ze zwierzaka bibliotekę (zalecane do ponownego użycia)
Jeśli będziesz używać zwierzaka w kilku workspace'ach, zmień jego projekt w bibliotekę. Opublikowanie pliku udostępnia jego zasoby, w tym tego sprite'a, do importu w dowolnym workspace zespołu.
Aby opublikować:
- W projekcie zwierzaka otwórz kartę Assets i wybierz Add Library.
- Kliknij Publish.
Potem, aby użyć go z innego projektu:
- Otwórz nowy albo istniejący workspace.
- Wybierz Add Library.
- Podłącz bibliotekę zwierzaka z listy Shared libraries, jak pokazano poniżej.
Po podłączeniu sprite pojawia się w Assets tego workspace. Przeciągnij go na canvas, a załaduje się w pełni skonfigurowany, ze wszystkimi trybami zwierzaka.
Biblioteki służą do ponownego użycia w zespole, nie do publikowania w świecie. Dokładnie co zawiera biblioteka, jak działa publikowanie i gdzie pojawiają się połączone biblioteki, opisuje Przewodnik po bibliotekach i komponentach wielokrotnego użytku.
3. Zmień właściwości projektu, aby pasowały do hardware
Możesz też po prostu edytować właściwości projektu zwierzaka (rozmiar ekranu, docelową płytkę), aby pasowały do urządzenia, i budować bezpośrednio w nim. To działa, ale nie jest zalecaną ścieżką: tracisz czysty podział między zwierzakiem a właściwym projektem, a projekt zwierzaka jest ustawiony jako showcase, nie template. Najpierw wybierz opcję 1 albo 2.
Podłącz zdarzenia: spraw, aby zwierzak reagował
Zwierzak, który zawsze odtwarza Idle, niewiele robi. Efekt pojawia się w edytorze zdarzeń, gdzie mówisz kiedy przełączyć tryby.
Wzorzec jest prosty: gdy coś się stanie, przełącz na tryb. Wybierasz wyzwalacz, naciśnięcie przycisku, zmianę wartości, timer, i akcję Set Sprite Mode, a potem tryb do odtworzenia.
Na zrzucie poniżej dodaliśmy zdarzenie na przycisku JUMP!: gdy zostaje kliknięty, akcja ustawia tryb sprite'a na Jumping, więc zwierzak skacze w chwili naciśnięcia.
Zamień wyzwalacz na dowolną rzecz z projektu, odczyt czujnika, zakończenie API call, odpalenie timera, a to samo połączenie sprawi, że zwierzak zareaguje. Pełny opis wyzwalaczy, źródeł i akcji znajdziesz w Korzystanie z edytora zdarzeń.
Kilka rzeczy do zapamiętania
Kilka praktyk pomoże zwierzakowi dobrze wyglądać i działać na prawdziwym hardware.
- Usuń tryby, których nie użyjesz. To mocno zalecane. Każdy tryb to więcej klatek w pamięci, a nieużywane są czystym narzutem. Przycinanie ma największe znaczenie na płytkach z ograniczoną pamięcią lub storage; usuń każdy tryb, którego nie planujesz wyzwalać.
- Nie zapomnij o zdarzeniach. Zwierzak sam z siebie nic nie robi. Użyj edytora zdarzeń, aby dodać warunek dla każdego trybu, który chcesz odtwarzać, tak jak połączyliśmy przycisk JUMP! powyżej.
- Pilnuj pamięci urządzenia. Animated images potrzebują dość RAM, aby trzymać klatki. Wskaż asystentowi kodowania plik
README.mdw wyeksportowanym kodzie LVGL, bo dokumentuje to, albo upewnij się, że samodzielnie przydzieliłeś dość pamięci dla animated images. Jeśli sprite nie pojawia się po flashowaniu, prawie zawsze to jest powód.
Sprite'y mogą być ciężkie. Na małym mikrokontrolerze zwierzak z wszystkimi 9 trybami i dużymi klatkami może wyczerpać pamięć i po prostu się nie wyrenderować. Zostaw tylko tryby, których naprawdę używasz, i potwierdź, że konfiguracja LVGL przydziela dość RAM dla animated images.
Dokąd dalej
- Czym jest sprite?, koncepcja stojąca za zwierzakami: tryby, klatki i czasy trwania.
- Korzystanie z edytora zdarzeń, każdy wyzwalacz i akcja do reagowania zwierzaka.
- Przewodnik po bibliotekach i komponentach wielokrotnego użytku, opublikuj zwierzaka raz i używaj wszędzie.
- Jak przesłać zwierzaka, stwórz i udostępnij społeczności własnego unikalnego zwierzaka.
- Pets gallery, przeglądaj zwierzaki społeczności i weź kolejnego.
