Pixel Art avec pix
Utilisez cette compétence lorsque l'utilisateur demande du pixel art, des sprites, des icônes, des logos, des actifs de jeu, des images d'animation, des feuilles de sprites, des GIFs ou des fichiers .pix.
Principes non négociables
- Privilégier la lisibilité au détail.
- Travailler en résolution native ; ne jamais concevoir une image haute résolution et la réduire mentalement.
- Utiliser des arêtes nettes, des coordonnées entières et pas d'antialiasing.
- Utiliser une palette limitée avec des rôles explicites : contour, ombre, base, surbrillance et accent.
- Construire des clusters de couleurs intentionnels plutôt que des pixels dispersés.
- Garder une direction lumineuse cohérente sur l'ensemble de l'actif et de toutes les images d'animation.
- Ne pas revendiquer la fin du travail après une simple validation syntaxique. Effectuer un rendu et inspecter visuellement le résultat.
Règle anti-bruit
Ne pas ajouter d'étoiles flottantes, de paillettes, de poussières, de particules, d'accents dans les coins ou de pixels décoratifs isolés, sauf si l'utilisateur le demande explicitement.
Pour les logos, icônes, actifs d'interface utilisateur et sprites à fond transparent :
- par défaut, zéro composants décoratifs déconnectés ;
- garder une marge de sécurité propre autour du sujet ;
- privilégier une seule silhouette principale compacte ;
- ne pas utiliser l'espace vide du canevas comme invitation à ajouter de la décoration ;
- ne pas ajouter de groupe nommé
sparkles,stars,dust,particlesou similaire, sauf s'il est demandé ou essentiel au sujet.
Chaque cluster visible doit servir au moins un objectif clair :
- silhouette ou structure ;
- forme, éclairage ou matière ;
- un trait identifiant ;
- décoration environnementale demandée.
Si un cluster ne peut pas être justifié en une phrase courte, supprimez-le. Les pixels uniques ne sont acceptables que lorsqu'ils sont fonctionnels, comme une pupille, un reflet spéculaire, l'extrémité d'une diagonale ou un trait facial nécessaire.
Workflow requis
- Clarifier le brief. Déterminer la taille du canevas, le sujet, le type d'actif, le style, les contraintes de palette, le fond et les exports. Si la décoration n'a pas été demandée, en supposer zéro.
- Définir les critères d'acceptation. Choisir les règles pertinentes parmi les Critères par type d'actif.
- Planifier avant de dessiner. Définir la silhouette, les formes principales, les rôles de palette, la direction lumineuse, le point focal et les poses clés d'animation.
- Créer ou modifier le source
.pix. Nommer les groupes selon leur fonction sémantique. Garder l'atmosphère optionnelle séparée du sujet. - Valider le source. Exécuter
pix check. - Effectuer le rendu à l'échelle native. La sortie native est le contrôle visuel faisant autorité.
- Effectuer le rendu d'un aperçu agrandi. Utiliser un facteur d'échelle entier au plus proche voisin, normalement
--scale 8. - Inspecter visuellement. Vérifier les rendus natif et agrandi sur fonds transparent, clair et foncé lorsque l'actif peut apparaître sur des surfaces variées.
- Effectuer la passe de nettoyage. Classer chaque composant déconnecté et tout petit cluster de couleur suspect. Supprimer tout élément involontaire.
- Auditer quand c'est possible. Exécuter
scripts/audit_png.pysur le PNG natif. Traiter les avertissements comme des invites de relecture, pas comme une preuve automatique d'erreur. - Réviser et effectuer un nouveau rendu. Réaliser au moins une itération délibérée de nettoyage avant de finaliser une nouvelle œuvre.
- Exporter les livrables finaux. Générer les PNGs demandés, images d'animation, GIFs, feuilles de sprites et métadonnées.
Commandes principales
Valider et effectuer le rendu :
pix check asset.pix
pix render asset.pix -o asset-1x.png
pix render asset.pix -o asset-8x.png --scale 8
Effectuer le rendu d'une image nommée :
pix render asset.pix --frame frame-name -o frame-1x.png
pix render asset.pix --frame frame-name -o frame-8x.png --scale 8
Auditer un PNG natif depuis la racine du dépôt de la compétence :
python3 skills/pixel-art-pix/scripts/audit_png.py asset-1x.png
Exporter des livrables d'animation :
pix anim asset.pix -a animation-name --out-dir frames/
pix sheet asset.pix -a animation-name -o sheet.png --json sheet.json
pix gif asset.pix -a animation-name -o animation.gif
Critères par type d'actif
Logos et icônes
- Utiliser une silhouette dominante et un espace négatif fort.
- Par défaut, zéro composants flottants et zéro particules ambiantes.
- Éviter les accents dans les coins d'un pixel, sauf s'ils clarifient le marquage à taille 1x.
- Tester sur fonds transparent, clair et foncé.
- Confirmer la reconnaissance à taille native et à la taille d'affichage UI prévue.
Sprites de personnages et d'objets
- La silhouette remplie de noir doit rester reconnaissable.
- Les yeux, armes, membres et autres identifiants doivent être lisibles à taille 1x.
- Éviter une texture qui entre en compétition avec le trait focal.
- Garder les ombres de contact attachées au sujet ou clairement alignées avec lui, sauf si une ombre détachée est intentionnelle.
Scènes et arrière-plans
- Établir une hiérarchie premier plan, plan intermédiaire et arrière-plan.
- Les particules ambiantes ne sont autorisées que lorsqu'elles soutiennent le cadre, la profondeur ou le mouvement.
- Utiliser les motifs de texture répétés intentionnellement ; éviter le mouchetage aléatoire uniforme.
Animation
- Utiliser des poses clés distinctes plutôt que de minuscules changements de pixels arbitraires.
- Garder la palette, l'éclairage et les volumes cohérents entre les images.
- Vérifier la transition de boucle et inspecter chaque image individuellement.
- S'assurer que les particules décoratives ne scintillent pas accidentellement entre les images.
Checklist de nettoyage obligatoire
Ne pas marquer le travail comme terminé tant que chaque réponse n'est pas satisfaisante :
- Le sujet est-il reconnaissable à taille 1x ?
- La silhouette communique-t-elle le sujet sans les détails intérieurs ?
- Chaque composant déconnecté a-t-il un objectif explicite ?
- Toutes les marques d'un pixel sont-elles fonctionnelles et non du remplissage ?
- Les paillettes, étoiles, poussières et accents dans les coins non demandés ont-ils été omis ?
- Les surbrillances sont-elles groupées et alignées avec une seule source lumineuse ?
- Les ombres et les points de contact sont-ils intentionnels ?
- La palette est-elle limitée et basée sur des rôles ?
- L'actif a-t-il des marges propres sans clipping accidentel ?
- A-t-il été inspecté à taille 1x et à échelle agrandie ?
- A-t-il été vérifié sur les couleurs de fond appropriées ?
- Au moins une révision de nettoyage a-t-elle été effectuée après le premier rendu ?
- Pour l'animation, les poses clés sont-elles lisibles et les boucles propres ?
- Pour les feuilles de sprites, les images sont-elles ordonnées et nommées clairement ?
Rapport de révision visuelle
Lors du signalement de finition, indiquer brièvement :
- taille du canevas native ;
- exports générés ;
- contrôles visuels effectués ;
- s'il reste des composants détachés ou de petits clusters de couleur, et pourquoi ;
- toute décoration intentionnellement demandée.
Ne pas décrire pix check comme une validation visuelle. Il valide le source, tandis que le rendu et l'inspection valident l'œuvre.
Références
Lire quand des conseils plus approfondis sont utiles :