Direção de Arte — Pour Decisions

Aproximadamente 80% da tela é pixelada simulada. O orçamento de arte é gasto apenas em: Paleta de materiais, brilho/pós-processamento, UI, ícones, cápsulas Steam. Regra rígida: Não usar imagens geradas por IA (isso aciona a divulgação na Steam); ativos externos só podem vir da lista de permissões (docs/research/03_assets_legal.md) e devem ser registrados em docs/art/ASSET_LICENSES.md. Nossos pontos fortes: shaders, renderização procedural, matemática de cores. Ponto fraco: ilustração desenhada à mão → todas as decisões pendem para 'calcular programaticamente'.

Materiais de referência (leia apenas quando precisar de detalhes):

references/material-palette.md — Rampas, HEX, ruído e parâmetros de brilho para 14 materiais (valores iniciais)
references/urp-postfx.md — Receitas de Volume URP, especificações do shader CRT, configurações do Pixel Perfect
references/ui-juice.md — Decomposição da UI de Balatro, cronograma de animação de pontuação, valores de easing
references/steam-capsule.md — Especificações da cápsula, regras da Valve, abordagem para não-ilustradores

1. Teoria da Cor (decida nesta ordem)

1.1 Valor (Brilho) antes da Matiz

Primeiro, projete em escala de cinza: convertendo para cinza (luma = 0.299R + 0.587G + 0.114B, ou OKLab L), fundo, materiais e UI ainda devem ser distinguíveis em camadas. Coisas que não se separam em cinza também não são salvas pela cor.

Camadas de brilho deste jogo (L alvo, OKLab 0–1):

Camada	Faixa L	Conteúdo
Fundo/parede interna do béquer	0.12–0.22	Escuro, baixa saturação, tendendo a roxo frio
Materiais inertes (pedra, areia, pólvora, sementes)	0.30–0.65	Brilho médio, saturação média a baixa
Fluidos (água, óleo, ácido)	0.35–0.75	Brilho médio, identificados por movimento e transparência
Reação/Emissão (fogo, lava, faísca, partículas de pontuação)	0.75–1.0 + HDR	Mais brilhante e mais saturado da tela
Números/botões da UI	0.85–1.0	Em painéis independentes, separados pela cor de fundo do painel

Regra: O foco deve ser a coisa mais brilhante e mais saturada. Foco = posição da reação + números de pontuação. Nada mais pode ser mais brilhante que eles.

1.2 Deslocamento de Matiz (Hue Shifting)

Uma rampa (escuro→claro) não ajusta apenas o brilho: as partes claras desviam para o quente (amarelo), as escuras para o frio (azul/roxo). Desloque 10–20° por degrau, com máximo de 20° (Slynyrd Pixelblog 1).
Não use 'adicionar preto' para sombras ou 'adicionar branco' para realces → isso torna a cor suja e acinzentada (pillow/muddy).
Curva de saturação: mais alta no meio, cai nas extremidades, mas não chega a 0 ou 100%; cores escuras podem ser mais saturadas que as claras. Evite saturação alta e brilho alto simultaneamente (ofuscante) — essa posição é reservada para materiais brilhantes.

1.3 Hierarquia de Saturação

Saturação é o segundo ímã de atenção. Três níveis:
1. Alta: materiais brilhantes, efeitos de pontuação, número Mult.
2. Média: cor principal de materiais comuns, UI interativa.
3. Baixa: fundo, vidro do béquer, painéis, texto não interativo.
Saturação do fundo ≤ 25% (HSV S). A imagem como um todo deve ter 'pouca saturação na maior parte, saturação alta em alguns pontos' para criar foco.

1.4 Paleta Limitada (Limited Palette)

Use uma única paleta principal; todos os materiais, UI e ícones extraem cores apenas dela. Benefício: a consistência é automática e os agentes de IA não escolherão cores aleatoriamente.
Ponto de partida: Resurrect 64 (lospec.com/palette-list/resurrect-64), 64 cores, rampas já com deslocamento de matiz, sombras tendendo a roxo, adequado para fundo escuro + brilho. Alternativas: Endesga 32, Apollo (46 cores), AAP-64. Os valores de cor da paleta em si não são protegidos por direitos autorais; a página do Lospec pode ser referenciada, mas não é obrigatório (suposição de baixo risco).
Processo de criação própria (se necessário):
1. Escolha uma cor intermediária vibrante (S e B são mais importantes; H é livre).
2. Expanda 5–9 degraus para cada lado: B de escuro para claro (passos menores perto de 100), S mais alto no meio, H +10~20° por degrau (desvio para quente no claro).
3. Gire a rampa inteira em H 45° para gerar outras famílias de cores.
4. Copie a parte do meio e dessature → rampa de cinza neutro (para UI/fundo).
5. Coloque todos os valores em Game/Assets/Art/Palette/palette.png (1px por cor) + PaletteSO em C#; o código referencia apenas índices, não HEX fixos.
Exceção permitida: valores HDR de brilho (>1.0) só podem ser gerados multiplicando a cor da paleta por uma intensidade; não criar novas cores.

2. Regras de Legibilidade

Teste de escala de cinza: sempre tire um print da tela e converta para cinza ao alterar cores (item 1 da checklist de QA).
Materiais adjacentes devem ter diferença clara em valor ou matiz: ΔL (OKLab) ≥ 0.08 ou Δmatiz ≥ 40°. Pares facilmente confundíveis exigem tratamento especial:
- fogo vs lava vs areia (todos quentes) → fogo é o mais brilhante e dinâmico; lava tem base vermelha escura com veios claros e é lenta; areia não brilha e tem brilho médio.
- ácido vs planta (ambos verdes) → ácido é verde-amarelado com leve brilho e bolhas; planta é verde-azulado escuro e não brilha.
- vapor vs fumaça → vapor é branco, frio, sobe rápido; fumaça é cinza-arroxeada, mais escura, se espalha devagar.
Daltonismo: não confie apenas em vermelho/verde para distinguir. Cada material deve ter uma característica não cromática (movimento, tipo de ruído de textura, brilho, transparência). Use Coblis ou simule deuteranopia via shader para verificar.
Separação entre UI e área de jogo: a área de simulação contém apenas pixels de material; a UI fica em painéis fora do béquer, com fundo neutro de baixa saturação e borda de 1px. A UI não usa nenhuma cor de material como fundo (evitando 'isso é areia?'). Números de pontuação podem flutuar para dentro da área de simulação, mas devem ter contorno/sombra e sair em 0,6 segundos.
Foco único: apenas um conjunto de elementos 'chama a atenção' por vez. Durante reações intensas, reduza o brilho de partículas secundárias (veja §4, orçamento de brilho).
Silhueta: o contorno de béqueres, botões e ícones deve ser reconhecível em silhueta preta sólida.

3. Fundamentos de Pixel Art

Escala de pixel fixa: 1 célula de simulação = 1 pixel do jogo. Ativos de pixel da UI usam a mesma escala (resolução de simulação sugerida: 320×180 ou 384×216, ampliada por inteiros para 1080p/1440p/4K). Proibido misturar diferentes escalas.
Sem mixels: nenhum ativo de pixel pode ser redimensionado não inteiramente ou rotacionado (rotação cria pixels de tamanhos variados). Itens de UI que precisam de rotação (cartas balançando) devem usar uma camada de UI de alta resolução, ou ser rotacionados em uma render texture de baixa resolução e depois ampliados por inteiros.
Rampa: cada material tem 3–5 cores (veja references/material-palette.md). Mais de 5 cores não são perceptíveis em partículas de 1px.
Uso correto de dithering: use apenas em (a) gradientes grandes (fundo, reflexo do vidro do béquer), (b) ilusão de transparência (fumaça, vapor com checkerboard/Bayer 4×4 alpha). Não use dithering em objetos pequenos, ícones ou texto; não use dithering em espaço-mundo em partículas dinâmicas (cintila); o padrão de dithering deve ser fixo no espaço da tela ou nas coordenadas da célula.
Anti-aliasing manual: apenas em linhas diagonais/curvas de ícones e logotipo da UI, usando uma cor intermediária entre a cor da linha e a do fundo, 1px. Não faça anti-aliasing na borda externa com fundo transparente (aparecerão bordas sujas se o fundo mudar).
Banding: evite faixas de cor paralelas e equidistantes seguindo o contorno (parecem curvas de nível de mapa).
Pillow shading proibido: direção da luz fixa no canto superior esquerdo; sombras não são 'mais claras do centro para as bordas'.
Fontes: fontes pixeladas só da lista de permissões (Cubic 11, Fusion Pixel Font, Kenney Fonts); exibidas em múltiplos inteiros do tamanho nativo do pixel; TMP deve usar bitmap point-sampled ou SDF de alta amostragem.

4. Como Colorir Materiais em Jogos de Areia

Observações de jogos de referência (Noita, The Powder Toy, Sandspiel, Sandustry; algumas são inferências observacionais, marcadas como 'não verificado'):

Ruído de cor por partícula: ao gerar uma partícula, armazene um byte aleatório (ra do Sandspiel). Ao renderizar, use esse byte para selecionar uma cor ou ajustar o brilho dentro da rampa do material → areia e pedra ganham sensação granular. O ruído é fixado na geração e a cor acompanha a partícula ao se mover (não re-sorteie a cada quadro, isso causa cintilação).
Sólidos usam textura baseada em coordenadas mundiais: Noita permite que materiais especifiquem texture_file; sólidos amostram a textura com base na posição mundial; ao se tornarem partículas em queda, mantêm a cor no momento (inferido das propriedades wiki, não verificado). Nossa pedra/vidro/gelo podem usar um hash das coordenadas da célula para amostrar a rampa e produzir textura estável.
Fluidos dependem de movimento, não de ruído: água/óleo têm pequena amplitude de ruído (±3% L), mais (a) um destaque mais claro na célula da superfície, (b) cintilação sutil baseada em velocidade/tempo.
Materiais brilhantes (emissivos): Noita tem gfx_glow (0–255) e gfx_glow_color. Nossa abordagem: cada célula tem um valor emission. Renderiza uma cor HDR = cor da paleta × (1 + emissão × k), alimentada pelo Bloom do URP. Fogo, lava, faísca, ácido (fraco), vidro incandescente brilham.
Cor de temperatura: The Powder Toy tem um modo de exibição de calor; adotamos o espírito: quando um material está quente, ele desvia para o espectro do corpo negro (vermelho escuro → laranja → amarelo → branco) no lado claro; ao esfriar, retorna à rampa original.
Flash de reação: no quadro em que a reação ocorre, a emissão daquela célula vai ao máximo e decai em 2–4 quadros → o jogador 'vê' a reação. Este é o feedback de legibilidade mais importante.
Orçamento de brilho: se o número de células brilhantes simultâneas > N (inicial 2.000), reduza proporcionalmente a emissão de cada célula para manter a luminosidade geral estável e evitar que a tela fique estourada de branco.

Ponto de implementação: os dados da simulação (id do material, byte aleatório, temperatura, emissão) são empacotados em uma textura RGBA8 e carregados; o fragment shader consulta uma LUT da paleta (256×1 ou uma textura pequena de materiais×rampa) para determinar a cor. A CPU não calcula cores.

5. Pós-processamento (Unity 6 URP) — Pontos Principais

Receita detalhada em references/urp-postfx.md. Essencial:

Câmera com HDR ativado; Bloom com Threshold 1.0–1.1 (apenas materiais com HDR>1 brilham; materiais normais não sofrem bloom), Intensidade inicial 0.6–1.0, Scatter 0.6–0.75, Filtragem de Alta Qualidade ativada (reduz cintilação).
Tone mapping: Neutral (ACES altera matizes e comprime a paleta). Ou None + controle próprio.
Color grading LUT: apenas ajustes sutis para unificação (ex.: 'sensação de lareira' em uma cena específica), sem alterar a estrutura de valor da paleta; contribution Color Lookup ≤ 0.5.
CRT/scanline desligado por padrão, com alternância e intensidade no menu de configurações; capturas de tela e trailers da Steam devem mostrar 'desligado' na maioria, no máximo 1 captura mostrando o efeito.
Pixel Perfect Camera (integrado ao URP, não instale o pacote antigo 2D Pixel Perfect): Grid Snapping = Upscale Render Texture; o Bloom é aplicado após a ampliação para evitar halos quadriculados.

6. Estilo da UI (Balatro-style score-attack)

Cronograma detalhado em references/ui-juice.md. Regras obrigatórias:

Cor é a linguagem da pontuação: Chips = azul, Mult = vermelho, Dinheiro = dourado, ×Mult = fundo vermelho com texto branco. Fixo em todo o jogo, não pode ser alterado.
Liquidação item por item: as reações aparecem uma a uma (+chips / +mult). Cada uma tem um número pop (escala 1.0→1.3→1.0, easing com overshoot), tom crescente.
Vibração graduada por magnitude: quanto maior a pontuação, maior a amplitude e duração da vibração; máximo 8px / 1°. Oferecer opção 'Reduzir vibração' (acessibilidade).
Números sempre legíveis: contorno grosso (2px escuro) + sombra; use separadores de milhar antes de notação científica.
Juice não pode obscurecer informações: partículas e flashes não podem cobrir chips × mult e a pontuação alvo.

7. Ícones (16–32px)

Primeiro faça a versão de 16px, depois amplie para 32px adicionando detalhes (não reduza de 32px para 16px).
Um ícone = um conceito, uma silhueta; borda externa de 1px na cor mais escura da paleta para funcionar em qualquer fundo.
Cada ícone, no máximo 4–5 cores (borda, escuro, médio, claro, destaque). Luz sempre do canto superior esquerdo.
Ícone de frasco (vial): formato unificado do frasco, apenas a cor do líquido e um pequeno símbolo mudam (chama, gota, caveira...) → o jogador reconhece pela cor + símbolo (amigável para daltônicos).
Relíquias Catalisadoras: formato baseado na raridade (círculo / hexágono / estrela), cor da moldura baseada na raridade (cinza, azul, roxo, dourado).
Geração procedural: ícones podem ser desenhados com C# ou Python usando 'forma + índice da paleta' e exportados como PNG, reproduzíveis e modificáveis em lote.
Teste: visualize no fundo real da UI, em 100% de escala; reduza a 50% e ainda assim os ícones devem ser distinguíveis entre si.

8. Cápsulas Steam

Detalhes em references/steam-capsule.md. Pontos principais:

Especificações: Header 920×430, Small 462×174, Main 1232×706, Vertical 748×896, Library 600×900, Hero 3840×1240 (sem texto), Logo PNG transparente.
Regras da Valve: na cápsula só podem aparecer arte/gráficos do jogo e o logotipo do nome (e subtítulo oficial); não pode conter avaliações, prêmios, descontos ou outros textos.
Nossa abordagem (funciona mesmo para não-ilustradores): logotipo grande impulsionado pela fonte + renderização de alta resolução de uma simulação (momento explosivo de reação) + 1 foco claro. O logotipo em si é areia: use a simulação para 'despejar' as letras ou compô-las com diferentes materiais.
Primeiro faça a Small capsule (120×45 ainda deve mostrar o logotipo claramente), depois amplie.

9. Regras do Fluxo de Trabalho

Nova cor → primeiro adicione ao arquivo de paleta, depois referencie; o PR/commit deve listar os índices adicionados.
Qualquer ativo externo (fontes, UI Kenney) → registre em docs/art/ASSET_LICENSES.md (nome do arquivo, URL, autor, licença, data).
Toda arte procedural (ícones, logotipo, cápsulas) mantenha os scripts e parâmetros de geração em Game/Tools/ArtGen/ ou tools/, reproduzível.
Parâmetros incertos marque como 'valores iniciais'; após protótipo e teste, atualize as referências.

10. Checklist de QA Visual Pré-commit

Fontes

Slynyrd Pixelblog 1 – Paletas de Cores (deslocamento de matiz ≤20°, curva de saturação): https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes
Lospec Palette List: https://lospec.com/palette-list ; Resurrect 64: https://lospec.com/palette-list/resurrect-64 ; Endesga 32: https://lospec.com/palette-list/endesga-32 ; Apollo: https://lospec.com/palette-list/apollo ; AAP-64: https://lospec.com/palette-list/aap-64
Lospec – Tutoriais de Pixel Art: https://lospec.com/pixel-art-tutorials
GameDev.net – Paletas de Cores: https://www.gamedev.net/articles/visual-arts/color-palettes-r4964/
Wiki do Noita – Criando um material personalizado (texture_file, gfx_glow): https://noita.wiki.gg/wiki/Modding:_Making_a_custom_material
80.lv – Simulação de areia em Noita: https://80.lv/articles/noita-a-game-based-on-falling-sand-simulation/
Criando o Sandspiel (ra por partícula determina brilho, coloração em GPU): https://maxbittker.com/making-sandspiel
Código-fonte do The Powder Toy: https://github.com/The-Powder-Toy/The-Powder-Toy
Unity URP Bloom: https://docs.unity3d.com/Packages/[email protected]/manual/post-processing-bloom.html
Unity URP Pixel Perfect Camera: https://docs.unity3d.com/6000.0/Documentation/Manual/urp/2d-pixelperfect-ref.html
Decomposição do design de feedback de Balatro: https://blakecrosley.com/zh-Hant/guides/design/balatro
Steamworks – Ativos de imagem da loja: https://partner.steamgames.com/doc/store/assets/standard
presskit.gg – Guia de arte de cápsula Steam: https://presskit.gg/field-guides/steam-capsule-art-guide
Coblis – Simulador de daltonismo: https://www.color-blindness.com/coblis-color-blindness-simulator/

Waipjy/ClaudeGame

O que é ClaudeGame?

Perguntar na sua IA favorita

Documentação

Direção de Arte — Pour Decisions

1. Teoria da Cor (decida nesta ordem)

1.1 Valor (Brilho) antes da Matiz

1.2 Deslocamento de Matiz (Hue Shifting)

1.3 Hierarquia de Saturação

1.4 Paleta Limitada (Limited Palette)

2. Regras de Legibilidade

3. Fundamentos de Pixel Art

4. Como Colorir Materiais em Jogos de Areia

5. Pós-processamento (Unity 6 URP) — Pontos Principais

6. Estilo da UI (Balatro-style score-attack)

7. Ícones (16–32px)

8. Cápsulas Steam

9. Regras do Fluxo de Trabalho

10. Checklist de QA Visual Pré-commit

Fontes

Individual skills in this repo

Waipjy/ClaudeGame

Habilidades Relacionadas

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me