Ü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 dem Reagieren auf alles, was deine Hardware gerade tut.
Diese Anleitung baut direkt auf zwei anderen Guides 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. Dieser Artikel steht in der Mitte: Er ist das praktische, praxisorientierte Tutorial für das Verwenden eines bereits erstellten Pets.
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, auf Abruf zwischen ihnen zu wechseln. Jede Animation ist ein Modus (auch als Zustand oder Phase bezeichnet): „Idle", „Run right", „Jumping" und so weiter.
Pets aus Codex- oder Petdex-artigen Paketen 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 Multi-Zustands-Sprites – wir haben es auf dem LVGL-Widget für animierte Bilder aufgebaut, sodass alle Modi für dich verdrahtet sind. 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 Coding-Session 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 jeglichen Animationscode von deiner Seite.
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 – kein Setup, kein Datei-Gemanschel.
![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 du gerade erhalten hast
Das Hinzufügen eines Pets erstellt ein einzelnes Projekt mit einem Sprite-Widget, das mit jedem Modus vorgeladen ist, den das Pet mitbringt. Ö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 der Guide 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 eigene Projekt des Pets ist wirklich nur ein Liefervehikel. Hier sind drei Möglichkeiten, es in das Projekt zu bringen, das du tatsächlich bauen möchtest.
1. Den Layer kopieren und einfügen
Die schnellste Option: Wähle den Sprite-Layer im Pet-Projekt aus, kopiere ihn, öffne ein anderes Projekt und füge ihn ein. Der Sprite kommt mit allen Modi intakt an. 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 Workspaces 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 Workspaces 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 Workspace.
- 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 Workspaces. 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 Guide 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 Showcase eingerichtet, nicht als Vorlage. Greife zuerst auf Option 1 oder 2 zurück.
Verdrahten: Das Pet reagieren lassen
Ein Pet, das immer nur Idle abspielt, tut nicht viel. Die Belohnung kommt durch den Event-Editor, wo du sagst, wann die Modi gewechselt werden sollen.
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 Verdrahtung 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
Einige Praktiken sorgen dafür, dass dein Pet auf echter Hardware gut aussieht und reibungslos läuft.
- Entferne nicht verwendete Modi. Dies wird dringend empfohlen. Jeder Modus, den du behältst, bedeutet mehr Frames im Speicher, und nicht verwendete sind reiner Overhead. Das Kürzen ist am wichtigsten auf Boards mit begrenztem Speicher oder begrenzter Kapazität – lösche jeden Modus, den du nicht auslösen planst.
- 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 verdrahtet haben.
- Beachte den Speicher deines Geräts. Animierte Bilder benötigen genug RAM, um ihre Frames zu speichern. Weise deinen Coding-Assistenten 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.
Wo es weitergeht
- 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.
- Guide 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.
