Tutorial de sprite sheet com o GPT Image 2.5: da referência de personagem a um PNG transparente de 16 frames e a GIF

Conclusão principal (TL;DR): Com o fundo transparente nativo e o condicionamento por referência visual do GPT Image 2.5, os programadores de jogos indie conseguem gerar em minutos sprite sheets 2D de personagens com 16 frames, prontas para protótipo. Este tutorial mostra como criar uma personagem original, um “estafeta mecânico”, gerar uma sprite sheet em grelha 4×4 com 63,9% de transparência alfa RGBA verdadeira verificada, cortar as células de forma matemática, fixar os pontos de pivô ao plano do chão e compilar 4 GIFs animados, tudo por apenas 14,73 créditos ($0.073 USD).

👉 Cria sprite sheets transparentes na PoYo.

---

Showcase do resultado final

A sheet gerada tem 4 sequências de ação distintas numa tela de 1024 × 1024 px, subdividida de forma uniforme em dezasseis células transparentes de 256 × 256 px:

• 📥 Transfere a sheet PNG transparente original de 1024 × 1024
• 📦 Transfere o kit de sprites completo (16 PNGs individuais, 4 GIFs, JSON do atlas)

---

Passo 1: define um desenho de personagem de alto contraste

Antes de gerares os frames de ação, fixa uma referência visual da personagem inconfundível.

Boas práticas de desenho para sprites 2D:

1. Blocos de cor marcados: boné azul-marinho, sobretudo azul-petróleo, lenço cor de laranja ferrugem, bolsa bege e botas castanhas. Fronteiras de cor nítidas ajudam os modelos de difusão a ancorar os assets em poses pequenas.
2. Minimiza o microruído: evita filigranas microscópicas ou correntes finas que degeneram em cintilação visual nas resoluções baixas dos jogos.
3. Perfil de corpo inteiro: garante que os dois pés contactam firmemente com o chão para estabelecer uma linha de base visual estável.

---

Passo 2: pede um layout de grelha fixo com transparência nativa

No teu prompt, especifica de forma rígida o número de células, a orientação das poses e os artefactos proibidos.

Template de prompt:

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 do pedido à API da 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"
  }
}

Funcionalidade-chave: definir "background": "transparent" instrui o GPT Image 2.5 a renderizar diretamente canais alfa RGBA verdadeiros, dispensando as ferramentas manuais de remoção de fundo.

---

Passo 3: inspeciona a transparência alfa verdadeira

Muitas ferramentas de IA devolvem falsos fundos brancos ou padrões de xadrez simulados. Fizemos uma verificação ao nível do pixel no PNG devolvido:

• Medição do canal alfa: exatamente 63,9% de todos os píxeis são totalmente transparentes (Alfa = 0);
• Anti-aliasing: os contornos da personagem apresentam gradientes alfa suaves ao nível do subpíxel, o que elimina o efeito de orla quando compostos sobre fundos claros ou escuros;
• Regra de formato de ficheiro: só o PNG e o WebP preservam a transparência alfa. Guardar como JPEG descarta de forma permanente a camada alfa.

---

Passo 4: corte matemático e fixação do pivô

1. Matemática do corte da grelha

Para uma sheet 4×4 com 1024 × 1024 px:

$$\text{Tamanho da célula} = 256 \times 256\text{ px}$$

$$\text{X} = \text{Índice da coluna (0 a 3)} \times 256, \quad \text{Y} = \text{Índice da linha (0 a 3)} \times 256$$

2. ⚠️ Aviso crítico: nunca centres automaticamente as caixas delimitadoras!

Um erro comum nos scripts é centrar automaticamente a caixa delimitadora visível de cada frame:

• Se os frames de salto forem centrados automaticamente, o movimento vertical é destruído e a personagem treme no mesmo sítio;
• Se as passadas da corrida forem centradas automaticamente, o impulso horizontal oscila de forma errática.

A abordagem correta: Mantém uma moldura de coordenadas fixa e fixa o ponto de pivô na linha de base, ao centro e em baixo (para células de 256×256, usa X: 128, Y: 250). As alturas dos saltos são representadas naturalmente pelo desvio vertical da personagem dentro da célula.

• 📥 Transfere os metadados completos de corte do atlas de sprites (JSON)

---

Passo 5: pré-visualizações da animação e inspeção no motor

Montar os frames cortados a 8 FPS (125 ms por frame) dá quatro loops de animação reativos:

1. Ciclo de caminhada

Andar de quatro frames com passos assentes no chão:

2. Ciclo de corrida

Inclinação dinâmica para a frente com passadas alongadas:

3. Sequência de salto

Antecipação do agachamento, trajetória no ar e compressão da aterragem:

4. Apresentação interativa da carta

Mão na bolsa, carta na mão, entrega e regresso ao repouso:

---

6. Custos totais de produção

---

Perguntas frequentes (FAQ)

O GPT Image 2.5 exporta ficheiros GIF animados diretamente?

Não. Devolve ficheiros PNG RGBA estáticos. O corte em frames de animação e a codificação de GIFs ou de Unity Animation Clips são tratados localmente, através de motores de jogo ou scripts.

Porquê gerar os 16 frames numa única grelha 4×4 em vez de 16 chamadas à API separadas?

Gerar numa única sheet aproveita a autoatenção global do modelo para manter detalhes de guarda-roupa, proporções da cabeça e estilo artístico uniformes em todas as poses, com menor custo.

Esta sprite sheet pode ser importada diretamente para o Unity ou o Godot?

Sim. No Unity, define o Sprite Mode como Multiple, abre o Sprite Editor, escolhe Grid by Cell Size (256×256), define o Pivot como Bottom e corta em segundos.