Overzicht
Deze gids loopt door alles wat je moet weten over sprites in PicoPixel: wat ze zijn, wanneer je er een gebruikt, hoe je er zelf stap voor stap een bouwt, hoe je hem laat reageren op wat er op het scherm gebeurt en hoe je hem hergebruikt zodat je nooit twee keer hetzelfde hoeft te bouwen.
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 die meerdere verschillende animaties bevat en je laat wisselen wanneer je wilt. Elke animatie heet een mode of state, bijvoorbeeld "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, veel looks, en jij kiest welke wordt afgespeeld.
Met PicoPixel's krachtige event editor kun je verschillende states triggeren om je sprite een vonk leven te geven.
Voorbeeld: stel dat je een geanimeerd personage hebt, of je eigen stack-chan-gezicht wilt maken voor je ESP32 of andere LVGL-applicatie. Je kunt één sprite gebruiken en conditioneel modes zoals "Running," "Thinking," "Failed" en meer triggeren, zonder een stapel losse widgets te beheren.
Technisch ondersteunt LVGL geen sprites met verschillende states van zichzelf, dus hebben we onze eigen variant gebouwd op basis van de LVGL animated image-widget. Je krijgt het gemak zonder alles zelf te bedraden.
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. Sprites zijn te veel voor iets dat nooit beweegt.
- 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.
Vuistregel: als je graphic meer dan één "mood" of "behavior" heeft en je ertussen wilt wisselen, pak dan een sprite.
Hoe maak je een sprite?
- Selecteer de "Sprite"-widget. In de rechterzijbalk kun je de eerste mode van die sprite toevoegen. Misschien is de eerste state bijvoorbeeld "Idle." Geef elke state een duidelijke naam zodat je hem later herkent wanneer je triggers instelt.
- Upload een afbeeldingsreeks, de set frames waaruit deze mode bestaat. Elk frame is één plaatje, en ze op volgorde afspelen maakt de animatie, als een flipbook.
- Je kunt de duur voor die specifieke state aanpassen. Een langere duur speelt de animatie langzamer af; een kortere maakt hem sneller.
- Voeg nog een state toe. Minimaal 2 modes zijn vereist. (Als je maar één animatie nodig hebt, ben je beter af met de Animated Image-widget; zie Wanneer gebruik ik een sprite? hierboven.)
- Gebruik de Events-tab/editor om je verschillende states conditioneel te triggeren en ertussen te schakelen. Dit laat de sprite levend voelen; meer daarover in de volgende sectie.
Alle afbeeldingen of frames moeten exact dezelfde afmetingen hebben in elke mode 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
Een sprite die altijd maar één state toont, doet niet veel. De magie gebeurt wanneer je hem vertelt wanneer hij moet wisselen, en daarvoor is de Events editor.
Het idee is simpel: wanneer iets gebeurt, schakel naar een state. 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 state "Idle".
- In de Events editor voeg je een event toe: wanneer een knop wordt ingedrukt, schakel de sprite naar de state "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 states heen en weer wisselen, bevestig in de preview dat het goed oogt en voeg daarna meer states toe.
Hoe hergebruik je een sprite?
Als je een sprite hebt gebouwd, wil je hem waarschijnlijk niet in elk project opnieuw maken. De Library-functie laat je hem één keer opslaan en in elk project neerzetten.
- Rechtsklik op je voltooide sprite-widget en klik op "Add Library Widget."
- Dit maakt een herbruikbare entry in je library op de Assets-tab. Zie het als je persoonlijke plank met kant-en-klare widgets.
- Om die library tussen projecten te verplaatsen of met een teamgenoot te delen, ga je naar Library en klik je op Export.
- Wanneer je nu een nieuw project maakt of een bestaande workspace opent, kun je die library importeren en de sprite direct plaatsen: geen herbouwen nodig.
- Alle frames, durations en states synchroniseren perfect vanuit de originele kopie, dus hij gedraagt zich overal hetzelfde.
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 state exact dezelfde afmetingen heeft. Zelfs een paar pixels verschil gooien de uitlijning om.
De animatie speelt te snel of te langzaam.
- Pas de duration op de betreffende state aan. Elke state heeft zijn eigen duration, dus je moet ze mogelijk afzonderlijk tunen.
De sprite laat me niet opslaan / vraagt om nog een state.
- Een sprite heeft minstens 2 states nodig. Als je er maar één hebt, voeg dan een tweede state toe of stap over op de Animated Image-widget.
