concept-to-pixel-assets

Concept art → scènes, boucles et packs de personnages en pixel-art

Ce skill capture un workflow de production affiné à travers de nombreuses révisions avec une équipe de jeu. Les scripts s'occupent des parties mécaniques. Les règles ci-dessous sont plus importantes : ce sont celles que les réviseurs n'ont cessé de demander, alors suivez-les par défaut et ne les enfreignez que lorsque l'utilisateur vous le demande.

Deux axes partagent une boîte à outils commune (scripts/pixkit, plus les CLI dans scripts/) :

Axe	Entrée	Sortie
Scène (fond / CG)	1 image concept par plan	image native + copie exacte 3×, boucle seamée facultative de 48 images, calques de parallaxe facultatifs, PDF de revue, README
Personnage	1 concept de face du personnage	sprite 1x de face, 8–13 expressions, Idle/Talk par expression, transitions To_/From_, Nod/Nod_Slow/HeadShake (+ plans uniques personnalisés), cartes normales, feuilles + json, aperçus, scripts Unity, README

Configuration : pip install -r requirements.txt (numpy, scipy, scikit-image, opencv-python-headless, Pillow, reportlab), plus ffmpeg pour les vidéos de revue. Exécutez python scripts/demo/run_demo.py /tmp/demo une fois pour confirmer que tout fonctionne (il utilise uniquement de l'art synthétique).

0. Avant de commencer

1. Trouvez les conventions existantes du projet et réutilisez-les. Recherchez les packs précédents (READMEs, manifests, sprites). Un nouveau personnage doit partager le canevas, la ligne de pied, les pixels par unité, la couleur de contour et l'échelle de hauteur de la distribution. Un nouveau fond doit partager la taille native, la taille de la palette, le degré et la vignette. La cohérence de l'ensemble est plus importante qu'un asset isolé qui aurait belle allure. Si rien n'existe encore, proposez les valeurs par défaut ci-dessous et mentionnez-le.
2. Définissez le périmètre uniquement lorsqu'il est vraiment ouvert. Pour un personnage, demandez s'il faut faire uniquement l'ensemble de face ou aussi les vues de côté / dos / marche. Pour une scène, demandez si elle doit être animée si la demande n'est pas claire (certains plans doivent rester fixes). Sinon, commencez à travailler ; ne demandez pas la permission pour les étapes évidentes suivantes.
3. Gardez l'art de l'utilisateur privé. Livrez les fichiers directement (zip + images d'aperçu clés). Ne publiez pas leur art ou les sprites dérivés sur des pages publiques, sauf s'ils le demandent.

Valeurs par défaut (modifiez-les pour correspondre au projet) :

	Scène	Personnage
Taille	640×360 native ; 1920×1080 = 3× exact (voisin le plus proche)	96×160 canevas, ligne de pied y=155, pieds centrés à x=48
Couleurs	24 par image (palette verrouillée)	rampe de quelques couleurs par matériau, environ 10–30 pour tout le pack
Contours	depuis l'art	1 px de contour, une couleur de contour pour toute la distribution
Mouvement	48 images, 12 ips, 4 s, seamé	durées par image en ms (compatible grille 60 ips)
Unity	Filtre Point, pas de compression, Max Size 4096, PPU 32	identique ; pivot (0.5, 0.025)

1. Règles maison

Chaque règle provient d'une correction faite par un réviseur. Elles ne relèvent pas du goût personnel.

• Densité de pixels 1x. Un pixel d'art équivaut à un pixel de jeu, donc ne doublez jamais la densité de détail. Les scènes sont construites en taille native et mises à l'échelle uniquement par des nombres entiers.
• Tout est verrouillé par palette. Les images d'animation ne peuvent utiliser que les couleurs de l'image fixe. Chaque effet dans loopfx travaille sur les indices de palette, donc de nouvelles couleurs ne peuvent pas apparaître.
• L'image 0 = l'image fixe, et les boucles sont seamées. Chaque mouvement est une fonction de phase avec des cycles en nombres entiers. Livrez l'image 0 de la boucle comme image fixe (*_STILL_frame0.png) afin que les deux puissent être échangées sans saut.
• Les yeux clignotent uniquement. Pas de regards, de coups d'œil ou de balayages visuels, sauf si l'utilisateur demande un regard spécifique. Quand il le fait, créez ce seul regard et rien de plus (un exemple de demande était « regarde vers le bas pendant 1 seconde »).
• Les cheveux bougent uniquement lorsqu'un élément physique les déplace : la tête hoche, le corps fait un pas ou tourne. Pas de rafales de vent ni de frémissements sur la respiration, car une secousse de 1 px à chaque respiration est perçue comme un bug.
• Les objets rigides ne vacillent jamais. Routes, garde-corps, poteaux, quais, rochers, meubles et intérieurs de voiture restent verrouillés en pixels dans chaque image (masques static). Gardez les ondulations de l'eau à 2–3 px des rives, poteaux et roseaux.
• Pas de clignotement de pixel isolé. Un pixel unique qui clignote est perçu comme un pixel mort. La poussière dérive, elle ne scintille pas. Les reflets restent rares.
• Déplacez des blocs entiers par des pixels entiers. La respiration soulève tout ce qui est au-dessus de la rangée de la poitrine de 1 px. Un hochement de tête déplace le bloc de la tête de 1 px. Ne déplacez jamais les rangées indépendamment ; cela déchire les contours ("撕裂").
• Échangez les expressions à l'intérieur d'un clignement. Le visage change pendant que les yeux sont fermés. Chaque clip unique (« one-shot ») commence sur une image Idle 0 et se termine exactement sur son image Idle 0 cible.
• Corrigez ce que l'IA a mal fait, et ne modifiez pas l'histoire. Supprimez les artefacts IA : surfaces marbrées, pseudo-texte, blobs informes, mains manquantes, lumière impossible, décorations sur des objets qui n'en auraient pas. N'ajoutez ni ne déplacez de contenu pertinent pour l'histoire (personnages, indices, écriture) de votre propre chef. Listez ces cas sous "nécessite confirmation".
• Même caméra, mêmes pixels. Lorsque deux plans partagent une caméra ou un lieu, réutilisez les pixels établis. Cela s'applique à une pièce, un intérieur de voiture, le timing de scintillement d'une lampe et une palette. Les coupures entre eux ne doivent pas sauter.
• Respectez "n'anime pas X". Lorsque l'utilisateur demande seulement des images fixes, ou de ne pas bouger quelque chose, verrouillez-le et ne changez rien d'autre.

2. Axe scène

Lisez references/scene-pipeline.md avant la première scène. Lisez references/scene-loops.md avant d'animer, et sa section sur le parallaxe avant de superposer des calques.

1. Pixelisez en deux étapes, afin que les corrections manuelles puissent avoir lieu entre les deux.

   python scripts/scene_to_pixel.py concept.png OUT --name BG02 [--smooth 8,16] [--keep x0,y0,x1,y1]
   # -> OUT/BG02_stylized.png (non gradé) + OUT/BG02_compare.png
   

   stylize effectue la "simplification dessinée à la main" :

   • réduit à environ 22 couleurs provenant de la source ;
   • aplatit chaque objet à au plus 3 tons ;
   • absorbe les taches ;
   • protège les petites zones lumineuses (lampes, fenêtres) et les lignes fines (rails, marquages routiers).

   Utilisez --keep pour les accessoires dont la forme exacte porte la logique de la scène. Utilisez --smooth pour les sources granuleuses, GIF ou JPEG. L'étape 1 écrit également BG02_native.png (la source redimensionnée, pour les lumières et les masques) et BG02_protected.png. Vérifiez le masque protégé pour les lignes parasites.

2. Inspectez en zoom et corrigez à la main avec pixkit.scene :

   • ramp_paint transforme les sols, bureaux et murs marbrés en bandes plates éclairées ;
   • inpaint supprime des éléments ;
   • line_mask_src redessine les coutures ;
   • collage à partir de plans antérieurs partageant la même caméra.

   Vérifiez la direction de la lumière, l'accessibilité et la continuité (voir la checklist logique dans la référence).

3. Terminez : python scripts/scene_to_pixel.py OUT/BG02_fixed.png OUT --name BG02 --finish --grade cold_dusk. Cela gradue la palette, ajoute la vignette tramée à 4 niveaux et verrouille le résultat à 24 couleurs. Les plans qui s'enchaînent doivent partager une palette : utilisez scene.finish(a, extra=[b]).

4. Boucle (si souhaitée) :

   • Créez les masques en PNG. Choisissez des couleurs ou dessinez des polygones avec numpy, puis vérifiez-les en les superposant sur l'image fixe.
   • Écrivez une spécification (assets/examples/loop_spec.example.json) et exécutez python scripts/make_loop.py spec.json.
   • Lisez le rapport d'audit. Attendez-vous à new_colours: 0, un changement de couture similaire au changement moyen entre les images voisines, et peu de pixels basculant plus de 8 fois.
   • Regardez le mp4 de revue. Les chiffres ne détectent pas tout.

5. Parallaxe (si la caméra défile) : voir la référence. En résumé :

   • gardez le sol praticable et tout ce qui s'y trouve dans un seul calque ;
   • utilisez des facteurs de vitesse d'environ 0.3 / 0.45 / 0.6 / 1.0 ;
   • remplissez les parties cachées des calques d'arrière-plan en panoramas complets et seamless ;
   • livrez uniquement les bandes de rangées animées sous forme de feuilles (pixkit.parallax).

6. Packaging avec references/packaging.md :

   • still/, loop/<name>/frames_native/, copies _1920 et le mp4 de revue ;
   • un PDF de revue pour chaque pack de scène (scripts/make_review_pdf.py) ;
   • un README dans la langue de l'utilisateur.

3. Axe personnage

Lisez references/character-pipeline.md d'abord, puis references/character-animation.md.

1. Première ébauche :

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

   Utilisez la même --height que le reste de la distribution pour que tout le monde partage une seule échelle. Le script écrit :

   • le sprite brut sur le canevas ;
   • une comparaison avec le concept ;
   • des dumps ASCII ;
   • info.json, qui mappe les coordonnées du concept sur le canevas.

   --materials accroche chaque matériau à une rampe fixe. Utilisez des régions pour séparer des matériaux de même couleur (cheveux au-dessus du col, tablier en dessous). Les traits intérieurs deviennent le ton le plus sombre du matériau.

2. Terminez la base à la main. C'est le vrai travail, et le visage en a toujours besoin, car une réduction d'échelle détruit les yeux et les bouches.

   • Utilisez pixkit.sprite.Symbols pour dumper et peindre les régions sous forme de texte, et grid_zoom pour les visualiser.
   • Redessinez le visage, en conservant le style des yeux du concept.
   • Nettoyez les mains et les accessoires ; fusionnez les couleurs quasi identiques ; fill_enclosed_holes.
   • Comparez avec le concept à 5× et avec la distribution à la même échelle.

3. Créez la base de visage sans traits : le même sprite avec les yeux, la bouche et les sourcils repeints avec la couleur de la peau. Le nez et les autres traits permanents restent.

4. Écrivez la configuration du personnage (assets/examples/character.example.json) :

   • le rig du visage : chaque trait est une boîte, et chaque état est une petite grille de caractères ;
   • les expressions ;
   • les remplacements de bouche de parole ;
   • les performances supplémentaires ;
   • les étiquettes d'aperçu dans la langue de l'utilisateur ;
   • les règles de carte normale par pièce ;
   • les noms Unity.

   Concevez les expressions à un zoom de 4–8× les unes par rapport aux autres avant de les construire. Les yeux et la bouche portent l'expression lorsque la frange cache les sourcils.

5. Construction + audit : python scripts/build_character.py character.json.

   • Le script refuse de s'exécuter si le visage neutre du rig ne reproduit pas la base pixel pour pixel, car une disparité signifierait que chaque transition sauterait.
   • Il écrit l'ensemble du pack et audit.json, et se termine avec un code non nul en cas de problème : palette, pixels parasites, trous, continuité, images de parole en dehors de la bouche, images de clignement en dehors des yeux, déterminisme des cartes normales.

6. Regardez-le.

   • Ouvrez previews/expressions_2x.png, previews/frames/*, previews/scale_with_cast_3x.png et previews/normals_lit_3x.png.
   • Jouez previews/interactive_preview.html avec Playwright, ou demandez à l'utilisateur de l'ouvrir.
   • Corrigez ce qui semble faux, puis reconstruisez.

4. Livraison et itérations

• Chaque livraison est une nouvelle version : name_V01, puis V02, etc. N'écrasez jamais une version antérieure. Placez un journal des modifications en haut du README :

  • ce qui a changé ;
  • pourquoi (citez le retour pris en compte) ;
  • ce qui a été vérifié.

  Gardez tout ce que vous n'aviez pas l'intention de modifier identique pixel par pixel, vérifiez-le et mentionnez-le.

• README dans la langue de l'utilisateur. Utilisez le modèle de section dans references/packaging.md : spécification, fichiers, ce qui bouge, artefacts IA corrigés, problèmes logiques trouvés, nécessite confirmation, étapes Unity, vérifications. Utilisez des chiffres concrets ("264 images scannées, 13 couleurs, 0 pixel parasite"). Marquez les scripts qui n'ont jamais été exécutés dans Unity comme non testés.

• Soulevez les questions ouvertes plutôt que de deviner. Exemples : une bouche ajoutée là où le concept n'en avait pas ; un personnage ou un accessoire qui a bougé entre deux plans avec la même caméra ; un élément décoratif qui contredit l'heure de la journée de l'histoire. Proposez des options.

• Envoyez le zip plus 1 à 3 images d'aperçu clés, et donnez un court résumé. Ne racontez pas chaque étape.

5. QA

Parcourt references/qa-checklist.md avant chaque livraison. Les audits automatisent la majeure partie du travail. Le passage visuel au zoom attrape le reste : déchirures, tramage rampant, formes qui changent d'épaisseur en se balançant, brume qui ne se déplace pas avec son sol, bouches qui touchent la ligne du menton, et demi-clignements qui sautent.

Fichiers de référence

Fichier	À lire quand
references/scene-pipeline.md	en pixelisant une scène : paramètres de stylisation, corrections d'artefacts IA et logiques, degrés, palettes partagées
references/scene-loops.md	en animant une image fixe : catalogue d'effets et paramètres, modes de défaillance connus, scintillement de lampe, personnages CG, clips image-vers-vidéo, mouvements de caméra procéduraux, parallaxe
references/character-pipeline.md	concept → sprite de base 1x, redessin du visage, édition ASCII
references/character-animation.md	le rig du visage, conception d'expressions, ensemble de clips et timings, règles de mouvement, extensions côté / dos / marche
references/normal-maps.md	méthode de carte normale, règles par pièce, configuration d'éclairage Unity
references/packaging.md	dispositions de dossiers, formats json/manifest, modèle de README, PDF de revue
references/qa-checklist.md	avant chaque livraison