Overzicht
Een pet is een geanimeerde sprite, een klein personage dat door frames loopt om tot leven te komen. Wanneer je er een indient, kan die worden uitgelicht in de community Pets gallery, zodat iedereen hem kan gebruiken en ervan kan genieten.
Er zijn twee manieren om een pet in te dienen. De snelste is via Petdex: je plakt één URL en je bent klaar. De andere is via GitHub, voor sprites die je zelf host als spritesheet en sprite.json. Je kunt een bestaande Petdex-pet indienen of een originele pet van jezelf maken.
Beide methoden zitten in de PicoPixel-app, dus je moet eerst ingelogd zijn.
Voordat je begint
Alles gebeurt in de PicoPixel-app. Zo kom je bij het indieningsscherm:
- Open de app op app.picopixel.io.
- Log in als je dat nog niet bent; aanmelden gaat via OAuth met Google of GitHub. Als je dit overslaat, krijg je een prompt voordat je kunt indienen.
- Klik op je account onderaan de linkerzijbalk.
- Kies "Your account".
- Open "Submit Sprite".
Het Submit Sprite-scherm biedt de twee methoden die hieronder worden beschreven.
Je moet ingelogd zijn om iets in te dienen. Als je niet bent aangemeld, vraagt de app je dat te doen voordat je verder kunt.
Indienen via Petdex
Dit is de aanbevolen en snelste methode. Petdex is een externe petdirectory op petdex.crafter.run waar je pets kunt bekijken, maken en hosten. Elke pet daar heeft een deelbare URL met de vorm https://petdex.crafter.run/pets/<pet-id>.
Zo dien je in:
- Zoek of maak de pet op Petdex en kopieer de URL.
- Kies op het Submit Sprite-scherm "Submit via Petdex".
- Plak de pet-URL in het veld "Petdex URL".
- Voeg iets nuttigs toe in het optionele veld "Notes".
- Verzend het.
Indienen via Petdex is de snelste route; het heeft niet voor niets de labels RECOMMENDED en FASTEST. Eén URL is alles wat je nodig hebt.
Indienen via GitHub
Gebruik deze methode wanneer je de sprite zelf host. Je levert de ruwe bestanden aan in plaats van een Petdex-link.
- Zet je spritesheet-afbeelding en een bijpassende
sprite.jsonin een openbare GitHub-repository. - Kies op het Submit Sprite-scherm "Submit via GitHub".
- Plak de repository-URL (
https://github.com/...). - Vul "Credits / Author" in zodat je werk wordt toegeschreven.
- Voeg iets nuttigs toe in het optionele veld "Notes" en verzend daarna.
De spritesheet en sprite.json moeten een specifiek formaat volgen. De volgende sectie loopt dat door.
Je eigen unieke pet maken
In plaats van een uitgelichte Petdex-pet opnieuw te gebruiken, kun je een originele maken. AI-tools zoals OpenAI Codex of AI-afbeeldingsgeneratoren zijn een praktische manier om vanaf nul een spritesheet voor een personage te maken.
Een spritesheet is één afbeelding (PNG of WebP) die is ingedeeld als een uniforme grid, een "atlas". Leg het uit met één animatie per rij en houd elk frame exact even groot.
Elk frame moet precies dezelfde breedte en hoogte hebben. Een grid met niet-passende cellen wordt niet netjes gesneden, en de animatie zal springen of breken.
Een sprite.json beschrijft het sheet. Het heeft twee hoofdonderdelen:
- atlas, de gridindeling:
columns,rows,frameWidthenframeHeight. - states, een array met animaties. Elke state heeft een
id, eenlabel, derowwaarop hij staat, het aantalframes, een optioneledurationMs, eengroupen eencaption.
Typische states zijn idle, wave, jump, run-right, run-left, running, waiting, failed en review. Een sprite heeft minstens twee states nodig, dus genereer de gebruikelijke, minimaal idle plus één beweging.
Een goede workflow: genereer de frames op een consistente grootte, plaats ze in een regelmatige grid met één animatie per rij, beschrijf daarna de grid en states in sprite.json en dien in via Petdex of GitHub.
Het concept van sprites, states, fases en hergebruik wordt uitgebreider uitgelegd in LVGL Sprites.
Wat er daarna gebeurt
Nadat je hebt ingediend, beoordeelt het PicoPixel-team je pet en kan het contact opnemen als er iets verduidelijkt moet worden. Goedgekeurde pets verschijnen in de Pets gallery, met jouw naam erbij. Vanaf daar kan iedereen in de community je creatie vinden en gebruiken.
Waar nu heen
- LVGL Sprites, hoe sprite-states en frames werken.
- Event Editor, voeg interactiviteit toe aan je ontwerpen.
- Submit a Template, deel een PicoPixel-ontwerp waarmee anderen kunnen starten.
- Report Content, markeer een pet of template die de regels overtreedt.
- Pets gallery, bekijk communitypets.