Omówienie
Ten przewodnik prowadzi przez używanie pupili w PicoPixel: od wybrania postaci z katalogu, przez dodanie jej do własnego projektu, po sprawienie, aby reagowała na to, co robi sprzęt.
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 pupila, zobacz Jak przesłać pupila. Tutaj skupimy się na praktyce: wykorzystaniu gotowego pupila w Twoim projekcie.
Nie potrzebujesz doświadczenia w tworzeniu animacji. Jeśli potrafisz kliknąć "Add to project" i przeciągnąć widżet na obszar roboczy, możesz dać projektowi ESP32 albo LVGL żywą, reagującą postać.
Czym są pupile?
Pupil to sprite, pojedynczy widżet, który zawiera 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.
Pupil 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 jest odtwarzany i kiedy.
O to właśnie chodzi: jeden widżet, wiele zachowań, przełączanych przez Twoje warunki.
Technicznie LVGL nie ma natywnej koncepcji wielostanowego sprite'a; zbudowaliśmy ją na widżecie 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ć pupila?
Pupil 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.
Początkową inspiracją była postać towarzysząca programowaniu. Wyobraź sobie ekran podobny do Codex: postać odpoczywa, gdy myślisz, przechodzi w tryb "Review" podczas przeglądania zmian w kodzie, a w "Failed", gdy kompilacja się nie powiedzie. Jej zachowanie odzwierciedla stan aplikacji.
PicoPixel idzie dalej: animacja może reagować na dowolną zdefiniowaną akcję lub zdarzenie. 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 żądanie przekroczy limit czasu.
Jeśli projekt ma stany warte pokazania, pupil jest szybkim i ekspresyjnym sposobem na ich pokazanie, bez pisania kodu animacji.
Wybierz pupila z katalogu
Aby zacząć, utwórz konto PicoPixel, a potem przejdź do katalogu pupili 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 pupila i dodaje go bezpośrednio do listy projektów: bez konfiguracji i bez pracy z plikami.
Co właśnie dostałeś
Dodanie pupila tworzy pojedynczy projekt zawierający jeden widżet Sprite, wstępnie załadowany wszystkimi trybami tego pupila. Otwórz go, a zobaczysz sprite na obszarze roboczym 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 widżet 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 pupila do prawdziwych projektów.
Trzy sposoby użycia pupila
Osobny projekt pupila służy przede wszystkim do dostarczenia gotowej postaci. Możesz przenieść ją do własnego projektu na trzy sposoby.
1. Skopiuj i wklej warstwę
Najszybsza opcja: wybierz warstwę sprite'a w projekcie pupila, skopiuj ją, otwórz inny projekt i wklej. Wraz ze sprite’em zostaną skopiowane wszystkie jego tryby. Dobre na jednorazowe użycie; jeśli potrzebujesz tego pupila tylko w jednym miejscu, gotowe.
2. Zrób ze pupila bibliotekę (zalecane do ponownego użycia)
Jeśli będziesz używać pupila w kilku obszarach roboczych, zmień jego projekt w bibliotekę. Opublikowanie pliku udostępnia jego zasoby, w tym tego sprite'a, do importu w dowolnym obszarze roboczym zespołu.
Aby opublikować:
- W projekcie pupila otwórz kartę Assets i wybierz Add Library.
- Kliknij Publish.
Potem, aby użyć go z innego projektu:
- Otwórz nowy albo istniejący obszar roboczy.
- Wybierz Add Library.
- Podłącz bibliotekę pupila z listy Shared libraries, jak pokazano poniżej.
Po podłączeniu sprite pojawia się w Assets tego obszaru roboczego. Przeciągnij go na obszar roboczy, a załaduje się w pełni skonfigurowany, ze wszystkimi trybami pupila.
Biblioteki służą do ponownego użycia w zespole, nie do publicznego udostępniania. 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 sprzętu
Możesz też po prostu edytować właściwości projektu pupila (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 pupilem a właściwym projektem, a projekt pupila służy do prezentacji postaci, a nie jako szablon całej aplikacji. Najpierw wybierz opcję 1 albo 2.
Podłącz zdarzenia: spraw, aby pupil reagował
Pupil, który zawsze odtwarza Idle, niewiele robi. Efekt pojawia się w edytorze zdarzeń, gdzie mówisz kiedy przełączyć tryby.
Zasada jest prosta: gdy wystąpi zdarzenie, przełącz tryb. Wybierz wyzwalacz, na przykład naciśnięcie przycisku, zmianę wartości lub zdarzenie timera. Następnie dodaj akcję Set Sprite Mode i wskaż 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 pupil skacze w chwili naciśnięcia.
Wyzwalaczem może być inne zdarzenie w projekcie: odczyt czujnika, zakończenie wywołania API czy upłynięcie czasu. To samo powiązanie sprawi, że pupil na nie zareaguje. Pełny opis wyzwalaczy, źródeł i akcji znajdziesz w Korzystanie z edytora zdarzeń.
Kilka rzeczy do zapamiętania
Te wskazówki pomogą zadbać o wygląd i płynne działanie pupila na urządzeniu.
- Usuń tryby, których nie użyjesz. To mocno zalecane. Każdy tryb zajmuje pamięć dodatkowymi klatkami. Usuwanie nieużywanych trybów ma szczególne znaczenie na płytkach z niewielką ilością RAM lub pamięci flash; usuń każdy tryb, którego nie planujesz wyzwalać.
- Nie zapomnij o zdarzeniach. Pupil 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. Animacje klatkowe 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 na animacje klatkowe. Jeśli sprite nie pojawia się po wgraniu programu, prawie zawsze to jest powód.
Sprite’y mogą zajmować dużo pamięci. Na małym mikrokontrolerze pupil 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 na animacje klatkowe.
Dokąd dalej
- Czym jest sprite?, koncepcja stojąca za pupilami: tryby, klatki i czasy trwania.
- Korzystanie z edytora zdarzeń, wyzwalacze i akcje sterujące zachowaniem pupila.
- Przewodnik po bibliotekach i komponentach wielokrotnego użytku, opublikuj pupila raz i używaj wszędzie.
- Jak przesłać pupila, stwórz i udostępnij społeczności własnego unikalnego pupila.
- Galeria pupili, przeglądaj pupile społeczności i weź kolejnego.
