diorama-pixel

Diorama Pixel: uma miniatura em pixel art que se move

Você está criando um pequeno lugar — uma barraca, um cais, um canteiro de jardim ou uma porta — visto de uma câmera isométrica fixa e desenhado como pixel art: todo o quadro é renderizado em 320x240 e ampliado com pixels vizinhos mais próximos, cada superfície é quantizada em uma rampa curta de cores suaves através de uma matriz Bayer 8x8, os materiais carregam textura procedural (linhas de tábuas, listras de palha, pedras, grama pontilhada, água manchada), a borda do chão se dissolve na página branca, o sol projeta sombras suaves, e uma ou duas pessoas pequenas fazem uma coisa clara em loop. As três cenas em examples/ são o padrão e estão no formato que você escreverá.

Este skill é um de três. diorama desenha ilustrações vetoriais SVG (cenas de UI, line art, estados vazios, temas); diorama-worlds renderiza mundos detalhados com Three.js e pessoas articuladas com quatro acabamentos. Use este quando a pessoa quiser pixels, pontilhamento, uma sensação retrô ou 16-bits, ou uma cena em pixels que deve permanecer pequena e sem dependências.

Você escreve uma coisa: a cena, um arquivo .js. O kernel (kit/pixel.js) e a página (kit/page.html) são fixos. Nunca os edite, nunca cole uma cópia modificada e nunca escreva novamente o que o kernel fornece (a câmera, a luz, sombras, texturas, pontilhamento, o chão, um rig de pessoa, árvores e arbustos, um relógio que dorme fora da tela, o ponteiro).

Cada arquivo nomeado abaixo está na pasta deste skill. Escreva a cena e a página construída no diretório de trabalho da pessoa e execute os scripts a partir dali usando o caminho para esta pasta.

1. Conceito

Escreva o conceito em uma linha antes de qualquer código:

Nome. O lugar e o que há nele. A única ação que uma pessoa faz, e o que mais se move. O que o ponteiro e um toque fazem.

Escolha um lugar com uma história e um uso: uma barraca de mercado, um cais, uma porta de padaria, um loteamento, um ponto de ônibus, um jardim no telhado. Uma ação carrega a cena (amarrando um buquê, pescando, regando, amassando), com antecipação e uma pausa, e dois ou três loops silenciosos ao redor (tecido, água, folhas, uma bandeira). Em seguida, escreva a lista de partes em quatro linhas: chão (zonas: grama, calçamento, água, areia, terra, um caminho), estrutura (o que está de pé: uma barraca, um galpão, uma cerca), pessoas (quem, onde, para onde está virada, fazendo o quê), vida (o que balança, flutua ou brilha). Uma cena tem de 10 a 25 objetos. Se a lista parecer fina, a cena também parecerá.

Ofereça dois ou três conceitos quando houver alguém para perguntar, e aguarde. Se não houver ninguém para perguntar, escolha aquele com o quadro parado mais forte e diga qual.

2. Construção

1. Leia references/art-direction.md: paleta, materiais, pontilhamento, a borda do chão, a escala das pessoas, o que faz um quadro ser lido como uma miniatura em pixel art em vez de um renderizado borrado.
2. Leia references/scene-api.md: cada primitiva, material, helper e o contrato do tick. Não leia kit/pixel.js abaixo do seu comentário de índice.
3. Leia o exemplo mais próximo: examples/flower-stall.js (calçamento e grama, uma cobertura listrada, duas pessoas, uma flâmula), examples/pier.js (água e uma margem, uma pessoa sentada com uma vara, um barco, um galpão de palha) ou examples/allotment.js (terra, um caminho de tijolos, canteiros elevados, um jardineiro regando, um espantalho).
4. Escreva <nome>.js: um Pixel.scene({ … }) com name, title, means (uma frase, no máximo 140 caracteres), hint (o que passar o mouse, o que tocar), duration, still, ground, opcional materials, build(P) retornando parts (com parts.hot, cada grupo quente nomeado) e tick(ctx) posando tudo a partir de ctx.t / ctx.q.
5. Construa: node <skill>/scripts/build.mjs <nome>.js escreve pixel-<nome>.html, uma página auto-contida sem requisição de rede.

3. Verificação

1. node <skill>/scripts/validate.mjs <nome>.js pixel-<nome>.html: a declaração, o relógio, auto-contência, sem URLs, o kernel byte por byte, o orçamento de tamanho e o ponteiro. Corrija cada FAIL.
2. npm ci --ignore-scripts --prefix <skill> uma vez, depois node <skill>/scripts/look.mjs <nome>.js <outdir>. Ele abre a página no Chromium headless com a rede bloqueada e escreve <nome>-look.json, o quadro parado, quatro momentos do loop, o hover, o pressionar e uma visualização móvel, e verifica preenchimento, movimento, a costura do loop, picking, hover, pressionar, movimento reduzido, custo do quadro e overflow móvel. O custo do quadro é julgado contra o orçamento de quadros da cena (41,7 ms a 24 fps); --throttle 4 o analisa em uma CPU quatro vezes mais lenta, como um runner de CI ou um telefone. CHROME_PATH seleciona um navegador; caso contrário, usa um Chrome ou Chromium instalado.
3. Abra os PNGs e olhe. Passar nas verificações não faz uma imagem. Pergunte ao quadro parado: a ação é legível neste tamanho (mãos, a ferramenta, a coisa sendo trabalhada)? Alguém está escondido atrás de um poste ou um telhado? Cada superfície mostra seu material? O chão desaparece na página em todos os lados, sem nada cortado pelo quadro? As sombras no chão estão onde o sol diz? Em seguida, corrija a cena, não o kernel, e olhe novamente.

Não entregue uma página que o validador rejeita. Não afirme que a verificação visual está completa se você não abriu as imagens. Sem um navegador, diga isso claramente e entregue com a verificação não realizada.

4. Entrega

Entregue pixel-<nome>.html da forma que a pessoa pediu (o arquivo, ou um artefato se você puder publicar um). Em seguida, uma linha cada: o conceito; o segundo do quadro parado e por quê; o tamanho (cerca de 50 KB, sem dependências); como incorporá-lo (references/scene-api.md, "Incorporação": um <canvas>, o kernel e a cena em duas tags <script> e Pixel.mount, ou o componente React ali); qualquer coisa que você não pôde verificar.

5. Ajustes

Quando a pessoa pedir uma alteração, edite apenas <nome>.js, construa, valide e verifique novamente.

O que dá errado

Se você se pegar	Faça isto em vez disso
usando three.js, WebGL ou um arquivo de imagem	não há: o kernel rasteriza sólidos em um canvas 2D; use P.box, P.cyl, P.ball, P.wedge, P.line
escrevendo requestAnimationFrame, setTimeout ou Math.random	pose tudo a partir de ctx.t / ctx.q em tick; use P.hash(i, j) para variedade que permanece fixa
position.x += speed * dt	uma posição a partir de P.phase(t, period), para que o quadro parado e a costura do loop sejam exatos
uma pessoa escondida atrás de um balcão, um poste ou um telhado	mova-a, abaixe o balcão, levante o telhado: a câmera é fixa e elas são a história
braços que se leem como uma massa com o corpo	uma pose com os antebraços para fora (P.pose(p, 'work' / 'hold')), as mãos segurando algo com uma cor própria
uma árvore como uma grande bola	P.tree e P.bush: aglomerados de tufos de folhas com sombreamento redondo
uma cor plana em uma superfície grande	um material texturizado: 'wood', 'thatch', 'stone', 'paving', 'leaf', 'cloth', ou uma rampa com tex
uma borda dura onde o chão termina	o chão é ground: { rx, rz, wobble, fade }: ele já se dissolve; nunca adicione uma laje ou um pedestal
uma cena mais larga que seu chão	mantenha tudo dentro de rx e rz; o quadro se ajusta ao chão
mais de 480 px de largura interna	320x240 é a aparência; mais pixels parecem um renderizado, não pixel art
editando kit/pixel.js para fazer uma cena funcionar	a cena está errada; mude a cena

Referências

• references/scene-api.md: a declaração, P (primitivas, materiais, pessoas, poses, árvores, ruído), o contexto do tick e o ponteiro, o runtime e a incorporação.
• references/art-direction.md: paleta e rampas, materiais e texturas, pontilhamento, a borda do chão, luz e sombra, pessoas em escala de pixel, composição.