Übersicht
Diese Anleitung führt dich durch die Verwendung von Pets in PicoPixel – vom Auswählen eines Pets im Verzeichnis bis hin zum Einbinden in dein eigenes Projekt und der Verknüpfung mit den Zuständen deiner Hardware.
Diese Anleitung baut direkt auf zwei anderen Anleitungen auf. Wenn du das zugrundeliegende Konzept verstehen möchtest, lies zuerst Was ist ein Sprite?. Wenn du ein eigenes Pet veröffentlichen möchtest, lies So reichst du ein Pet ein. Hier geht es um den praktischen Einsatz eines bereits fertigen Pets in deinem Projekt.
Keine vorherigen Animationskenntnisse erforderlich. Wenn du auf „Zum Projekt hinzufügen" klicken und ein Widget auf eine Arbeitsfläche ziehen kannst, kannst du deinem ESP32- oder LVGL-Projekt eine lebendige, reagierende Figur geben.
Was sind Pets?
Ein Pet ist ein Sprite – ein einzelnes Widget, das mehrere verschiedene Animationen enthält und dir ermöglicht, bei Bedarf zwischen ihnen zu wechseln. Jede Animation ist ein Modus (auch als Zustand oder Phase bezeichnet): „Idle", „Run right", „Jumping" und so weiter.
Pets aus Paketen für Codex oder Petdex werden in der Regel mit 9 Modi ausgeliefert, zum Beispiel Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running und Review. Jeder Modus ist seine eigene kleine Schleife aus Frames, und du entscheidest, welcher wann abgespielt wird.
Das ist das Grundprinzip: ein Widget, viele Verhaltensweisen, umgeschaltet durch deine Bedingungen.
Auf technischer Ebene hat LVGL kein natives Konzept eines Sprites mit mehreren Zuständen – wir haben es auf dem LVGL-Widget für animierte Bilder aufgebaut, sodass du die einzelnen Modi direkt nutzen kannst. Sieh dir Was ist ein Sprite? für den vollständigen Hintergrund an.
Warum ein Pet verwenden?
Pets sind dazu gedacht, deinem ESP32- oder LVGL-Projekt Leben einzuhauchen. Anstatt eines statischen Gesichts oder einer einzelnen Endlosanimation reagiert der Sprite: Er wechselt die Modi basierend darauf, was tatsächlich auf deinem Gerät passiert.
Die ursprüngliche Inspiration ist ein Code-Begleiter. Stelle dir einen Codex-artigen Bildschirm vor, auf dem eine kleine Figur auf deine Arbeit am Code reagiert: ruhig, während du nachdenkst, „Review", während sie einen Diff liest, „Failed", wenn ein Build fehlschlägt. Das Pet spiegelt wider, was die App gerade tut.
PicoPixel geht noch weiter: Jede Aktion oder jeder Auslöser, den du ausdrücken kannst, lässt sich animieren. Ein paar Beispiele:
- Wechsle zu Jumping, wenn ein Temperaturwert einen Schwellenwert überschreitet.
- Spiele Running ab, während Daten von einer API abgerufen werden, und wechsle zurück zu Idle, wenn die Antwort eintrifft.
- Löse Waving aus, wenn ein Sensor Bewegung erkennt, oder Failed, wenn eine Anfrage das Zeitlimit überschreitet.
Wenn dein Projekt Zustände hat, die es wert sind, gezeigt zu werden, ist ein Pet eine schnelle, ausdrucksstarke Möglichkeit, sie darzustellen – ohne selbst Animationscode zu schreiben.
Ein Pet aus dem Verzeichnis auswählen
Um loszulegen, erstelle ein PicoPixel-Konto und gehe dann zum Pets-Verzeichnis unter picopixel.io/pets.
Durchsuche die Galerie, finde eine Figur, die dir gefällt, und öffne deren Detailseite.
Klicke auf der Detailseite des Pets auf Zum Projekt hinzufügen. PicoPixel importiert das Pet und legt es direkt in deinem Dashboard ab – ohne weitere Einrichtung oder manuelles Importieren von Dateien.
![Ein neu importiertes Clawdex-Pet im Abschnitt „Drafts" des PicoPixel-Dashboards](use-pets/pet-in-drafts.webp "„Zum Projekt hinzufügen" importiert das Pet, es erscheint unter „Drafts" in deinem Dashboard.")
Was im importierten Projekt enthalten ist
Das Hinzufügen eines Pets erstellt ein neues Projekt mit einem Sprite-Widget, das bereits alle Modi des Pets enthält. Öffne es und du siehst den Sprite auf der Arbeitsfläche, mit allen Modi im rechten Panel aufgelistet – Idle, Run right, Run left, Waving, Jumping und der Rest – jeder mit seiner eigenen Frame-Anzahl und Dauer.
Wenn das Sprite-Widget selbst neu für dich ist, erklärt die Anleitung Was ist ein Sprite? Modi, Frames und Dauern im Detail.
Wechsle zum Tab Assets und du findest denselben Sprite als wiederverwendbare Komponente in der lokalen Bibliothek des Projekts gespeichert. Das ist der Schlüssel, um das Pet in deine echten Projekte zu übertragen.
Drei Wege, dein Pet zu verwenden
Das importierte Projekt dient dazu, dir das Pet mit seinen Assets bereitzustellen. Hier sind drei Möglichkeiten, es in das Projekt zu bringen, das du tatsächlich bauen möchtest.
1. Die Ebene kopieren und einfügen
Am schnellsten geht es so: Wähle den Sprite-Ebene im Pet-Projekt aus, kopiere ihn, öffne ein anderes Projekt und füge ihn ein. Alle Modi des Sprites werden mitkopiert. Gut für einen Einzelfall – wenn du dieses Pet nur an einer Stelle brauchst, bist du fertig.
2. Das Pet zu einer Bibliothek machen (empfohlen für Wiederverwendung)
Wenn du das Pet in mehreren Projekten verwenden wirst, wandle sein Projekt in eine Bibliothek um. Durch das Veröffentlichen einer Datei werden ihre Assets – einschließlich dieses Sprites – verfügbar gemacht, um überall in den Projekten deines Teams importiert zu werden.
Zum Veröffentlichen:
- Öffne im Pet-Projekt den Tab Assets und wähle Bibliothek hinzufügen.
- Klicke auf Veröffentlichen.
Dann, um es aus einem anderen Projekt zu verwenden:
- Öffne deinen neuen oder bestehenden Arbeitsbereich.
- Wähle Bibliothek hinzufügen.
- Verknüpfe die Bibliothek des Pets aus der Liste der geteilten Bibliotheken, wie unten gezeigt.
Einmal verknüpft, erscheint der Sprite in den Assets dieses Projekts. Ziehe ihn auf die Arbeitsfläche und er wird vollständig vorkonfiguriert geladen – mit jedem Modus dieses Pets bereit zur Verwendung.
Bibliotheken dienen der Wiederverwendung innerhalb deines Teams, nicht der Veröffentlichung für die Welt. Was eine Bibliothek genau enthält, wie das Veröffentlichen funktioniert und wo verknüpfte Bibliotheken erscheinen, erklärt der Leitfaden zu Bibliotheken und wiederverwendbaren Komponenten.
3. Die Projekteigenschaften an deine Hardware anpassen
Du kannst auch einfach die Eigenschaften des Pet-Projekts (Bildschirmgröße, Ziel-Board) an dein Gerät anpassen und direkt darin bauen. Das funktioniert, ist aber nicht der empfohlene Weg: Du verlierst die saubere Trennung zwischen dem Pet und deinem eigentlichen Projekt, und das Pet-Projekt ist als Demonstration eingerichtet, nicht als Vorlage. Greife zuerst auf Option 1 oder 2 zurück.
Das Pet auf Ereignisse reagieren lassen
Ein Pet, das immer nur Idle abspielt, tut nicht viel. Im Event-Editor legst du fest, wann das Pet den Modus wechseln soll.
Das Muster ist einfach: Wenn etwas passiert, wechsle den Modus. Du wählst den Auslöser – ein Tastendruck, eine Wertänderung, ein Timer – und wählst die Aktion Set Sprite Mode, dann den abzuspielenden Modus.
Im Screenshot unten haben wir ein Event auf einem JUMP!-Button hinzugefügt: Wenn er geklickt wird, setzt die Aktion den Modus des Sprites auf Jumping, sodass das Pet in dem Moment springt, in dem der Button gedrückt wird.
Tausche den Auslöser gegen das aus, was dein Projekt bereitstellt – einen Sensorwert, einen abgeschlossenen API-Aufruf, einen ausgelösten Timer – und dieselbe Verknüpfung lässt das Pet darauf reagieren. Eine vollständige Übersicht über Auslöser, Quellen und Aktionen findest du unter Den Event-Editor verwenden.
Ein paar Dinge, die du im Hinterkopf behalten solltest
Mit ein paar einfachen Maßnahmen sieht dein Pet auch auf echter Hardware gut aus und läuft zuverlässig.
- Entferne nicht verwendete Modi. Dies wird dringend empfohlen. Jeder Modus, den du behältst, bedeutet mehr Frames im Speicher, und nicht verwendete sind unnötiger Speicherverbrauch. Das Kürzen ist am wichtigsten auf Boards mit begrenztem Speicher oder begrenzter Kapazität – lösche jeden Modus, den du nicht verwenden möchtest.
- Vergiss die Events nicht. Ein Pet tut von sich aus nichts. Verwende den Event-Editor, um eine Bedingung für jeden Modus hinzuzufügen, den du abspielen möchtest – so wie wir den JUMP!-Button oben verknüpft haben.
- Beachte den Speicher deines Geräts. Animierte Bilder benötigen genug RAM, um ihre Frames zu speichern. Weise deinen KI-Programmierassistenten auf die
README.md-Datei im exportierten LVGL-Code hin – sie dokumentiert dies – oder stelle sicher, dass du selbst genug Speicher für animierte Bilder zugewiesen hast. Wenn ein Sprite nach dem Flashen nicht erscheint, liegt es fast immer daran.
Sprites können speicherintensiv sein. Auf einem kleinen Mikrocontroller kann ein Pet mit allen 9 Modi und großen Frames den Speicher erschöpfen und einfach nicht gerendert werden. Reduziere es auf die Modi, die du tatsächlich verwendest, und stelle sicher, dass deine LVGL-Konfiguration genug RAM für animierte Bilder zuweist.
Nächste Schritte
- Was ist ein Sprite? – Das Konzept hinter Pets: Modi, Frames und Dauern.
- Den Event-Editor verwenden – Jeder Auslöser und jede Aktion, um ein Pet reagieren zu lassen.
- Leitfaden zu Bibliotheken und wiederverwendbaren Komponenten – Veröffentliche ein Pet einmal und verwende es überall.
- So reichst du ein Pet ein – Erstelle und teile dein eigenes einzigartiges Pet mit der Community.
- Pets-Galerie – Durchstöbere die Community-Pets und hole dir noch eines.
