Poradnik sprite sheet w GPT Image 2.5: od referencji postaci do 16-klatkowego przezroczystego PNG i GIF-a

Najważniejsze (w skrócie): Dzięki natywnemu przezroczystemu tłu GPT Image 2.5 i kondycjonowaniu referencją wizualną niezależni twórcy gier mogą w kilka minut wygenerować gotowe do prototypu 16-klatkowe sprite sheety postaci 2D. Ten poradnik pokazuje, jak stworzyć autorską postać „zegarowego kuriera”, wygenerować sprite sheet w siatce 4×4 ze zweryfikowaną prawdziwą przezroczystością RGBA na poziomie 63,9%, pociąć komórki na podstawie obliczeń, przypiąć punkty obrotu do płaszczyzny podłoża i skompilować 4 animowane GIF-y. Wszystko za zaledwie 14,73 kredytu ($0.073 USD).

👉 Twórz przezroczyste sprite sheety w PoYo.

---

Prezentacja efektu końcowego

Wygenerowany arkusz zawiera 4 odrębne sekwencje akcji na płótnie 1024 × 1024 px, równo podzielonym na szesnaście przezroczystych komórek 256 × 256 px:

• 📥 Pobierz oryginalny przezroczysty arkusz PNG 1024 × 1024
• 📦 Pobierz kompletny zestaw sprite'ów (16 osobnych plików PNG, 4 GIF-y, atlas JSON)

---

Krok 1: stwórz kontrastowy projekt postaci

Zanim wygenerujesz klatki akcji, ustal jednoznaczną wizualną referencję postaci.

Dobre praktyki projektowania sprite'ów 2D:

1. Wyraźne bloki kolorów: granatowa czapka, morski płaszcz, rdzawopomarańczowy szalik, beżowa torba i brązowe buty. Ostre granice kolorów pomagają modelom dyfuzyjnym utrzymać elementy postaci w małych pozach.
2. Ogranicz mikroszum: unikaj mikroskopijnych zdobień i cienkich łańcuszków, które przy niskich rozdzielczościach w grach zamieniają się w migotanie.
3. Sylwetka w pełnej postaci: zadbaj, żeby obie stopy mocno dotykały podłoża, co wyznacza stabilną linię bazową.

---

Krok 2: poproś o stały układ siatki z natywną przezroczystością

W prompcie sztywno określ liczbę komórek, orientację pozy i zabronione artefakty.

Szablon promptu:

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 żądania do API PoYo:

{
  "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"
  }
}

Kluczowa funkcja: ustawienie "background": "transparent" każe GPT Image 2.5 renderować prawdziwe kanały alfa RGBA bezpośrednio, z pominięciem ręcznych narzędzi do usuwania tła.

---

Krok 3: sprawdź prawdziwą przezroczystość alfa

Wiele narzędzi AI zwraca fałszywe białe tła lub imitację szachownicy. Przeprowadziliśmy weryfikację na poziomie pikseli zwróconego pliku PNG:

• Pomiar kanału alfa: dokładnie 63,9% wszystkich pikseli jest w pełni przezroczystych (alfa = 0);
• Antyaliasing: kontury postaci mają gładkie, podpikselowe gradienty alfa, co eliminuje obwódki po nałożeniu na jasne lub ciemne tło;
• Zasada dotycząca formatu pliku: tylko PNG i WebP zachowują przezroczystość alfa. Zapis jako JPEG trwale usuwa warstwę alfa.

---

Krok 4: matematyczne cięcie i przypinanie punktu obrotu

1. Matematyka cięcia siatki

Dla arkusza 4×4 o wymiarach 1024 × 1024 px:

$$\text{Rozmiar komórki} = 256 \times 256\text{ px}$$

$$\text{X} = \text{Indeks kolumny (0 do 3)} \times 256, \quad \text{Y} = \text{Indeks wiersza (0 do 3)} \times 256$$

2. ⚠️ Krytyczne ostrzeżenie: nigdy nie centruj automatycznie ramek ograniczających!

Częsty błąd w skryptach to automatyczne centrowanie widocznej ramki ograniczającej każdej klatki:

• Jeśli klatki skoku są centrowane automatycznie, ruch pionowy ginie, a postać drga w miejscu;
• Jeśli kroki biegu są centrowane automatycznie, pęd poziomy zaczyna chaotycznie się chwiać.

Prawidłowe podejście: Zachowaj stały układ współrzędnych i przypnij punkt obrotu do dolnej środkowej linii bazowej (dla komórek 256×256 użyj X: 128, Y: 250). Wysokość skoku naturalnie wynika z pionowego przesunięcia postaci w komórce.

• 📥 Pobierz kompletne metadane cięcia atlasu sprite'ów (JSON)

---

Krok 5: podglądy animacji i kontrola w silniku

Złożenie pociętych klatek przy 8 FPS (125 ms na klatkę) daje cztery responsywne pętle animacji:

1. Cykl chodu

Czteroklatkowy chód z twardym stawianiem stóp na podłożu:

2. Cykl biegu

Dynamiczne pochylenie do przodu z wydłużonymi krokami:

3. Sekwencja skoku

Przysiad przed skokiem, tor lotu i ugięcie przy lądowaniu:

4. Interaktywne podanie listu

Sięgnięcie do torby, trzymanie koperty, przekazanie i powrót do postawy neutralnej:

---

6. Łączne koszty produkcji

---

Najczęstsze pytania (FAQ)

Czy GPT Image 2.5 eksportuje animowane pliki GIF bezpośrednio?

Nie. Zwraca statyczne pliki PNG z RGBA. Cięcie na klatki animacji oraz kodowanie GIF-ów lub klipów Unity Animation Clips odbywa się lokalnie w silnikach gier lub skryptach.

Dlaczego generować wszystkie 16 klatek w jednej siatce 4×4, a nie w 16 osobnych wywołaniach API?

Generowanie w jednym arkuszu wykorzystuje globalną samouwagę modelu, dzięki czemu przy niższym koszcie zachowujesz jednolite szczegóły kostiumu, proporcje głowy i styl graficzny we wszystkich pozach.

Czy ten sprite sheet można zaimportować bezpośrednio do Unity lub Godot?

Tak. W Unity ustaw Sprite Mode na Multiple, otwórz Sprite Editor, wybierz Grid by Cell Size (256×256), ustaw Pivot na Bottom i potnij arkusz w kilka sekund.