Direction Artistique — Pour Decisions

L'écran est environ 80 % pixel art simulé. Le budget artistique est dépensé uniquement pour : palette de matériaux, lueur/post-processing, UI, icônes, capsules Steam. Règle stricte : pas d'images générées par IA (déclencherait la déclaration Steam) ; les ressources externes doivent être sur liste blanche (docs/research/03_assets_legal.md) et enregistrées dans docs/art/ASSET_LICENSES.md. Nos forces : shaders, rendu procédural, mathématiques des couleurs. Faiblesse : illustration dessinée à la main → toutes les décisions penchent vers « calculé par programme ».

Données étendues (à lire si nécessaire) :

references/material-palette.md — rampes, couleurs hex, paramètres de bruit et d'émission pour 14 matériaux (valeurs initiales)
references/urp-postfx.md — recettes URP Volume, spécifications du shader CRT, configuration Pixel Perfect
references/ui-juice.md — décomposition de l'UI Balatro, chronologie des animations de score, valeurs d'easing
references/steam-capsule.md — spécifications des capsules, règles Valve, méthode pour non-illustrateurs

1. Théorie des Couleurs (décider dans cet ordre)

1.1 La Valeur (luminosité) avant la Teinte

Concevez d'abord en niveaux de gris : après conversion en niveau de gris (luma = 0.299R + 0.587G + 0.114B, ou OKLab L), l'arrière-plan, les matériaux et l'UI doivent encore être distincts. Ce qui ne se distingue pas en niveaux de gris, même le changement de couleur ne le sauvera pas.

Niveaux de luminosité de ce jeu (L cible, OKLab 0–1) :

Couche	Plage L	Contenu
Arrière-plan/paroi du bécher	0.12–0.22	Sombre, peu saturé, teinte froide violette
Matériaux inertes (pierre, sable, poudre, graines)	0.30–0.65	Luminosité moyenne, saturation moyenne à basse
Fluides (eau, huile, acide)	0.35–0.75	Luminosité moyenne, reconnaissable par mouvement et semi-transparence
Réaction/lueur (feu, lave, étincelle, particules de score)	0.75–1.0 + HDR	Le plus lumineux et le plus saturé de la scène
Chiffres/boutons UI	0.85–1.0	Sur un panneau séparé, distinct par la couleur de fond du panneau

Règle : le point focal doit être la chose la plus lumineuse et la plus saturée. Point focal = emplacement en réaction + chiffres de score. Rien d'autre ne doit être plus lumineux.

1.2 Décalage de Teinte (Hue Shifting)

Une rampe (sombre → clair) ne doit pas simplement ajuster la luminosité : les zones claires tendent vers le chaud (jaune), les zones sombres vers le froid (bleu/violet). Décalage de 10–20° par étape, maximum 20° (Slynyrd Pixelblog 1).
N'utilisez pas « ajouter du noir » pour les ombres, « ajouter du blanc » pour les lumières → cela donnerait un aspect sale et gris (pillow/muddy).
Courbe de saturation : maximum au milieu, diminue aux deux extrémités mais pas à 0 ou 100 % ; les couleurs sombres peuvent être plus saturées que les couleurs claires. Évitez une saturation élevée + luminosité élevée (éblouissant) ; cette place est réservée aux matériaux lumineux.

1.3 Hiérarchie de Saturation

La saturation est le deuxième aimant d'attention. Trois niveaux :
1. Élevée : matériaux lumineux, effets de score, chiffres Mult.
2. Moyenne : couleur principale des matériaux ordinaires, UI interactive.
3. Faible : arrière-plan, verre du bécher, panneaux, texte non interactif.
Saturation de l'arrière-plan ≤ 25 % (HSV S). L'image globale « surtout peu saturée, quelques zones très saturées » crée un point focal.

1.4 Palette Limitée

Utilisez une seule palette principale ; tous les matériaux, UI, icônes n'utilisent que ses couleurs. Avantage : la cohérence est automatique, les agents IA ne choisiront pas des couleurs différentes.
Point de départ : Resurrect 64 (lospec.com/palette-list/resurrect-64), 64 couleurs, rampes avec décalage de teinte, zones sombres violettes, idéal pour fond sombre + lueur. Alternatives : Endesga 32, Apollo (46 couleurs), AAP-64. Les valeurs de palette ne sont pas protégées par le droit d'auteur ; la page Lospec peut être créditée mais ce n'est pas obligatoire (hypothèse, faible risque).
Processus de création (si nécessaire) :
1. Choisissez une couleur médiane vive (S, B les plus importants, H arbitraire).
2. Étalez 5–9 étapes de chaque côté : B de sombre à clair (plus proche de 100, pas plus petit), S maximum au milieu, H +10~20° par étape (plus clair tend vers chaud).
3. Faites pivoter toute la rampe de 45° H pour générer d'autres familles de couleurs.
4. Dupliquez la partie médiane, désaturez → rampe de gris neutre (pour UI/arrière-plan).
5. Placez toutes les valeurs dans Game/Assets/Art/Palette/palette.png (1 px par couleur) + PaletteSO en C# ; le programme ne référence que les index, pas les codes hexadécimaux en dur.
Exceptions autorisées : les valeurs HDR d'émission (>1.0) ne peuvent être générées qu'en multipliant la couleur de la palette par une intensité, pas en créant une nouvelle couleur.

2. Règles de Lisibilité

Test en niveaux de gris : à chaque changement de couleur, capturez l'écran et convertissez en niveaux de gris (élément 1 de la checklist QA).
Les matériaux adjacents doivent différer d'au moins une valeur ou une teinte : ΔL (OKLab) ≥ 0,08 ou Δteinte ≥ 40°. Les paires confuses doivent être traitées spécialement :
- feu vs lave vs sable (tous chauds) → feu le plus lumineux et en mouvement, lave fond rouge sombre + stries lumineuses et lent, sable non lumineux et luminosité moyenne.
- acide vs plante (tous verts) → acide vert-jaune + légèrement lumineux + bulles, plante vert-bleu foncé non lumineux.
- vapeur vs fumée → vapeur blanche, froide, monte vite ; fumée gris-violet, plus sombre, se diffuse lentement.
Daltonisme : ne vous fiez pas uniquement à la distinction rouge/vert. Chaque matériau doit avoir une autre caractéristique non chromatique (mouvement, type de bruit de texture, émission, transparence). Utilisez Coblis ou un shader pour simuler le deuteranopie et vérifier.
Séparation UI et écran de jeu : la zone de simulation ne contient que des pixels de matériaux ; l'UI est placée sur des panneaux en dehors du bécher, avec des couleurs neutres peu saturées + une bordure de 1 px. L'UI n'utilise jamais la couleur d'un matériau comme arrière-plan (pour éviter « est-ce du sable ? »). Les chiffres de score peuvent flotter dans la zone de simulation, mais doivent avoir un contour/ombre et quitter dans les 0,6 secondes.
Point focal unique : une seule chose « attire l'œil » à la fois. En cas de réactions massives, réduisez la lueur des particules secondaires (voir §4 sur le budget de lueur).
Silhouette : la forme du bécher, des boutons et des icônes doit être reconnaissable en silhouette noire pure.

3. Principes du Pixel Art

Échelle de pixel fixe : 1 cellule de simulation = 1 pixel de jeu. Les assets pixel UI utilisent le même ratio (résolution sim suggérée 320×180 ou 384×216, agrandissement entier vers 1080p/1440p/4K). Interdiction de mélanger différentes échelles.
Pas de mixels : aucun asset pixel ne doit être redimensionné de manière non entière, ni pivoté (la rotation produit des pixels de tailles inégales). Pour les UI nécessitant une rotation (carte qui se balance), utilisez une couche UI haute résolution, ou pivotez dans une texture de rendu basse résolution avant agrandissement entier.
Rampes : chaque matériau a 3 à 5 couleurs (voir references/material-palette.md). Plus de 5 couleurs ne sont pas visibles sur des particules de 1 px.
Utilisation correcte du tramage (dithering) : uniquement pour (a) les dégradés de grandes surfaces (arrière-plan, reflets du verre du bécher), (b) les illusions de transparence (fumée, vapeur : damier/Bayer 4×4 alpha). Ne pas tramer les petits objets, icônes, textes ; ne pas utiliser de tramage en espace monde sur les particules dynamiques (cela scintillerait) ; les motifs de tramage doivent être verrouillés dans l'espace écran ou les coordonnées de cellule.
Anti-aliasing manuel : uniquement sur les lignes diagonales/courbes des icônes UI et du logo, avec une couleur intermédiaire entre la couleur de la ligne et celle du fond (1 px). Ne faites pas d'AA sur la bordure extérieure avec un fond transparent (cela créerait des bords sales avec un autre fond).
Banding : évitez les bandes parallèles et de même largeur qui suivent un contour (cela ressemble à des courbes de niveau de carte).
Pillow shading interdit : la source lumineuse est fixe (en haut à gauche) ; l'ombre ne « s'éclaire pas du bord vers le centre ».
Polices : polices pixel uniquement sur liste blanche (Cubic 11, Fusion Pixel Font, Kenney Fonts) ; affichage en multiples entiers de la taille pixel native ; TMP utilise du bitmap échantillonné ponctuel ou du SDF à échantillonnage élevé.

4. Comment Coloriser les Matériaux dans un Jeu de Particules Tombantes

Observations d'œuvres de référence (Noita, The Powder Toy, Sandspiel, Sandustry ; certaines sont des déductions basées sur l'observation, marquées « non vérifié ») :

Bruit de couleur par particule : à la génération, la particule stocke un octet aléatoire (ra de Sandspiel) ; au rendu, il est utilisé pour sélectionner une couleur dans la rampe du matériau ou ajuster la luminosité → le sable, la pierre ont un aspect granuleux. Le bruit est fixé à la génération ; la couleur suit la particule lorsqu'elle se déplace (ne pas rééchantillonner à chaque frame, cela scintillerait).
Solides avec texture en coordonnées monde : Noita permet aux matériaux d'avoir un texture_file ; les solides échantillonnent la texture en fonction de la position dans le monde ; lorsqu'ils deviennent des particules tombantes, ils conservent la couleur instantanée (déduction d'après les propriétés wiki, non vérifié). Notre pierre/verre/glace peuvent utiliser un hachage des coordonnées de cellule sur la rampe pour générer une texture stable.
Les fluides ne comptent pas sur le bruit mais sur le mouvement : eau/huile ont une petite amplitude de bruit (±3 % L), plus (a) un reflet plus lumineux d'une cellule en surface, (b) une scintillation subtile basée sur la vitesse/le temps.
Matériaux lumineux (émissifs) : Noita a gfx_glow (0–255) et gfx_glow_color. Notre approche : chaque cellule a une valeur emission, le rendu produit une couleur HDR = couleur palette × (1 + emission × k), passée dans URP Bloom. Le feu, la lave, les étincelles, l'acide (faible), le verre incandescent émettent de la lumière.
Couleur de température : The Powder Toy a un mode d'affichage de la chaleur ; nous n'en reprenons que l'esprit — lorsque la température d'une substance est élevée, elle se décale le long du corps noir (rouge sombre → orange → jaune → blanc) vers le côté clair, et revient à sa rampe d'origine en refroidissant.
Flash de réaction : à la frame de la réaction, l'émission de la cellule est poussée au maximum, puis s'atténue sur 2 à 4 frames → le joueur « voit » la réaction. C'est le retour de lisibilité le plus important.
Budget de lueur : si le nombre de cellules lumineuses simultanées > N (départ 2 000), réduisez proportionnellement l'émission de chaque cellule pour maintenir une luminosité globale stable et éviter que l'écran ne blanchisse.

Mise en œuvre : les données de simulation (id du matériau, byte aléatoire, température, émission) sont empaquetées dans une texture RGBA8 téléchargée ; le fragment shader interroge la LUT de la palette (256×1 ou une petite texture de matériaux×rampe) pour déterminer la couleur. Le CPU ne calcule pas les couleurs.

5. Post-Processing (Unity 6 URP) — Points Clés

Recette détaillée dans references/urp-postfx.md. Essentiel :

Appareil photo HDR activée ; Bloom Threshold 1.0–1.1 (seuls les matériaux lumineux >1 HDR débordent, les matériaux ordinaires ne blooment pas), Intensity à régler à partir de 0.6–1.0, Scatter 0.6–0.75, High Quality Filtering activé (réduit les scintillements).
Mappage des tons : Neutral (ACES modifierait la teinte et assombrirait la palette). Ou None + contrôle personnalisé.
LUT de correction des couleurs : seulement une légère unification (feeling « foyer de feu » par séquence), ne modifie pas la structure de valeur de la palette ; Color Lookup contribution ≤ 0,5.
CRT/scanline désactivé par défaut, avec option d'activation et d'intensité dans le menu des paramètres ; les captures d'écran/bandes-annonces Steam sont principalement « désactivées », avec au maximum une capture avec l'effet activé.
Pixel Perfect Camera (intégré à URP, ne pas installer l'ancien package 2D Pixel Perfect) : Grid Snapping = Upscale Render Texture ; Bloom est effectué à la résolution mise à l'échelle, pour éviter les halos carrés.

6. Style UI (Score-Attack à la Balatro)

Chronologie détaillée dans references/ui-juice.md. Obligations :

La couleur est le langage du score : Chips = bleu, Mult = rouge, Argent = or, ×Mult = fond rouge texte blanc. Fixe dans tout le jeu, ne pas réutiliser.
Affichage élément par élément : les réactions apparaissent une par une (+chips / +mult), chaque élément avec un pop de nombre (scale 1.0→1.3→1.0, easing avec dépassement), hauteur sonore ascendante.
Les vibrations sont graduées selon l'ordre de grandeur : plus le score est élevé, plus l'amplitude est grande et la durée longue ; maximum 8 px / 1°. Proposer une option « Réduire les vibrations de l'écran » (accessibilité).
Les chiffres restent toujours lisibles : contour épais (2 px couleur sombre) + ombre ; les grands nombres utilisent d'abord la notation scientifique avant les milliers.
Le juice ne doit pas cacher l'information : les particules et les flashs ne doivent pas recouvrir chips×mult et le score cible.

7. Icônes (16–32 px)

Commencez par créer la version 16 px, puis agrandissez à 32 px pour ajouter des détails (ne réduisez pas de 32 px à 16 px).
Une icône = un concept, une silhouette ; un contour extérieur de 1 px de la couleur la plus sombre de la palette pour qu'elle soit lisible sur n'importe quel fond.
Chaque icône a un maximum de 4 à 5 couleurs (contour, sombre, moyen, clair, accent). Source lumineuse toujours en haut à gauche.
Icônes de flacon (bouteille de matériau) : forme de flacon unifiée, seule la couleur du liquide et un petit symbole changent (flamme, goutte d'eau, crâne…) → le joueur reconnaît par double codage couleur + symbole (accessible aux daltoniens).
Reliques Catalyst : forme selon la rareté (cercle/hexagone/étoile), couleur du cadre selon la rareté (gris, bleu, violet, or).
Génération procédurale : les icônes peuvent être produites en C# ou Python avec « forme + index de palette » pour export PNG, reproductible et modifiable par lots.
Tests : visualisation sur fond UI réel, à 100 % ; réduction à 50 % pour vérifier que deux icônes différentes restent distinctes.

8. Capsules Steam

Détails dans references/steam-capsule.md. Points clés :

Spécifications : Header 920×430, Small 462×174, Main 1232×706, Vertical 748×896, Library 600×900, Hero 3840×1240 (sans texte), Logo PNG transparent.
Règles Valve : sur la capsule, uniquement le gameplay/art du jeu et le logo du nom du jeu (et sous-titre officiel) ; aucune mention d'évaluation, prix, réduction, ou autre texte.
Notre approche (même pour les non-illustrateurs) : grand logo piloté par la police + rendu haute résolution de la simulation (instant d'explosion) + un seul point focal clair. Le logo lui-même représente les particules tombantes : les lettres sont « versées » ou composées de différents matériaux.
Commencez par la Small capsule (l'aperçu 120×45 doit encore montrer le logo clairement), puis agrandissez.

9. Règles de Flux de Travail

Nouvelle couleur → d'abord ajoutée dans le fichier palette, puis référencée ; les PR/commits doivent lister les nouveaux index.
Toute ressource externe (police, UI Kenney) → enregistrée dans docs/art/ASSET_LICENSES.md (nom du fichier, URL, auteur, licence, date).
Tout asset artistique procédural (icône, logo, capsule) conserve le script de génération et les paramètres, placé dans Game/Tools/ArtGen/ ou tools/, reproductible.
Les paramètres incertains sont marqués « valeur initiale », complétés après prototype et playtest dans references.

10. Checklist Visuelle Pré-commit (Pre-Commit)

Sources

Slynyrd Pixelblog 1 – Palettes de Couleurs (décalage de teinte ≤20°, courbe de saturation) : https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes
Liste de Palettes Lospec : https://lospec.com/palette-list ; Resurrect 64 : https://lospec.com/palette-list/resurrect-64 ; Endesga 32 : https://lospec.com/palette-list/endesga-32 ; Apollo : https://lospec.com/palette-list/apollo ; AAP-64 : https://lospec.com/palette-list/aap-64
Tutoriels Pixel Art Lospec : https://lospec.com/pixel-art-tutorials
GameDev.net – Palettes de Couleurs : https://www.gamedev.net/articles/visual-arts/color-palettes-r4964/
Wiki Noita – Créer un matériau personnalisé (texture_file, gfx_glow) : https://noita.wiki.gg/wiki/Modding:_Making_a_custom_material
80.lv – Simulation de particules tombantes dans Noita : https://80.lv/articles/noita-a-game-based-on-falling-sand-simulation/
Fabrication de Sandspiel (octet aléatoire ra par particule pour la luminosité, colorisation GPU) : https://maxbittker.com/making-sandspiel
Code source de The Powder Toy : https://github.com/The-Powder-Toy/The-Powder-Toy
Unity URP Bloom : https://docs.unity3d.com/Packages/[email protected]/manual/post-processing-bloom.html
Unity URP Pixel Perfect Camera : https://docs.unity3d.com/6000.0/Documentation/Manual/urp/2d-pixelperfect-ref.html
Analyse du design de Balatro : https://blakecrosley.com/zh-Hant/guides/design/balatro
Actifs d'images du Store Steamworks : https://partner.steamgames.com/doc/store/assets/standard
Guide de l'art de la capsule Steam par presskit.gg : https://presskit.gg/field-guides/steam-capsule-art-guide
Simulateur de daltonisme Coblis : https://www.color-blindness.com/coblis-color-blindness-simulator/

Waipjy/ClaudeGame

Qu'est-ce que ClaudeGame ?

Demander à votre IA préférée

Documentation

Direction Artistique — Pour Decisions

1. Théorie des Couleurs (décider dans cet ordre)

1.1 La Valeur (luminosité) avant la Teinte

1.2 Décalage de Teinte (Hue Shifting)

1.3 Hiérarchie de Saturation

1.4 Palette Limitée

2. Règles de Lisibilité

3. Principes du Pixel Art

4. Comment Coloriser les Matériaux dans un Jeu de Particules Tombantes

5. Post-Processing (Unity 6 URP) — Points Clés

6. Style UI (Score-Attack à la Balatro)

7. Icônes (16–32 px)

8. Capsules Steam

9. Règles de Flux de Travail

10. Checklist Visuelle Pré-commit (Pre-Commit)

Sources

Individual skills in this repo

Waipjy/ClaudeGame

Skills associés

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me