diorama-pixel

Diorama Pixel : une miniature pixel-art qui s'anime

Vous créez un petit lieu, une échoppe, une jetée, un carré de jardin ou une porte, vu depuis une caméra isométrique fixe et dessiné en pixel art : l'ensemble du cadre est rendu en 320 × 240 et agrandi avec des pixels au plus proche voisin, chaque surface est quantifiée sur une courte rampe de couleurs atténuées via une matrice de Bayer 8×8, les matériaux portent une texture procédurale (lignes de plancher, stries de chaume, pierres, herbe pointillée, eau tachetée), le bord du sol se dissout dans la page blanche, le soleil projette des ombres douces, et une ou deux petites personnes font une chose claire en boucle. Les trois scènes dans examples/ sont la référence, et elles sont au format que vous écrirez.

Cette compétence est l'une des trois. diorama dessine des illustrations vectorielles SVG (scènes d'interface, dessins au trait, états vides, thèmes) ; diorama-worlds rend des mondes Three.js détaillés avec des personnages articulés et quatre finitions. Utilisez celle-ci quand la personne veut des pixels, du tramage, une ambiance rétro ou 16-bit, ou une scène en pixels qui doit rester petite et sans dépendances.

Vous écrivez une seule chose : la scène, un fichier .js. Le noyau (kit/pixel.js) et la page (kit/page.html) sont fixes. Ne les modifiez jamais, n'en collez jamais de copie modifiée, et ne réécrivez jamais ce que le noyau vous donne (la caméra, la lumière, les ombres, les textures, le tramage, le sol, l'armature d'un personnage, les arbres et les buissons, une horloge qui dort hors écran, le pointeur).

Chaque fichier nommé ci-dessous se trouve dans le dossier de cette compétence. Écrivez la scène et la page construite dans le répertoire de travail de la personne, et exécutez les scripts depuis ce répertoire en utilisant leur chemin dans ce dossier.

1. Concept

Écrivez le concept en une ligne avant tout code :

Nom. Le lieu et ce qu'il contient. La seule action qu'une personne fait, et ce qui bouge d'autre. Ce que font le pointeur et un tap.

Choisissez un lieu avec une histoire et une utilité : un étal de marché, une jetée, une porte de boulangerie, un jardin ouvrier, un arrêt de bus, un toit-terrasse. Une action porte la scène (nouer un bouquet, pêcher, arroser, pétrir), avec anticipation et une pause, et deux ou trois boucles calmes autour (tissu, eau, feuilles, un drapeau). Écrivez ensuite la liste des éléments en quatre lignes : sol (zones : herbe, pavés, eau, sable, terre, un chemin), structure (ce qui se dresse : un étal, un cabanon, une clôture), personnes (qui, où, faisant face à quoi, faisant quoi), vie (ce qui oscille, flotte ou scintille). Une scène compte de 10 à 25 objets. Si la liste semble maigre, la scène aussi.

Proposez deux ou trois concepts quand il y a quelqu'un à qui demander, et attendez. S'il n'y a personne à demander, prenez celui dont l'image fixe est la plus forte et dites lequel.

2. Construction

1. Lisez references/art-direction.md : palette, matériaux, tramage, le bord du sol, l'échelle des personnages, ce qui fait qu'une image se lit comme une miniature pixel art plutôt qu'un rendu flou.
2. Lisez references/scene-api.md : chaque primitive, matériau, assistant et le contrat de tick. Ne lisez pas kit/pixel.js en dessous de son commentaire d'index.
3. Lisez l'exemple le plus proche : examples/flower-stall.js (pavés et herbe, un auvent rayé, deux personnes, un fanion), examples/pier.js (eau et rivage, une personne assise avec une canne, un bateau, un cabanon au toit de chaume) ou examples/allotment.js (terre, un chemin de briques, des carrés surélevés, un jardinier arrosant, un épouvantail).
4. Écrivez <nom>.js : un Pixel.scene({ … }) avec name, title, means (une phrase, au plus 140 caractères), hint (sur quoi survoler, quoi taper), duration, still, ground, materials optionnel, build(P) retournant parts (avec parts.hot, chaque groupe chaud nommé) et tick(ctx) animant tout depuis ctx.t / ctx.q.
5. Construction : node <skill>/scripts/build.mjs <nom>.js écrit pixel-<nom>.html, une page autonome sans aucune requête réseau.

3. Vérification

1. node <skill>/scripts/validate.mjs <nom>.js pixel-<nom>.html : la déclaration, l'horloge, l'autonomie, aucune URL, le noyau octet par octet, le budget de taille et le pointeur. Corrigez chaque FAIL.
2. npm ci --ignore-scripts --prefix <skill> une fois, puis node <skill>/scripts/look.mjs <nom>.js <outdir>. Cela ouvre la page dans Chromium sans réseau et écrit <nom>-look.json, l'image fixe, quatre moments de la boucle, le survol, l'appui et une vue mobile, et vérifie le remplissage, le mouvement, la jointure de la boucle, la sélection, le survol, l'appui, le mouvement réduit, le coût des images et le débordement mobile. Le coût des images est jugé par rapport au budget d'images de la scène (41,7 ms à 24 ips) ; --throttle 4 l'examine sur un CPU quatre fois plus lent, comme un serveur CI ou un téléphone. CHROME_PATH sélectionne un navigateur ; sinon, il utilise un Chrome ou Chromium installé.
3. Ouvrez les PNG et regardez. Des vérifications réussies ne font pas une image. Demandez-vous à propos de l'image fixe : l'action se lit-elle à cette taille (mains, outil, la chose travaillée) ? Quelqu'un est-il caché derrière un poteau ou un toit ? Chaque surface montre-t-elle son matériau ? Le sol se fond-il dans la page de tous les côtés, sans rien coupé par le cadre ? Les ombres au sol sont-elles là où le soleil les indique ? Corrigez ensuite la scène, pas le noyau, et regardez à nouveau.

Ne livrez pas une page que le validateur rejette. Ne prétendez pas que le rendu est terminé si vous n'avez pas ouvert les images. Sans navigateur, dites-le clairement et livrez avec le rendu non vérifié.

4. Livraison

Donnez pixel-<nom>.html comme la personne l'a demandé (le fichier, ou un artefact si vous pouvez en publier un). Ensuite, une ligne chacun : le concept ; la seconde d'image fixe et pourquoi ; la taille (environ 50 Ko, sans dépendance) ; comment l'intégrer (references/scene-api.md, « Embedding » : un <canvas>, le noyau et la scène dans deux balises <script> et Pixel.mount, ou le composant React qui s'y trouve) ; tout ce que vous n'avez pas pu vérifier.

5. Ajustement

Quand la personne demande un changement, modifiez uniquement <nom>.js, construisez, validez et regardez à nouveau.

Ce qui peut mal tourner

Si vous vous surprenez à	Faites plutôt ceci
utiliser three.js, WebGL ou un fichier image	il n'y en a pas : le noyau rastérise des solides sur un canvas 2D ; utilisez P.box, P.cyl, P.ball, P.wedge, P.line
écrire requestAnimationFrame, setTimeout ou Math.random	animez tout depuis ctx.t / ctx.q dans tick ; utilisez P.hash(i, j) pour la variété qui reste stable
position.x += vitesse * dt	une position à partir de P.phase(t, période), pour que l'image fixe et la jointure de la boucle soient exactes
un personnage caché derrière un comptoir, un poteau ou un toit	déplacez-le, abaissez le comptoir, surélevez le toit : la caméra est fixe et ce sont eux l'histoire
des bras qui se lisent comme une seule masse avec le corps	une pose avec les avant-bras tendus (P.pose(p, 'work' / 'hold')), les mains tenant quelque chose d'une couleur qui lui est propre
un arbre comme une grosse boule	P.tree et P.bush : des grappes de touffes de feuilles arrondies et ombrées
une couleur plate sur une grande surface	un matériau texturé : 'wood', 'thatch', 'stone', 'paving', 'leaf', 'cloth', ou une rampe avec tex
un bord dur là où le sol se termine	le sol est ground: { rx, rz, wobble, fade } : il se dissout déjà ; n'ajoutez jamais de dalle ou de socle
une scène plus large que son sol	gardez tout à l'intérieur de rx et rz ; le cadre s'adapte au sol
plus de 480 px de largeur interne	320 × 240 est le rendu ; plus de pixels ressemblent à un rendu, pas à du pixel art
modifier kit/pixel.js pour faire fonctionner une scène	la scène est erronée ; changez la scène

Références

• references/scene-api.md : la déclaration, P (primitives, matériaux, personnages, poses, arbres, bruit), le contexte de tick et le pointeur, l'exécution et l'intégration.
• references/art-direction.md : palette et rampes, matériaux et textures, tramage, le bord du sol, lumière et ombre, personnages à l'échelle du pixel, composition.