Tutorial spritesheet met GPT Image 2.5: van personagereferentie naar transparante PNG met 16 frames en GIF

Kort samengevat (TL;DR): Met de native transparante achtergrond en de conditionering op een visuele referentie van GPT Image 2.5 kunnen onafhankelijke gameontwikkelaars in enkele minuten spritesheets van 2D-personages met 16 frames genereren die klaar zijn voor een prototype. Deze tutorial laat zien hoe je een origineel personage, een "uurwerkkoerier", maakt, een spritesheet met een raster van 4×4 genereert met geverifieerde echte RGBA-alfatransparantie van 63,9%, de cellen wiskundig opknipt, draaipunten aan het grondvlak vastzet en 4 geanimeerde GIF's samenstelt, en dat alles voor slechts 14,73 credits ($0.073).

👉 Maak transparante spritesheets op PoYo.

---

Presentatie van het eindresultaat

De gegenereerde sheet bevat 4 aparte actiesequenties op een canvas van 1024 × 1024 px, gelijkmatig verdeeld in zestien transparante cellen van 256 × 256 px:

• 📥 Download de originele transparante PNG-sheet van 1024 × 1024
• 📦 Download de complete spritekit (16 losse PNG's, 4 GIF's, atlas-JSON)

---

Stap 1: zet een personageontwerp met hoog contrast neer

Leg eerst, voordat je actieframes genereert, een onmiskenbare visuele personagereferentie vast.

Best practices voor het ontwerp van 2D-sprites:

1. Vlakke, krachtige kleurvlakken: marineblauwe pet, groenblauwe overjas, roestoranje sjaal, beige tas en bruine laarzen. Scherpe kleurgrenzen helpen diffusiemodellen om assets over kleine poses heen vast te houden.
2. Beperk microruis: vermijd microscopisch filigraan of fijne kettingen die bij lage gameresoluties verworden tot visueel geflikker.
3. Profiel van het hele lichaam: zorg dat beide voeten stevig de grond raken, zodat er een stabiele visuele basislijn ontstaat.

---

Stap 2: vraag een vast rasterlayout met native transparantie

Leg in je prompt het aantal cellen, de oriëntatie van de pose en de verboden artefacten strak vast.

Promptsjabloon:

Create a 4 by 4 sprite sheet with exactly sixteen evenly sized cells.
Use the attached character as the identity and costume reference.
Consistent right-facing side view, same character scale and ground
baseline, full body and generous transparent margins in every cell.

Row 1: four phases of a walking cycle.
Row 2: four phases of a running cycle.
Row 3: crouch, takeoff, airborne jump, landing.
Row 4: reach into satchel, hold a letter, extend letter, return to neutral.

No grid lines, floor, drop shadows, frame numbers, or labels.
1024x1024 canvas, 256x256 cells.

Payload van het PoYo-API-verzoek:

{
  "model": "gpt-image-2.5-sunburst",
  "input": {
    "prompt": "Your complete character and sprite-sheet instructions",
    "image_urls": ["https://storage.poyo.ai/blog/gpt-image-25-p0-20260910/courier-reference-b8f920940d88.webp"],
    "size": "1:1",
    "resolution": "1K",
    "quality": "high",
    "background": "transparent",
    "output_format": "png"
  }
}

Kernfunctie: met "background": "transparent" geef je GPT Image 2.5 de opdracht om echte RGBA-alfakanalen rechtstreeks te renderen, zodat je geen handmatige tools voor het verwijderen van achtergronden nodig hebt.

---

Stap 3: controleer de echte alfatransparantie

Veel AI-tools leveren valse witte achtergronden of nagemaakte dambordpatronen. Wij hebben de geleverde PNG op pixelniveau gecontroleerd:

• Meting van het alfakanaal: precies 63,9% van alle pixels is volledig transparant (alfa = 0);
• Anti-aliasing: de contouren van het personage hebben vloeiende subpixel-alfaverlopen, waardoor randen niet uitlopen wanneer je het personage tegen een lichte of donkere achtergrond samenstelt;
• Regel voor bestandsindeling: alleen PNG en WebP behouden alfatransparantie. Opslaan als JPEG gooit de alfalaag definitief weg.

---

Stap 4: wiskundig opknippen en draaipunten vastzetten

1. Wiskunde van het opknippen van het raster

Voor een sheet van 4×4 op 1024 × 1024 px:

$$\text{Celgrootte} = 256 \times 256\text{ px}$$

$$\text{X} = \text{Kolomindex (0 tot 3)} \times 256, \quad \text{Y} = \text{Rij-index (0 tot 3)} \times 256$$

2. ⚠️ Belangrijke waarschuwing: centreer begrenzingskaders nooit automatisch!

Een veelgemaakte fout in scripts is het automatisch centreren van het zichtbare begrenzingskader van elk frame:

• Als sprongframes automatisch worden gecentreerd, gaat de verticale beweging verloren en trilt het personage op één plek;
• Als stappen bij het rennen automatisch worden gecentreerd, wiebelt de horizontale beweging onregelmatig.

De juiste aanpak: Houd een vast coördinatenstelsel aan en zet het draaipunt vast op de basislijn onderaan in het midden (gebruik voor cellen van 256×256 X: 128, Y: 250). Springhoogtes komen vanzelf tot uitdrukking in de verticale verschuiving van het personage binnen de cel.

• 📥 Download de volledige metadata voor het opknippen van de spriteatlas (JSON)

---

Stap 5: voorvertoningen van de animatie en controle in de engine

Als je de opgeknipte frames met 8 FPS (125 ms per frame) samenvoegt, krijg je vier responsieve animatielussen:

1. Loopcyclus

Gang van vier frames met voetstappen op de grond:

2. Rencyclus

Dynamisch voorover leunen met lange passen:

3. Sprongsequentie

Inhurken ter voorbereiding, baan door de lucht en landingssquash:

4. Interactief aanreiken van de brief

In de tas grijpen, envelop vasthouden, overhandigen en terug naar de ruststand:

---

6. Totale productiekosten

---

Veelgestelde vragen (FAQ)

Exporteert GPT Image 2.5 rechtstreeks geanimeerde GIF-bestanden?

Nee. Het levert statische RGBA-PNG-bestanden. Het opknippen in animatieframes en het coderen van GIF's of Unity Animation Clips doe je lokaal met game-engines of scripts.

Waarom alle 16 frames in één raster van 4×4 genereren in plaats van 16 afzonderlijke API-aanroepen?

Genereren in één sheet benut de globale self-attention van het model om kostuumdetails, hoofdproporties en artstijl in elke pose uniform te houden, tegen lagere kosten.

Kan deze spritesheet rechtstreeks in Unity of Godot worden geïmporteerd?

Ja. Zet in Unity Sprite Mode op Multiple, open de Sprite Editor, kies Grid by Cell Size (256×256), zet Pivot op Bottom en knip in enkele seconden op.