Prompt e Skills para criar jogos com IA

# PROMPT-MESTRE — COLLECTATHON DE PLATAFORMA (jump 'n' run)
### Título de trabalho: **"A GRANDE COLETA"** — multi-personagem, estética cartoon-Pixar
*(título e tema finais serão definidos pelas imagens de referência enviadas)*

> **Para colar no Codex.** Briefing completo para você (agente) criar, **do zero**, um jogo de
> plataforma do subgênero **collectathon** (foco em coletar moedas e itens para avançar), com **tela
> de seleção de vários personagens**, cada um com **animações e habilidades próprias**, e **cenários
> 2D em camadas com parallax**. Estética **cartoon estilo Pixar** em personagens e cenários. Leia o
> documento inteiro antes de começar.

---

## ⛳ REGRA ZERO — TEMPO, QUALIDADE E DIVERSÃO

- **NÃO HÁ LIMITE DE TEMPO NEM DE TOKENS** para concluir esta tarefa. Use quantas etapas, gerações
  de assets e iterações forem necessárias.
- **Não corte escopo por pressa.** Gere todos os personagens, todas as animações, todas as camadas
  de cenário e todos os itens com calma e capricho.
- **A barra de qualidade é dupla: o jogo precisa ser BONITO e DIVERTIDO.** Priorize *game feel*
  gostoso, arte caprichada (cartoon-Pixar coeso) e coleta satisfatória acima de qualquer atalho.
- Se precisar escolher entre "entregar rápido" e "entregar lindo e divertido", **escolha lindo e
  divertido**.

---

## ⚠️ REGRA OBRIGATÓRIA — SPRITES PRÓPRIOS DE CADA PERSONAGEM (não negociável)

**É OBRIGATÓRIO gerar sprites para CADA personagem do elenco** (um conjunto próprio por personagem),
com:
- **Corpo inteiro** — o personagem completo, da cabeça aos pés. **NÃO** apenas rosto, busto ou retrato.
- **Todas as animações** da Seção 8.1 (idle, andar, correr, pulo, queda, aterrissagem, coleta,
  **habilidade**, dano, vitória), geradas como **sprite sheets** via `generate2dsprite`.
- A **animação específica da habilidade-assinatura** de cada personagem (Seção 8.2).

**Proibido:**
- ❌ Reaproveitar o mesmo boneco para vários personagens — **cada um tem sprites próprios e distintos**.
- ❌ Usar só o card/retrato como se fosse o personagem no jogo — card e retrato são **arte de UI**; o
  **jogável** é o **sprite de corpo inteiro animado**.
- ❌ Usar formas geométricas, silhuetas ou placeholders como visual final do personagem.

**Regra de contagem:** se houver **N personagens**, o jogo precisa ter **N conjuntos completos de
sprites de corpo inteiro animados**, cada um com a sua habilidade própria. **Sem exceção.**

---

## 0. COMO USAR ESTE PROMPT (meta-instruções para o agente)

1. **Leia primeiro os SKILL.md das skills obrigatórias** e siga o fluxo delas:
   - `generate2dsprite`
   - `generate2dmap`
2. **Divisão de ferramentas de arte:**
   - `generate2dsprite` → **sprites jogáveis e animados de corpo inteiro**: **cada personagem** (todas
     as animações + a da habilidade), inimigos, moedas, itens, power-ups, VFX, ícones de HUD.
   - `generate2dmap` → **gramado/terreno/plataformas (tilesets)** e as **camadas de cenário** de cada
     fase (fundo, intermediário, frente).
   - **Gerador de imagens disponível** → artes que **não** precisam de animação por frame: **tela de
     início/título**, **artes dos cards de seleção**, **fundo da tela de seleção**, **mapa-múndi/hub**,
     **telas de fim de fase/vitória**, painéis de história e elementos de UI.
3. **Mostre a prévia de cada sprite / sprite sheet / camada / card** conforme for gerando.
4. **Pós-processe:** recorte frames, monte sprite atlases, padronize célula, otimize paleta.
5. **Embuta tudo no projeto final** (ver Seção 6) — sprites como **Base64 / Data URL**.
6. **Rode o checklist de QA** (Seção 21) antes de declarar pronto.

**Regra de ouro:** o visual principal de TODO personagem, inimigo, item e cenário vem dos assets
gerados pelas skills/gerador de imagens. Formas geométricas só como fallback técnico (colisão, debug,
hitbox invisível) — nunca como aparência final.

---

## 1. COMO USAR AS IMAGENS DE REFERÊNCIA *(seção crítica — ler com atenção)*

Serão enviadas **imagens de referência**. Cada imagem tem um papel. Identifique o papel de cada uma e
trate assim:

| Tipo de referência | Para quê | O que gerar |
|---|---|---|
| **Cards de seleção** | Arte dos cards na tela de seleção de personagem | Ilustração estática **cartoon-Pixar** de cada personagem (via gerador de imagens), no formato de card |
| **Personagens jogáveis** | Aparência de cada herói no jogo | **Sprite sheets animados** (via `generate2dsprite`) coerentes com o card do mesmo personagem |
| **Locais / cenários** | Tema de cada fase | **Camadas de cenário** (fundo/intermediário/frente) + tileset de plataformas, recriando o local em **cartoon-Pixar** |
| **Itens extras** | Coletáveis temáticos de cada fase | **Sprites de item** (via `generate2dsprite`) baseados na referência |

**Pipeline obrigatório por imagem:**
1. **Interprete o assunto** da referência (quem/o quê/onde).
2. **Reimagine em estilo cartoon-Pixar** (Seção 4) — NÃO copie a foto/arte original 1:1; estilize:
   formas arredondadas, cores saturadas, olhos expressivos, sombreado macio, proporções simpáticas.
3. **Mantenha consistência cruzada:** o **card** e o **sprite animado** do mesmo personagem têm que
   parecer o **mesmo personagem** (mesma roupa, cores, traços). Use a mesma referência para os dois.
4. **Gere o que o papel pede:** personagem → set completo de animações; local → 3 camadas +
   tileset; item → sprite (com leve animação de brilho/giro).

**Se as imagens ainda não chegaram:** comece pela arquitetura do jogo, sistemas e *placeholders
estruturais nomeados* (ex.: `personagem_01`, `mundo_01`, `item_mundo_01`) e **deixe pronto o ponto de
encaixe** para trocar pelos assets definitivos assim que as referências forem fornecidas. Não invente
um tema fixo que conflite com as imagens — o tema final **vem das referências**.

---

## 2. VISÃO GERAL

| Campo | Valor |
|---|---|
| **Título (trabalho)** | A Grande Coleta *(final definido pelas imagens)* |
| **Gênero** | Plataforma 2D **jump 'n' run** / subgênero **collectathon** (foco em coletar) |
| **Perspectiva** | 2D em **visão lateral**, com **cenário em camadas + parallax**. **NÃO isométrico.** |
| **Estética** | **Cartoon estilo Pixar** (personagens e cenários): arredondado, saturado, expressivo |
| **Diferencial** | Vários **personagens selecionáveis**, cada um com **habilidade própria**; coletáveis **ability-gated** (replay) |
| **Plataforma** | Navegador desktop + mobile (mesmo projeto); teclado, mouse e toque |
| **Orientação** | Paisagem 16:9 (canvas base 1280×720), escala responsiva mantendo proporção |

---

## 3. CONCEITO E NARRATIVA *(moldura — preencher com o tema das imagens)*

Um grupo de heróis carismáticos parte numa **grande expedição** por mundos deslumbrantes (cada fase =
um **local** das imagens de referência, recriado em cartoon-Pixar) para **coletar os tesouros
espalhados** — moedas e itens mágicos — antes que se percam. Cada personagem tem um talento único, e
só juntando os talentos dá pra **coletar tudo** e completar a jornada.

**Tom:** alegre, colorido, aventuresco e engraçado (clima de filme de animação family-friendly).
Quando o tema das imagens chegar, ajuste nomes, história e mundos a ele.

---

## 4. ESTILO VISUAL — CARTOON / PIXAR (personagens e cenários)

- **Personagens:** corpos arredondados e simpáticos, **cabeça/olhos grandes e expressivos**,
  silhueta legível, contornos suaves, sombreado macio com luz quente, cores saturadas. Expressões
  exageradas e cativantes. Animações com **squash & stretch** (elasticidade cartoon).
- **Cenários:** profundidade pictórica, formas orgânicas, **iluminação cinematográfica** (luz de
  fundo, atmosfera, partículas no ar), paleta vibrante e coesa por mundo. Nada de visual chapado.
- **Coerência:** todos os personagens e mundos compartilham a mesma linguagem visual (mesmo nível de
  estilização, mesma "régua" de contorno e sombreado), como se fossem do mesmo filme.
- **Itens/moedas:** brilhantes, com leve animação (giro, cintilância) para chamarem o olho.
- **NÃO** é pixel art (mantenha `image-rendering` suave / antialiasing ligado).

---

## 5. PILARES DE DESIGN

1. **Coletar é o coração.** O loop principal é encontrar e pegar moedas e itens; o progresso depende
   disso (Seção 9).
2. **Personagens com personalidade e poder próprio.** Cada herói muda *como* você coleta e atravessa.
3. **Coletáveis ability-gated = replay.** Alguns itens só são alcançáveis com certas habilidades,
   incentivando voltar com outro personagem para **fechar 100%**.
4. **Profundidade em camadas (parallax).** Fundo distante, Middle Ground (com Camada de Colisão
   própria) e Foreground — ver Seção 11.
5. **Plataforma gostosa de jogar.** Pulo responsivo, *game feel* polido (Seção 10).
6. **Bonito de doer.** Estética cartoon-Pixar caprichada do menu ao fim de fase.

---

## 6. INSTRUÇÕES OBRIGATÓRIAS — GERAÇÃO E EMBUTIMENTO

### 6.1 Geração
- Personagens/inimigos/itens/moedas/power-ups/VFX/HUD → `generate2dsprite` (sprite sheets, grade
  uniforme, fundo transparente PNG, **todos os frames** das Seções 8/13/18).
- **Tileset de colisão** + **camadas/sub-camadas de cenário** (fundo, meio-trás, meio-frente, frente —
  ver Seção 11) → `generate2dmap`.
- Título, cards, fundo da seleção, hub/mapa, telas de fim de fase, UI → **gerador de imagens**.
- **Mostre a prévia** de cada asset.

### 6.2 Pós-processamento
- Recorte frames, normalize célula, monte **atlases** por personagem e por mundo, otimize paleta sem
  perder nitidez.

### 6.3 Projeto e embutimento (entregável)
- **Projeto HTML5 Canvas autocontido** (criado do zero). Entregável principal: um arquivo HTML
  jogável, **`a-grande-coleta.html`**, com **todos os sprites embutidos inline** (Base64 / Data URL),
  carregados pelo próprio JavaScript com tela de **loading**.

```js
const ASSETS = {
  p01_idle:        "data:image/png;base64,iVBORw0KGgo...",
  p01_card:        "data:image/png;base64,iVBORw0KGgo...",
  mundo01_fundo:       "data:image/png;base64,iVBORw0KGgo...",
  mundo01_meio_tras:   "data:image/png;base64,iVBORw0KGgo...",
  mundo01_tileset:     "data:image/png;base64,iVBORw0KGgo...",
  mundo01_meio_frente: "data:image/png;base64,iVBORw0KGgo...",
  mundo01_frente:      "data:image/png;base64,iVBORw0KGgo...",
  moeda:           "data:image/png;base64,iVBORw0KGgo...",
  // ...todos os demais
};
function loadImage(key){
  return new Promise(res => { const i = new Image(); i.onload=()=>res(i); i.src=ASSETS[key]; });
}
```

- **Proibições (runtime):** nenhuma lib externa, CDN, `<script src>` remoto, `fetch` remoto, áudio
  externo, imagem da internet ou URL remota em runtime. Tudo HTML/CSS/JS puro + assets inline. Áudio
  **sintetizado via Web Audio API** (Seção 17).

---

## 7. TELA DE SELEÇÃO DE PERSONAGEM

Tela dedicada, bonita e clara, **antes** de entrar na fase (e acessível no hub para troca):

- **Grade de cards** (arte cartoon-Pixar de cada personagem, do gerador de imagens). Quantidade de
  cards = nº de personagens das referências.
- **Card selecionado** mostra, em destaque: **arte grande**, **nome**, **descrição da habilidade**,
  e **mini-stats** (ex.: Velocidade / Pulo / Habilidade) em barrinhas.
- **Prévia animada** do personagem selecionado (rodando a animação `idle`/`andar`).
- Navegação por **teclado (setas + Enter)**, **mouse (clique)** e **toque (tap)**.
- Botão **CONFIRMAR**. Efeito sonoro alegre ao trocar/selecionar.
- **Bloqueio/desbloqueio (opcional, recomendado):** alguns personagens começam bloqueados e são
  desbloqueados coletando o suficiente — reforça o foco em coleta.

---

## 8. PERSONAGENS E HABILIDADES *(template — um bloco por personagem da referência)*

**OBRIGATÓRIO:** para **cada personagem** das imagens, gere um **conjunto próprio e completo de sprites de CORPO INTEIRO animados** (todas as animações da tabela 8.1) e atribua **uma habilidade-assinatura** com a sua animação (Seção 8.2).

### 8.1 Set de animações por personagem (`generate2dsprite`)

| Chave (ex. p01_) | Animação | Frames | Célula |
|---|---|---|---|
| `p01_idle` | Parado, respirando | 4–6 | 256×256 |
| `p01_andar` | Caminhada | 6 | 256×256 |
| `p01_correr` | Corrida | 6 | 256×256 |
| `p01_pulo` | Impulso + subida | 3 | 256×256 |
| `p01_queda` | Caindo | 2 | 256×256 |
| `p01_aterrissa` | Aterrissagem (squash) | 2 | 256×256 |
| `p01_coleta` | Reação ao pegar item | 3 | 256×256 |
| `p01_habilidade` | Animação da habilidade | 4–6 | 256×256 |
| `p01_dano` | Levou dano / recuo | 2 | 256×256 |
| `p01_vitoria` | Comemoração | 4–6 | 256×256 |

### 8.2 Arquétipos de habilidade

- **Planador:** segura o pulo para planar e alcançar itens distantes.
- **Arranque (dash):** investida horizontal rápida.
- **Ímã de moedas:** atrai moedas próximas por alguns segundos.
- **Pulo duplo/triplo:** alcança plataformas muito altas.
- **Baque no chão (ground pound):** quebra blocos e revela tesouros.
- **Encolher:** passa por passagens secretas estreitas.
- **Nadador:** melhor na água.
- **Grude na parede:** escala paredes.
- **Escudo:** ignora um dano.
- **Velocista:** corre mais rápido.

---

## 9. MECÂNICA PRINCIPAL — COLLECTATHON

### 9.1 O que se coleta
- **Moedas:** colecionável base e abundante.
- **Itens temáticos do mundo:** coletáveis especiais de cada fase (5–8 por fase).
- **Coletável principal da fase:** 1 grande tesouro por fase.
- **Segredos:** áreas e coletáveis escondidos.

### 9.2 Coletar é o que faz avançar
- **Portão de progresso:** a saída da fase só abre ao atingir um limiar de coleta.
- **Objetivos múltiplos por fase** com recompensa por completar.

---

## 10. PLATAFORMA / GAME FEEL

- **Pulo com altura variável** (quanto mais segura, mais alto).
- **Coyote time** (~0,1s de tolerância).
- **Jump buffering**.
- **Aceleração e atrito** suaves.
- **Squash & stretch** no pulo/aterrissagem.
- Plataformas móveis, molas/trampolins, escadas, água.

---

## 11. CENÁRIO EM CAMADAS + PARALLAX

Cada fase é montada em **planos de profundidade** com **velocidades de scroll diferentes**:

1. **BACKGROUND** — Fundo distante (fator 0,0–0,25, sem colisão)
2. **MIDDLE GROUND** — Cenário intermediário / Gameplay
   - Fundo próximo (fator 0,5–0,7, sem colisão)
   - Camada de Colisão (fator 1,0, a ÚNICA com colisão)
   - Entidades (fator 1,0)
   - Primeiro plano interno (fator 1,0–1,15, translúcido)
3. **FOREGROUND** — Frente extrema (fator 1,2–1,5, sem colisão)

Ordem de desenho: fundo → meio_tras → tileset → entidades → meio_frente → frente.

---

## 12–22. SEÇÕES COMPLEMENTARES

O prompt completo inclui também: Estrutura de Fases/Hub (12), Itens e Coletáveis (13), Inimigos e Perigos (14), HUD e UX (15), Estados de Jogo (16), Áudio via Web Audio API (17), Manifesto de Assets (18), Requisitos Técnicos (19), Arquitetura de Código (20), Critérios de Aceitação/QA (21) e Textos do Jogo em PT-BR (22).

---

### Entrega final
Crie o projeto do zero, use as imagens de referência, gere todos os assets com as skills + gerador de imagens, embuta tudo inline e entregue **`a-grande-coleta.html`** — um collectathon de plataforma **único, visualmente incrível e divertido**, em estética **cartoon-Pixar**. **Sem limite de tempo ou tokens: capriche.**