Übersicht
Diese Anleitung führt dich durch alles, was du über Sprites in PicoPixel wissen musst: was sie sind, wann du einen einsetzen solltest, wie du Schritt für Schritt deinen eigenen erstellst, wie du ihn auf das reagieren lässt, was auf dem Bildschirm passiert, und wie du ihn wiederverwendest, damit du dieselbe Sache nie zweimal bauen musst.
Keine Vorerfahrung mit Animationen nötig – wenn du ein Bild per Drag-and-Drop bewegen kannst, kannst du einen Sprite erstellen.
Was ist das?
Ein Sprite ist ein einzelnes PicoPixel-Widget, das mehrere verschiedene Animationen enthält und dir erlaubt, jederzeit zwischen ihnen zu wechseln. Jede Animation wird als Modus oder Zustand bezeichnet, zum Beispiel „Idle", „Running" oder „Happy".
Stell es dir wie eine Figur in einem Videospiel vor. Die Figur ist ein einzelnes Objekt auf dem Bildschirm, kann aber gehen, springen oder winken – je nachdem, was passiert. Ein Sprite funktioniert genauso: ein Widget, viele Erscheinungsbilder, und du entscheidest, welches abgespielt wird.
Mit dem leistungsstarken Event-Editor von PicoPixel kannst du verschiedene Zustände auslösen, um deinem Sprite einen Funken Leben einzuhauchen!
Beispiel: Angenommen, du hast eine animierte Figur, oder du möchtest dein eigenes Stack-chan-Gesicht für deinen ESP32 oder eine andere LVGL-Anwendung erstellen. Du kannst einen einzigen Sprite verwenden und verschiedene Modi wie „Running", „Thinking", „Failed" und mehr bedingt auslösen – alles ohne eine Menge separater Widgets jonglieren zu müssen.
Auf technischer Ebene unterstützt LVGL nativ keine Sprites mit verschiedenen Zuständen, also haben wir unsere eigene Lösung auf Basis des LVGL Animated Image-Widgets gebaut. Du bekommst den Komfort, ohne irgendetwas selbst verdrahten zu müssen.
Wann sollte ich einen Sprite verwenden?
Nicht jedes Bild muss ein Sprite sein. Hier ist eine schnelle Entscheidungshilfe:
- Ein einzelnes, stehendes Bild? Verwende ein normales Image. Sprites sind überdimensioniert für etwas, das sich nie bewegt.
- Eine Animation, die einfach für immer wiederholt (wie ein rotierender Ladekreis)? Verwende ein Animated Image. Es ist einfacher und leichtgewichtiger.
- Etwas, das sich basierend auf dem Geschehen verändern muss, ein Gesicht, das lächelt wenn eine Aufgabe erfolgreich war, oder eine Figur, die von Idle auf Running wechselt? Genau dafür ist ein Sprite gedacht.
Die Faustregel: Wenn deine Grafik mehr als eine „Stimmung" oder ein „Verhalten" hat und du zwischen ihnen wechseln möchtest, greife zu einem Sprite.
Wie erstelle ich einen Sprite?
- Wähle das „Sprite"-Widget. In der rechten Seitenleiste kannst du den ersten Modus des Sprites hinzufügen. Der erste Zustand könnte zum Beispiel „Idle" sein. Gib jedem Zustand einen eindeutigen Namen, damit du ihn später beim Einrichten von Triggern wiedererkennst.
- Lade eine Bildsequenz hoch – den Satz von Frames, aus denen dieser Modus besteht. Jeder Frame ist nur ein Bild, und sie der Reihe nach abzuspielen erzeugt die Animation, wie ein Daumenkino.
- Du kannst die Dauer für diesen bestimmten Zustand anpassen. Eine längere Dauer spielt die Animation langsamer ab; eine kürzere beschleunigt sie.
- Füge einen weiteren Zustand hinzu. Mindestens 2 Modi sind erforderlich. (Wenn du wirklich nur eine Animation brauchst, bist du mit dem Animated Image-Widget besser bedient, siehe Wann sollte ich einen Sprite verwenden? oben.)
- Verwende den Events-Tab/Editor, um bedingt zwischen deinen verschiedenen Zuständen zu wechseln und umzuschalten. Das ist es, was den Sprite lebendig wirken lässt – mehr dazu im nächsten Abschnitt.
Alle Bilder oder Frames müssen in jedem Modus eines Sprites exakt dieselben Abmessungen haben. Wenn ein Frame 64×64 und ein anderer 80×80 ist, wird der Sprite nicht korrekt ausgerichtet. Passe ihre Größe vor dem Hochladen an.
Halte die Anzahl der Frames und die Bildgröße vernünftig. Mehr Frames und größere Bilder sehen flüssiger aus, verbrauchen aber mehr Arbeitsspeicher auf deinem Gerät – etwas, das bei kleinen Mikrocontrollern zu bedenken ist. Siehe Häufige Probleme wenn dein Sprite nach dem Flashen nicht erscheint.
Deinen Sprite zum Leben erwecken
Ein Sprite, der immer nur einen Zustand zeigt, tut nicht viel. Die Magie geschieht, wenn du ihm sagst, wann er wechseln soll – und dafür ist der Events-Editor da.
Die Idee ist einfach: wenn etwas passiert, wechsle zu einem Zustand. Du wählst das „Etwas" (ein Tastendruck, eine Wertänderung, ein Timer usw.) und PicoPixel erledigt den Rest.
Ein typisches Beispiel:
- Dein Sprite startet standardmäßig im „Idle"-Zustand.
- Im Events-Editor fügst du ein Ereignis hinzu: wenn ein Button gedrückt wird, wechsle den Sprite in den „Running"-Zustand.
- Füge ein weiteres Ereignis hinzu: wenn die Aufgabe abgeschlossen ist, wechsle zu „Happy" (oder zurück zu „Idle").
Das war's – dein Sprite reagiert jetzt auf das, was der Benutzer tut, ohne dass du eine einzige Zeile Code schreiben musst. Du kannst so viele dieser Ereignisse verketten, wie du möchtest, um wirklich ausdrucksstarke Widgets zu bauen.
Fang klein an. Bringe erst zwei Zustände zum Hin- und Herschalten, bestätige in der Vorschau, dass es richtig aussieht, und füge dann weitere Zustände hinzu, wenn du mit dem Verhalten zufrieden bist.
Wie kann ich einen Sprite wiederverwenden?
Sobald du einen Sprite gebaut hast, möchtest du ihn wahrscheinlich nicht in jedem Projekt von Grund auf neu aufbauen. Die Bibliotheksfunktion ermöglicht es dir, ihn einmal zu speichern und in jedes Projekt einzufügen.
- Klicke mit der rechten Maustaste auf dein fertiges Sprite-Widget und klicke auf „Library Widget hinzufügen".
- Dadurch wird ein wiederverwendbarer Eintrag in deiner Bibliothek im Assets-Tab erstellt. Stell es dir als dein persönliches Regal mit fertigen Widgets vor.
- Um diese Bibliothek zwischen Projekten zu verschieben oder mit einem Teammitglied zu teilen, gehe zur Bibliothek und klicke auf Exportieren.
- Wenn du jetzt ein neues Projekt erstellst oder einen bestehenden Arbeitsbereich öffnest, kannst du diese Bibliothek importieren und den Sprite direkt einsetzen – kein Neuaufbau erforderlich.
- Alle Frames, Dauern und Zustände werden perfekt aus der ursprünglichen Kopie synchronisiert, die du erstellt hast, sodass er überall genau gleich funktioniert.
Häufige Probleme
Der Sprite erscheint nicht, wenn er auf das Gerät geflasht wird.
- Das ist fast immer ein Speicherproblem: dein Gerät benötigt genug RAM, um die Bild-Frames des Sprites zu halten.
- Dies wird in deiner LVGL-Konfiguration festgelegt und ist etwas, das PicoPixel nicht für dich ändern kann – es hängt von deinem spezifischen Board ab.
- Die exportierte
README.md-Datei vermerkt dies, sodass dein KI-Assistent dir helfen kann, die SDK/LVGL-Konfiguration für dein eingebettetes Gerät zu aktualisieren.
Die Frames sehen falsch ausgerichtet aus oder springen herum.
- Überprüfe, ob jeder Frame in jedem Zustand exakt dieselben Abmessungen hat. Selbst wenige Pixel Unterschied werden die Ausrichtung beeinträchtigen.
Die Animation spielt zu schnell oder zu langsam ab.
- Passe die Dauer des betroffenen Zustands an. Denke daran, dass jeder Zustand seine eigene Dauer hat, sodass du sie möglicherweise einzeln anpassen musst.
Der Sprite lässt mich nicht speichern / fordert einen weiteren Zustand.
- Ein Sprite benötigt mindestens 2 Zustände. Wenn du nur einen hast, füge entweder einen zweiten Zustand hinzu oder wechsle stattdessen zum Animated Image-Widget.
