Communitygithub.com

concept-to-pixel-assets

Transforme concept art de cenas e personagens em assets pixel art prontos para jogos, com backgrounds, sprites animados e integração com Unity.

O que é concept-to-pixel-assets?

Este skill converte arte conceitual digital (pinturas, imagens de IA, esboços) em assets de pixel art acabados para jogos. Para cenas, ele produz backgrounds nativos em resolução total com loops ambientes perfeitos e camadas de paralaxe, além de uma cópia em 3×. Para personagens, gera um sprite 1x com expressões, clipes de animação (idle, fala, mudança de expressão, aceno), mapas normais, sprite sheets e scripts de importação para Unity. O fluxo de trabalho segue regras rígidas de produção, como densidade de pixel fixa (1x), paletas travadas entre quadros de animação, e evita artefatos comuns de IA. Suporta revisão visual com PDFs e vídeos, e inclui um checklist de QA para garantir consistência visual e técnica antes da entrega. Ideal para equipes de jogos que desejam transformar conceitos em assets prontos para motor gráfico.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ForestSenYT/concept-to-pixel-assets/tree/main

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Concept art → pixel-art scenes, loops and character packs

Este skill captura um fluxo de trabalho de produção refinado ao longo de várias rodadas de revisão com uma equipe de jogos. Os scripts cuidam das partes mecânicas. As regras abaixo são mais importantes: elas foram o que os revisores sempre pediam, então siga-as por padrão e só as quebre quando o usuário solicitar.

Duas trilhas compartilham um conjunto de ferramentas (scripts/pixkit, mais as CLIs em scripts/):

TrilhaEntradaSaída
Cena (background / CG)1 imagem conceito por tomadastill nativo + cópia exata 3×, loop contínuo opcional de 48 quadros, camadas de paralaxe opcionais, PDF de revisão, README
Personagem1 conceito frontal do personagemsprite frontal 1x, 8–13 expressões, Idle/Fala por expressão, transições To_/From_, movimentos de Aceno/Aceno_Lento/BalançarCabeça (+ clipes únicos personalizados), mapas normais, sheets + json, prévias, scripts Unity, README

Configuração: pip install -r requirements.txt (numpy, scipy, scikit-image, opencv-python-headless, Pillow, reportlab), além de ffmpeg para vídeos de revisão. Execute python scripts/demo/run_demo.py /tmp/demo uma vez para confirmar que tudo funciona (usa apenas arte sintética).

0. Antes de começar

  1. Encontre as convenções existentes do projeto e reutilize-as. Procure por packs anteriores (READMEs, manifests, sprites). Um novo personagem deve compartilhar o canvas, linha do pé, pixels-por-unidade, cor do contorno e escala de altura do elenco. Um novo background deve compartilhar o tamanho nativo, tamanho da paleta, gradação e vinheta. A consistência entre o conjunto é mais importante do que qualquer ativo individual parecer bom isoladamente. Se nada existir ainda, proponha os padrões abaixo e informe.
  2. Defina o escopo apenas quando ele estiver genuinamente aberto. Para um personagem, pergunte se deve fazer apenas o conjunto frontal ou também lateral/traseiro/caminhada. Para uma cena, pergunte se deve ser animada se o pedido não estiver claro (algumas tomadas devem permanecer paradas). Caso contrário, comece a trabalhar; não peça permissão para etapas óbvias.
  3. Mantenha a arte do usuário privada. Entregue os arquivos diretamente (zip + imagens de prévia principais). Não publique a arte deles ou sprites derivados em páginas públicas, a menos que eles peçam.

Padrões (altere-os para corresponder ao projeto):

CenaPersonagem
Tamanho640×360 nativo; 1920×1080 = 3× exato ( Nearest)Canvas 96×160, linha do pé y=155, pés centralizados em x=48
Cores24 por imagem (paleta fixa)Rampa de poucas cores por material, cerca de 10–30 para o pack inteiro
Linhasa partir da arteContorno de 1 px, uma cor de contorno para todo o elenco
Movimento48 quadros, 12 fps, 4 s, contínuoDurações por quadro em ms (compatível com grade de 60 fps)
UnityFiltro Point, sem compressão, Max Size 4096, PPU 32o mesmo; pivot (0.5, 0.025)

1. Regras da casa

Cada regra vem de uma correção que um revisor fez. Não são gosto pessoal.

  • Densidade de pixel 1x. Um pixel de arte equivale a um pixel de jogo, então nunca dobre a densidade de detalhes. Cenas são construídas em tamanho nativo e escaladas apenas por números inteiros.
  • Tudo com paleta fixa. Quadros de animação só podem usar as cores próprias do still. Cada efeito em loopfx trabalha com índices de paleta, portanto novas cores não podem aparecer.
  • Quadro 0 = o still, e loops são contínuos. Cada movimento é uma função de fase com ciclos de números inteiros. Envie o quadro 0 do loop como still (*_STILL_frame0.png) para que os dois possam ser trocados sem saltos.
  • Olhos só piscam. Sem olhares, movimentos oculares ou desvios de olhar, a menos que o usuário peça um olhar específico. Quando pedir, faça apenas aquele olhar e nada mais (um exemplo de pedido foi "olhar para baixo por 1 segundo").
  • Cabelo se move apenas quando algo o move fisicamente: a cabeça acena, o corpo dá passos ou gira. Sem rajadas de vento e sem vibração com a respiração, porque um tremor de 1 px a cada respiração parece um defeito.
  • Coisas rígidas nunca balançam. Estradas, guardrails, postes, docas, rochas, móveis e interiores de carros permanecem com pixels fixos em todos os quadros (máscaras static). Mantenha ondulações de água 2–3 px afastadas das margens, postes e juncos.
  • Sem piscar de pixel único. Um pixel solitário que pisca parece um pixel morto. Poeira deriva, não cintila. Reflexos permanecem esparsos.
  • Mova blocos inteiros por pixels inteiros. A respiração levanta tudo acima da linha do peito em 1 px. Um aceno move o bloco da cabeça em 1 px. Nunca desloque linhas independentemente; isso rasga os contornos ("撕裂").
  • Troque expressões dentro de uma piscada. O rosto muda enquanto os olhos estão fechados. Todo clipe único começa em um quadro Idle 0 e termina exatamente em seu quadro Idle 0 alvo.
  • Corrija o que a IA errou e deixe a história em paz. Remova artefatos de IA: superfícies mosqueadas, pseudo-texto, borrões disformes, mãos faltando, luz impossível, decorações em objetos que não as teriam. Não adicione ou mova conteúdo relevante para a história (personagens, pistas, escrita) por conta própria. Liste esses casos sob "precisa de confirmação".
  • Mesma câmera, mesmos pixels. Quando duas tomadas compartilham uma câmera ou um local, reutilize os pixels estabelecidos. Isso se aplica a uma sala, um interior de carro, o tempo de cintilação de uma lâmpada e uma paleta. Cortes entre elas não devem saltar.
  • Respeite "não anime X". Quando o usuário disser apenas stills, ou para não mover algo, trave-o e não mude mais nada.

2. Trilha de cena

Leia references/scene-pipeline.md antes da primeira cena. Leia references/scene-loops.md antes de animar, e sua seção de paralaxe antes de criar camadas.

  1. Pixelize em duas etapas, para que correções manuais possam ocorrer entre elas.

    python scripts/scene_to_pixel.py concept.png OUT --name BG02 [--smooth 8,16] [--keep x0,y0,x1,y1]
    # -> OUT/BG02_stylized.png (sem gradação) + OUT/BG02_compare.png
    

    stylize faz a "simplificação desenhada à mão":

    • reduz para cerca de 22 cores extraídas da fonte;
    • achata cada objeto para no máximo 3 tons;
    • absorve manchas;
    • protege pequenos recursos brilhantes (lâmpadas, janelas) e linhas finas (trilhos, marcas de estrada).

    Use --keep para objetos cuja forma exata carrega a lógica da cena. Use --smooth para fontes granuladas, GIF ou JPEG. O estágio 1 também escreve BG02_native.png (a fonte redimensionada, para luzes e máscaras) e BG02_protected.png. Verifique a máscara protegida para linhas espúrias.

  2. Inspecione com zoom e corrija manualmente com pixkit.scene:

    • ramp_paint transforma pisos, mesas e paredes mosqueados em faixas planas iluminadas;
    • inpaint remove coisas;
    • line_mask_src desenha costuras de volta;
    • cole de tomadas anteriores que compartilham a câmera.

    Verifique direção da luz, acessibilidade e continuidade (veja a lista de verificação de lógica na referência).

  3. Finalize: python scripts/scene_to_pixel.py OUT/BG02_fixed.png OUT --name BG02 --finish --grade cold_dusk. Isso gradue a paleta, adiciona a vinheta com dither de 4 níveis e trava o resultado em 24 cores. Tomadas que cortam juntas devem compartilhar uma paleta: use scene.finish(a, extra=[b]).

  4. Loop (se desejado):

    • Crie máscaras como PNGs. Escolha cores ou desenhe polígonos com numpy, depois verifique-os sobrepondo-os sobre o still.
    • Escreva uma especificação (assets/examples/loop_spec.example.json) e execute python scripts/make_loop.py spec.json.
    • Leia a auditoria. Espere new_colours: 0, uma mudança de costura semelhante à mudança média entre quadros vizinhos e poucos pixels alternando mais de 8 vezes.
    • Assista ao mp4 de revisão. Os números não pegam tudo.
  5. Paralaxe (se a câmera rolar): veja a referência. Resumindo:

    • mantenha o chão caminhável e tudo sobre ele em uma camada;
    • use fatores de velocidade de cerca de 0,3 / 0,45 / 0,6 / 1,0;
    • preencha partes ocultas das camadas traseiras como panoramas completos e contínuos;
    • entregue apenas as faixas de linhas animadas como sheets (pixkit.parallax).
  6. Empacote com references/packaging.md:

    • still/, loop/<nome>/frames_native/, cópias _1920 e o mp4 de revisão;
    • um PDF de revisão para cada pack de cena (scripts/make_review_pdf.py);
    • um README no idioma do usuário.

3. Trilha de personagem

Leia references/character-pipeline.md primeiro, depois references/character-animation.md.

  1. Primeiro rascunho:

    python scripts/sprite_from_concept.py concept.png WORK --height 148 [--materials materials.json]
    

    Use o mesmo --height que o resto do elenco para que todos compartilhem uma escala. O script escreve:

    • o sprite bruto no canvas;
    • uma comparação com o conceito;
    • dumps ASCII;
    • info.json, que mapeia coordenadas do conceito para o canvas.

    --materials ajusta cada material a uma rampa fixa. Use regiões para separar materiais da mesma cor (cabelo acima da gola, avental abaixo dela). Traços internos tornam-se o tom mais escuro do material.

  2. Finalize a base manualmente. Este é o trabalho real, e o rosto sempre precisa disso, porque um redimensionamento destrói olhos e bocas.

    • Use pixkit.sprite.Symbols para despejar e pintar regiões como texto, e grid_zoom para visualizá-las.
    • Redesenhe o rosto, mantendo o estilo de olho do conceito.
    • Limpe mãos e objetos; mescle cores quase duplicadas; fill_enclosed_holes.
    • Compare com o conceito em 5× e com o elenco na mesma escala.
  3. Crie a base facial sem feições: o mesmo sprite com olhos, boca e sobrancelhas pintados sobre a pele. O nariz e outras feições permanentes permanecem.

  4. Escreva a configuração do personagem (assets/examples/character.example.json):

    • o rig facial: cada feição é uma caixa, e cada estado é uma pequena grade de caracteres;
    • as expressões;
    • substituições de boca de fala;
    • performances extras;
    • rótulos de prévia no idioma do usuário;
    • as regras de parte do mapa normal;
    • os nomes Unity.

    Projete as expressões com zoom de 4–8× umas contra as outras antes de construir. Olhos e boca carregam a expressão quando a franja esconde as sobrancelhas.

  5. Construa + audite: python scripts/build_character.py character.json.

    • O script se recusa a executar se o rosto neutro do rig não reproduzir a base pixel por pixel, porque uma incompatibilidade significa que toda transição saltaria.
    • Ele escreve o pack inteiro e audit.json, e sai com código diferente de zero em qualquer problema: paleta, pixels soltos, buracos, continuidade, quadros de fala fora da boca, quadros de piscada fora dos olhos, determinismo do mapa normal.
  6. Observe.

    • Abra previews/expressions_2x.png, previews/frames/*, previews/scale_with_cast_3x.png e previews/normals_lit_3x.png.
    • Reproduza previews/interactive_preview.html com Playwright, ou peça ao usuário para abri-lo.
    • Corrija o que parecer errado e reconstrua.

4. Entregando e iterando

  • Cada entrega é uma nova versão: nome_V01, depois V02, e assim por diante. Nunca sobrescreva uma anterior. Coloque um changelog no topo do README:

    • o que mudou;
    • por que (cite o feedback sendo abordado);
    • o que foi verificado.

    Mantenha tudo o que você não pretendia alterar pixel-idêntico, verifique isso e informe.

  • README no idioma do usuário. Use o padrão de seção em references/packaging.md: especificação, arquivos, o que se move, artefatos de IA corrigidos, problemas de lógica encontrados, precisa de confirmação, etapas Unity, verificações. Use números concretos ("264 quadros escaneados, 13 cores, 0 pixels soltos"). Marque scripts que nunca foram executados dentro do Unity como não testados.

  • Levante perguntas em aberto em vez de adivinhar. Exemplos: uma boca adicionada onde o conceito não tinha nenhuma; um personagem ou objeto que se moveu entre duas tomadas com a mesma câmera; um elemento decorativo que contradiz a hora do dia da história. Ofereça opções.

  • Envie o zip mais 1–3 imagens de prévia principais e dê um breve resumo. Não narre cada etapa.

5. QA

Percorra references/qa-checklist.md antes de cada entrega. As auditorias automatizam a maior parte. A inspeção visual com zoom pega o resto: rasgos, dither rastejante, formas que mudam de espessura enquanto balançam, névoa que não se move com seu chão, bocas que tocam a linha do queixo e meias piscadas que saltam.

Arquivos de referência

ArquivoLeia quando
references/scene-pipeline.mdpixelizando qualquer cena: parâmetros de estilização, correções de artefatos de IA e lógica, gradações, paletas compartilhadas
references/scene-loops.mdanimando um still: catálogo de efeitos e parâmetros, modos de falha conhecidos, cintilação de lâmpada, pessoas CG, clipes de imagem para vídeo, movimentos de câmera processuais, paralaxe
references/character-pipeline.mdconceito → sprite base 1x, redesenho facial, edição ASCII
references/character-animation.mdrig facial, design de expressão, conjunto de clipes e temporizações, regras de movimento, extensões lateral/traseiro/caminhada
references/normal-maps.mdmétodo de mapa normal, regras de parte, configuração de iluminação Unity
references/packaging.mdlayouts de pasta, formatos json / manifest, modelo README, PDF de revisão
references/qa-checklist.mdantes de cada entrega

Habilidades Relacionadas