blog.vfg.lol

Stabilisation ingame : le piano cliquable, une seule fumée, un écoulement continu

Quand les symptômes joueur forcent à séparer DOM, Three.js, cache suggestions et modèle de traînées

Stabilisation ingame : le piano cliquable, une seule fumée, un écoulement continu

Le 14 septembre, le chantier n’était plus « ajouter une feature ». C’était de rendre à nouveau crédible ce que le joueur touche : les touches, la passerelle, la fumée sur l’eau, et le fait qu’une note tenue avance sans se casser au relâchement.

Base de travail citée dans les handoffs : 1f26421, puis livraison stabilisation + écoulement (commits 41de58c, 93578c4 côté journal). Aucune validation DP1 physique n’est revendiquée ici.

Symptômes → causes → corrections

SymptômeCause constatéeCorrection
Touches « mortes » en skin invisiblepointer-events: none au reposSurface cliquable + focus clavier conservés
Passerelle non cliquablePiano DOM absent ; volumes 3D sans clicMême clavier interactif projeté pour les trois skins
Double réaction aux notesRubans MIDI + eau sur 12 classesL’eau reste décorative ; la fumée porte la trace
Fumée qui saute au Note OffAjout brutal de longueur / changement de hauteurContinuité géométrique, puis déplacement
Particules malgré un zéroPlancher forcé à une particuleZéro = zéro instance
MIDI qui « revient » après un changement rapideCourse asynchrone d’ouverturesNuméro de requête ; anciennes ouvertures ignorées
Suggestions qui recalculent en boucleCache invalidé par l’horlogeCache lié aux faits musicaux / réglages / phrase

Le bouton Piano et fumee (barre de transport) applique un profil lisible : piano classique, fumée, panneaux transparents, sans particules / halos / filaments décoratifs, caméra sans flottement latéral. Il ne change ni les notes, ni les choix musicaux, ni l’armement MIDI.

Écoulement : une note tenue qui avance vraiment

Capture stabilisation : note tenue et traces continues

La suite « traînées » remplace le modèle de segments empilés par un écoulement continu :

  • pendant l’appui, la tête progresse ; la queue reste attachée au clavier ;
  • après Note Off, les deux extrémités avancent de la même distance — plus d’allongement artificiel ;
  • vitesse = Vitesse du voyage × Ecoulement ; un zéro arrête le transport ;
  • eau et fumée partagent la même fonction d’onde GLSL ; extrémités arrondies, une instance par traînée.

Fichiers centraux : src/runtime/riverFlow.ts, src/world/riverTrail.ts, shaders et sceneUpdates. Le plafond reste 128 traînées visibles. Les anciens paramètres « Hauteur des jets » / « Attaque du jet » ne pilotent plus ce modèle : leur nettoyage éditeur reste une tâche séparée.

Preuves exécutées (handoffs)

Sur l’arbre de stabilisation au-dessus de 1f26421, puis suite écoulement :

  • TypeScript forcé, lint, build : réussis
  • Vitest : 154 puis 159 tests (22 fichiers sur la suite écoulement)
  • Playwright isolé port 5183 : 12 puis 13 scénarios
  • Docs : docs:test 33/33 ; docs:check 0 erreur (14 warnings d’empreintes d’archives)

Captures locales (artifacts/…) : artefacts de session, non versionnés, non équivalents à une validation DP1.

Pourquoi les « petites » demandes coûtent cher

  1. Deux pianos (DOM et volumes Three.js) avec des capacités différentes.
  2. Des réglages nommés d’après un rendu mort — le slider existe encore, l’effet non.
  3. Des tests qui prouvaient qu’un canvas changeait, pas qu’une seule traînée naissait au bon endroit.
  4. Un cache trop général — l’horloge invalidait les suggestions.
  5. Le mauvais serveur — un autre checkout sur 5173 a déjà trompé un diagnostic ; l’essai et Playwright ciblent désormais 5183.

Suite recommandée (toujours ouverte)

  1. Rejouer les gestes sur le Bird DP1 (pas seulement pointeur navigateur).
  2. Contrat visuel court : une note, deux notes, accord, relâchement.
  3. Nettoyer les commandes devenues sans effet avant d’en ajouter.
  4. Extraire projection / présentation / entrée en petits modules au fil des parcours, pas en big-bang.

Sources : docs/journal/2026-09-14_stabilisation/HANDOFF.md, ECOULEMENT.md. Miroir local : RainbowPiano/docs/devblog/.

source markdown

Concepts de cet article

handoffskin

Partage le plus de concepts avec