Overzicht
In deze handleiding maak je een sprite in PicoPixel: één widget met meerdere animaties. Je leert wanneer je een sprite nodig hebt, hoe je tussen animaties wisselt en hoe je dezelfde sprite in andere projecten gebruikt.
Je hebt geen eerdere animatie-ervaring nodig. Als je een afbeelding kunt slepen en neerzetten, kun je een sprite maken.
Wat?
Een sprite is één PicoPixel-widget met meerdere animaties waartussen je kunt wisselen. Elke animatie hoort bij een mode, oftewel een toestand, zoals Idle, Running of Happy.
Denk aan een personage in een videogame. Het personage is één ding op het scherm, maar het kan lopen, springen of zwaaien afhankelijk van wat er gebeurt. Een sprite werkt hetzelfde: één widget met verschillende animaties, waarbij jij kiest welke afspeelt.
In de event-editor stel je in welke gebeurtenis een andere animatie start.
Wil je bijvoorbeeld een geanimeerd personage of een stack-chan-gezicht voor je ESP32 maken? Gebruik één sprite en kies afhankelijk van de situatie een animatie zoals Running, Thinking of Failed. Je hoeft daarvoor geen losse widgets te beheren.
Technisch ondersteunt LVGL geen sprites met verschillende toestanden van zichzelf, dus hebben we onze eigen variant gebouwd op basis van de LVGL Animated Image-widget. Je krijgt het gemak zonder alle animaties zelf aan elkaar te hoeven koppelen.
Wanneer gebruik ik een sprite?
Niet elke afbeelding hoeft een sprite te zijn. Zo beslis je snel:
- Eén stilstaande afbeelding? Gebruik een gewone Image. Een sprite is daarvoor onnodig ingewikkeld.
- Eén animatie die eindeloos loopt (zoals een draaiende loader)? Gebruik een Animated Image. Die is eenvoudiger en lichter.
- Iets dat moet veranderen op basis van wat er gebeurt, een gezicht dat glimlacht wanneer een taak slaagt, of een personage dat van idle naar running schakelt? Daar is een sprite precies voor.
Gebruik een sprite als je personage of afbeelding op meerdere manieren moet kunnen reageren.
Hoe maak je een sprite?
- Voeg een Sprite-widget toe en maak rechts de eerste animatietoestand aan, bijvoorbeeld Idle. Kies herkenbare namen; die gebruik je later bij het instellen van events.
- Upload de beeldreeks voor deze toestand. Elk bestand is één frame; door de frames na elkaar af te spelen ontstaat beweging.
- Je kunt de duur voor die specifieke toestand aanpassen. Een langere duur speelt de animatie langzamer af; een kortere maakt hem sneller.
- Voeg nog een toestand toe. Een sprite heeft minstens 2 toestanden nodig. (Als je maar één animatie nodig hebt, ben je beter af met de Animated Image-widget; zie Wanneer gebruik ik een sprite? hierboven.)
- Stel op het tabblad Events in wanneer de sprite naar een andere toestand moet wisselen. Hieronder lees je hoe je die overgangen instelt.
Alle afbeeldingen of frames moeten exact dezelfde afmetingen hebben in elke toestand van een sprite. Als één frame 64×64 is en een ander 80×80, lijnt de sprite niet goed uit. Maak ze gelijk voordat je uploadt.
Houd je aantal frames en afbeeldingsgrootte redelijk. Meer frames en grotere afbeeldingen zien er vloeiender uit, maar gebruiken meer geheugen op je apparaat, iets om rekening mee te houden bij kleine microcontrollers. Zie Veelvoorkomende problemen als je sprite na het flashen niet verschijnt.
Je sprite tot leven brengen
Met de event-editor bepaal je wanneer de sprite van animatie wisselt.
Het idee is simpel: wanneer iets gebeurt, schakel naar een toestand. Je kiest het "iets" (een knopdruk, een veranderende waarde, een timer, enz.) en PicoPixel doet de rest.
Een typisch voorbeeld:
- Je sprite start standaard op de toestand "Idle".
- In de event-editor voeg je een event toe: wanneer een knop wordt ingedrukt, schakel de sprite naar de toestand "Running".
- Voeg nog een event toe: wanneer de taak klaar is, schakel naar "Happy" (of terug naar "Idle").
Dat is alles. Je sprite reageert nu op wat de gebruiker doet, zonder code van jouw kant. Je kunt zoveel van deze events koppelen als je wilt om echt expressieve widgets te bouwen.
Begin klein. Laat eerst twee toestanden heen en weer wisselen, controleer in de simulator of dat werkt en voeg daarna meer toestanden toe.
Hoe hergebruik je een sprite?
Als je een sprite hebt gebouwd, wil je hem waarschijnlijk niet in elk project opnieuw maken. Sla de sprite op in een bibliotheek om hem in andere projecten te gebruiken.
- Klik met de rechtermuisknop op de voltooide sprite en kies Add Library Widget.
- De sprite verschijnt als herbruikbaar onderdeel in de bibliotheek op het tabblad Assets.
- Open Library en klik op Export om de bibliotheek met een ander project of teamlid te delen.
- Importeer de bibliotheek in een nieuw of bestaand project. Je kunt de sprite meteen plaatsen, zonder alles opnieuw in te stellen.
- De frames, afspeelduren en toestanden blijven bij elkaar, zodat de sprite overal hetzelfde werkt.
Veelvoorkomende problemen
De sprite verschijnt niet nadat hij naar het apparaat is geflasht.
- Dit is bijna altijd een geheugenprobleem: je apparaat heeft genoeg RAM nodig om de afbeeldingsframes van de sprite vast te houden.
- Dit stel je in je LVGL-configuratie in en PicoPixel kan dat niet voor je veranderen; het hangt af van je specifieke board.
- Het geëxporteerde
README.md-bestand vermeldt dit, zodat je AI-assistent kan helpen de SDK/LVGL-configuratie voor je embedded apparaat bij te werken.
De frames lijken verkeerd uitgelijnd of springen.
- Controleer nog eens dat elk frame in elke toestand exact dezelfde afmetingen heeft. Zelfs een paar pixels verschil kunnen het beeld laten verspringen.
De animatie speelt te snel of te langzaam.
- Pas de afspeelduur op de betreffende toestand aan. Elke toestand heeft zijn eigen afspeelduur, dus je moet ze mogelijk afzonderlijk aanpassen.
De sprite laat me niet opslaan / vraagt om nog een toestand.
- Een sprite heeft minstens 2 toestanden nodig. Als je er maar één hebt, voeg dan een tweede toestand toe of stap over op de Animated Image-widget.
