---
title: "Tuto complet : réglages et gameplay"
subtitle: "Carte de tout ce que vous pouvez cliquer — topbar, transport, HUD, cristaux, huit onglets de l'atelier"
date: 2026-09-15
time: "03:53"
author: VFG / Rainbow Journey
publishedBy: idea
status: pub
tags: ["rainbowjourney", "tutoriel", "reglages", "gameplay", "cristaux", "atelier", "midi", "devblog"]
---

![Tuto complet : réglages et gameplay](../images/covers/2026-09-15-tuto-complet-reglages-gameplay.png)


Tutoriel joueur pour Rainbow Journey : inventaire des contrôles visibles (topbar, transport, HUD, scène 3D) et des huit onglets de l'atelier. Les libellés UI sont cités en ASCII ; les explications sont en français accentué. Persistance principale : `localStorage`, clé `rainbowjourney.settings`.

Ce billet reprend le contenu du canvas Cursor `tuto-reglages-complet.canvas.tsx` (espace projets Cursor). Il se suffit à lui-même. Les quizzes de la passe live 2a restent dans le canvas compagnon `quiz-passe-live-2a` — ne pas les confondre avec ce tuto.

**Repères.** 8 onglets atelier · 48 cristaux scène · 9 FloatingPanels HUD · MIDI OUT désarmé par défaut.

> **Où ouvrir l'atelier.** Tout à droite de la topbar, après `Demo`, `Connecter` et `?` : icône **engrenage** (pas des curseurs) — aria / survol : `Ouvrir les reglages`. Titre du panneau : `ATELIER · Votre univers`. Flèches gauche/droite pour changer d'onglet ; Escape ferme. En replay, la musique (tonique / gamme / mask) est verrouillée.

Canon produit : [GAMEPLAY](../produit/GAMEPLAY.md) (§7 bis pour les cristaux). Un catalogue éditorial plus ancien existe encore ([paramètres émotion / visualisation](2026-09-12-catalogue-parametres-emotion-visualisation-synesthesie.md)) ; celui-ci décrit l'UI joueur actuelle.

## Cristaux — définition et où cliquer

Les **cristaux** sont les premiers objets jouables du paysage 3D : 48 octaèdres placés le long de la vallée / rives (pas les poches HUD, pas les cartes suggestions). Trois états visuels — idle (vert pâle), active (cyan), completed (rose) ; sélection atelier = jaune. Une note configurée, une règle de jeu, ou un **clic** peut les activer.

### En jeu (atelier fermé)

Cliquez directement un octaèdre dans le canvas Three.js (zone paysage, au-dessus du piano / couloirs). Le raycast active l'objet. Aucun MIDI n'est émis. Si `Isolement` (test traînées) est On, les cristaux sont cachés et le clic est ignoré.

### Dans l'atelier

Onglet `Visualiseur` → `Objets du monde` : liste `Cristal 1..48`, bouton éclair pour activer, champ `Note` (`-1` = libre). Un clic scène sélectionne et ouvre l'`Inspecteur`. Ou : règle de jeu avec action `Activer objet` / condition `Etat objet`.

**Relation aux paquets / rivière / suggestions.** Aucune directe. Les paquets (`PouchRow`) comptent les notes jouées par degré après arrivée de pastille. La rivière et les suggestions réagissent au jeu mélodique. Les cristaux sont un canal gameplay / objet séparé (atelier paramétrique), utiles pour célébrations et états de règles.

Code de référence : `World.tsx` (`activateCrystal`) · Visualiseur `Objets` · `runtime.activateWorldObject` / `selectWorldObject` / `inspectWorldObject`.

## Carte de l'écran (hors atelier)

De haut en bas : topbar → chips restore → panneaux flottants → paquets → suggestions → couloirs → transport intégré topbar. Le monde 3D remplit le fond.

### Topbar

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `Connecter` | Topbar droite | Demande Web MIDI et ouvre / rafraîchit les ports. Désactivé en mode replay. | Aucun port tant que non choisi |
| `Demo` / `Quitter la demo` | Topbar droite | Joue une mélodie auto. Désactivé pendant un enregistrement. Ouvre le panneau `DEMO LIVE`. | Off |
| Icône engrenage (`Ouvrir les reglages`) | Topbar, dernier bouton à droite (après `?`) | Ouvre le panneau `ATELIER` / Votre univers (Editor). Escape ou croix pour fermer. | Fermé |
| Chip gamme (ex. `DO MAJEURE · 7 DEGRES`) | Topbar meta | Lecture seule : tonique + gamme + nombre de degrés actifs. | Selon Musique |
| Chrono / FPS / témoin `REC` | Topbar meta | Temps de session, frames/s, témoin d'enregistrement. Pas de clic. | — |

### Transport / session / skin

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `Panic` (carré) | Transport gauche | Coupe notes tenues + trails en cours. Conserve `pouchCounts` (paquets). Ne vide pas l'historique suggestions. | — |
| `Reset` | Transport gauche | Remise à 0 totale (confirm) : notes, trails, temps, usage, paquets. Conserve réglages et MIDI. | — |
| `Enregistrer` / `Arreter` | Transport centre | Démarre / arrête un parcours (session). Désactive Demo pendant REC. | Off |
| `Passerelle` / `Invisible` / `Piano` | Transport droite (cycle skin) | Mode d'affichage du clavier / passerelle. Défaut Passerelle (pas de plaque opaque). | Passerelle |
| `Parcours` | Transport droite | Modal `CARNET DE VOYAGE` : rejouer, importer, exporter, supprimer des sessions. | — |
| `Plein ecran` | Transport droite | Fullscreen navigateur (peut être refusé par le navigateur). | Off |

### Mode replay (après `Parcours` > Rejouer)

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `Lire` / `Pause` | Transport (mode replay) | Relecture visuelle uniquement — zéro audio, zéro MIDI OUT, pas de spawn paquets. | — |
| Timeline + vitesse (`0.5x`–`2x`) | Transport centre | Seek et vitesse de relecture. | `1x` |
| `Original` / `Reinterprete` | Select rendu | Original = couleurs / contexte historiques ; Réinterprété = présentation actuelle. | Selon session |
| `Retour au direct` | Croix transport | Quitte le replay proprement. | — |

### HUD flottant + strip suggestions

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `DIRECTIONS` | FloatingPanel (souvent masqué en 2a) | Bande historique de directions + chips Safe. Masqué : chips restore en haut. | Layout persisté ; 2a préfère le strip |
| Strip `SUGGESTIONS` (cartes) | Au-dessus des couloirs | Cartes coaxiales aux degrés. Pas de score en face (détail dans title). Gelé si Pause suggestions / `debugcase`. | Visible après notes |
| `DERNIERE NOTE` | Panneau gauche | Nom + rôle + couloir de la dernière attaque. | Aucune note jouée |
| `JOURNAL` | Panneau droite | Phrases / Safe / Ose / Paquet le plus plein / Total paquets. | Vides au boot |
| `CHOIX` | FloatingPanel | Marques quand vous jouez une suggestion présente. Alimente Styles de jeu (Safe / Combo / Strike). | Vide |
| `TOP NOTES` / camembert / légende | FloatingPanels | Classement d'usage, camembert, légende des degrés. Drag header, resize, replier (`-`), masquer (`x`). | Persistés localStorage |
| `PERF` | Visible seulement si Moniteur perf | FPS, frame ms, compteurs trails — instrumentation. | Off (toggle Monde) |
| `DEMO LIVE` | Visible en mode Demo (ou `debugcase`) | Vitesse pas, vélocité min/max, variation %, accords %. | `0.65s` / 55–120 / 15 % / 35 % |
| Chips restore (`DIRECTIONS`, …) | Sous topbar si panneau masqué | Ramène un FloatingPanel masqué. Persistance : `rainbowjourney.panel.<id>`. | — |

### Scène : cristaux, paquets, couloirs, rivière

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| Cristaux (octaèdres 3D) | Paysage, rives de la rivière (48 instances) | Clic = activer (jeu) ou sélectionner + Inspecteur (atelier ouvert). Aucun MIDI. Voir section Cristaux. | idle (vert pâle) |
| Paquets (poches) | Rangée au-dessus des couloirs | Compteurs par degré : +1 après arrivée de la pastille (~6–9 s), pas à l'attaque. Lecture seule. | `0` |
| Couloirs de degré | Pied / performance-deck | Clic / tactile joue la note du degré à l'octave `OCT`. Nombre = mask (7 majeur, 5 penta…). | Selon gamme |
| `OCT` `-` / `+` (ou molette) | À côté des couloirs | Change l'octave des notes pointeur / tactile (bornes La0–Do8). | Dérive de Première note MIDI |
| Rivière SVG overlay | Rubans sur les degrés | Décoratif ; `pointer-events: none` (clic traverse vers couloir). | Animé sauf reduced-motion |

## Atelier — huit onglets

![Capture atelier / reglages](../images/shots/reglages.png)


Onglets : `Musique` · `MIDI` · `Couleurs` · `Expression` · `Visualiseur` · `Inspecteur` · `Monde` · `Presets`.

### Musique

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| Tonique / Gamme | `ATELIER` > Musique > Tonalité | Recalcule le mask (sauf custom). Verrouille en replay. | Do / Majeure |
| Mask (boutons notes) | Sous tonique | Active / désactive chaque classe ; passe en Personnalisée. | Mask majeur |
| `Bloquer les notes hors gamme en MIDI OUT` | Toggle filter | Filtre la sortie armée seulement — le son direct DP1 n'est pas filtré. | Off |
| `Masquer les touches exclues` | Toggle `hideExcluded` | Cache les touches hors mask sur le piano. | Off |
| Notation / Langage | Lecture musicale | Do Re Mi vs C D E ; Personnel / Théorique / mixte pour les libellés. | fr / mixed |
| Socle degrés / Dès intervalle / Texture tension | Toggles | Cadre I/IV/V, dès (points = intervalle), jitter sur 2m / triton / 7M. | Tous On |
| Accords / Clavier AZERTY | Toggles | Détection accords ; raccourcis `w x c…` (ASCII hint sous le toggle). | On / On |
| Montantes / Équivalentes / Descendantes | Quotas suggestions | Combien de cartes par direction (grave→aigu). Total = somme des trois. | 1 / 1 / 1 |
| `Pause suggestions` | Toggle (+ Monde) | Gèle le recalcul / affichage des suggestions (debug / design). | Off |
| Rayon mélodique / Fin de phrase | Sliders | Fenêtre demi-tons des candidats ; silence (s) qui coupe un motif. | 12 / 8 s |
| `Nouvelle phrase` | Bouton | `clearAnchor` — force une nouvelle origine de motif. | — |
| Étendue / Première note MIDI / Calibrer | Clavier | 25–88 touches ; low MIDI ; calibration des extrémités. | 25 / 48 |
| Vélocité (Gain, Seuil, Forme, influences) | Musique > Vélocité | Courbe artistique (dans presets). Sensibilité matérielle piano indépendante. | gain 1, seuil 0, linéaire… |

### MIDI

> **Piège son DP1.** Armer MIDI OUT est optionnel et manuel. Le trajet piano OUT → interface IN → USB laisse le son local Bird DP1 non filtré. Pour un DAW : sortie jeu seule, pas de retour MIDI.

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `Actualiser les ports` | `ATELIER` > MIDI | Relance l'énumération Web MIDI. | — |
| `Entree` | Select | Port IN ; choix explicite persisté (F5 / reconnect). Aucune = pas d'entrée. | Auto premier connect si non explicite |
| `Canal` | Select (`-1` = Tous) | Filtre canal ; Panic au changement. | Tous |
| Sortie + `Armer MIDI OUT` | Select + bouton bouclier | OUT désarmé par défaut. Jamais armé automatiquement depuis import / preset / demo / replay. | Désarmé |
| `Visualiser uniquement les notes transmises` | Toggle transmitted | HUD / scène ne montrent que ce qui est transmis (selon routage). | Off |
| Diagnostic Web MIDI | Bouton + métriques | Contexte sécurisé, permission, ports vus, latences logicielles, FPS. | — |

### Couleurs

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| Notes / Roles / Expression | `ATELIER` > Couleurs | Convention de coloriage clavier et fantômes. | Notes |
| Palette (OKLCH, Arc-en-ciel, Doux, Contraste) | Select + 12 color pickers | 12 teintes chromas. Comparaison miniature Notes vs Roles. | Arc-en-ciel |
| Do majeur / La mineur (raccourcis) | Comparaison | Applique tonique + gamme + mask (bloqué en replay). | — |

### Expression

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| 7 intentions (repos…surprise) | `ATELIER` > Expression | Votre langage, évocation, couleur, priorité de suggestion. Pas d'émotions universelles. | Labels FR par défaut |
| Règles de transition | Section sous les intentions | Si tonique / mode / roles / intervalle match → intention + bonus score. Max 32. | Liste vide |

### Visualiseur (mappings, règles, cristaux)

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| Associations (Courbe / Couleurs degrés) | `ATELIER` > Visualiseur | Mappe un fait musical → ruban / halo / vagues / particules / lumière / couleur. Première active gagne par cible. | Selon preset |
| Modèle de suggestions (poids, bonus, seuils) | Sliders | Remplace les constantes historiques ; détail dans Inspecteur. | Schéma visualizer |
| Règles de jeu (compteurs, séquences, objets) | Règles | Célébration sans punition. Déclencheurs attack / release / motif / `objectActivated`. Action `Activer objet` → cristal. | Liste vide ou preset |
| Objets du monde — `Cristal 1..48` | Liste + bouton éclair | Sélection, activation accessible, note MIDI d'activation (`-1` = libre). | `activationNote -1` |

### Inspecteur (lecture seule)

Pas de remise à 0 page. Affiche : dernière attaque (faits), réactions mappings appliquées, règles évaluées, suggestion expliquée (`scoreParts`), état counters / sequences / `selectedObject`. S'ouvre aussi après clic cristal avec atelier ouvert.

### Monde (effets 3D + HUD chrome)

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `Mouvement reduit` | `ATELIER` > Monde | Coupe anims (flow, climb…). Compte paquet peut settler immédiatement. | Off |
| `debugcase` | Toggle | Force tous les HUD visibles, dépliés ; gèle anim / fade / suggestions / `CHOIX`. | Off |
| `Moniteur perf` | Toggle | Affiche panneau `PERF`. | Off |
| Fond HUD / Opacité / Échelle texte | Blocs HUD | Couleur, transparence, Compact / Standard / Large. | `#0d1a17` / 62 % / Standard |
| `Reorganiser les panneaux` | Bouton | Efface layouts custom `rainbowjourney.panel.*` et replace les defaults. | — |
| Effets actifs (`Riviere`…`Brume`) + Isolement | Toggles | Montre / cache couches 3D. Isolement = test traînées seuls (cache cristaux aussi). | Tous On ; isolement Off |
| Ciel / Eau + groupes Camera…Qualité | Couleurs + sliders `effectRegistry` | Vitesse voyage, FOV, rivière, fontaine, particules, bloom, brume, résolution… | Voir `effectRegistry` |

### Presets + historique d'édition

| Contrôle (ASCII UI) | Où cliquer | Effet attendu | Défaut / piège |
| --- | --- | --- | --- |
| `Sauvegarder` / `Exporter` / `Importer` | `ATELIER` > Presets | Univers local ; JSON v2. Import applique settings (musique lock en replay). | — |
| Liste + `Univers initial` | Presets | Appliquer un preset ; Univers initial = tous defaults (confirm). | — |
| Annuler / Rétablir / Remise à 0 page | En-tête atelier | Historique d'édition (debounce 300 ms). Page = defaults de l'onglet courant. | — |

## Persistance et gotchas

| Stockage | Contenu | Piège |
| --- | --- | --- |
| `rainbowjourney.settings` | Réglages complets (schéma v1) | Survit au F5 ; Reset jeu ne les efface pas |
| `rainbowjourney.panel.<id>` | Position / taille / masque HUD | `Reorganiser les panneaux` pour repartir |
| IndexedDB sessions | Parcours enregistrés | Replay = visuel only |
| welcome seen flag | Accueil première visite | Une fois fermé, ne revient pas |
| Velocity curve | Dans `visualizer.velocityResponse` | Incluse dans univers / presets |

- Panic ≠ Reset ≠ Univers initial (Presets) ≠ Remise à 0 page.
- Import preset / demo / replay n'arme jamais MIDI OUT.
- Jeu sans punition : Strike / hors gamme restent jouables.

Sources inventaire : `settings.ts` · `Editor.tsx` · `TransportBar.tsx` · `Journey.tsx` · `World.tsx` · [GAMEPLAY](../produit/GAMEPLAY.md) §7 bis · handoff parametric-visualizer.

## Présent dans le code mais caché / inachevé

| Élément | Statut |
| --- | --- |
| `hologramMap` (`memeNote` / `memeDegre` / `hauteurPercue`) | Stub dans settings + reset Monde / Presets. Plus de contrôle UI ; mappings réels = Visualiseur. Rendu 3D hologramme falaises non livré. |
| `settings.suggestions` (entier 2–4) | Champ schéma encore présent / reset Musique, mais plus d'UI ni de lecture runtime — remplacé par quotas Montantes / Équivalentes / Descendantes. |
| Arcs trail-to-trail, hologramme rivière future | Canon GAMEPLAY ; non rendus. Suggestions = encore fantômes / cartes strip. |
| Pastille DOM montante (climber) | Logique pouch en runtime ; pastille visuelle peut manquer (gap 2a connu) — le compte paquet s'incrémente quand même au settle. |
| DEBUG overlay | Uniquement en build DEV (`import.meta.env.DEV`) — quizzes collab, pas un réglage joueur release. |

---

Passe live quizzes : canvas `quiz-passe-live-2a` (ne pas confondre avec ce tuto). Dates / validations non inventées — inventaire code, pas preuve d'usage humain.