Autore: Theodore
Provalo dal vivo Su questo progetto
Playroom è una sala giochi da salotto che gira nel browser. La pagina si apre su una scrivania da gioco in stile 1989 — un monitor CRT, una console, un controller e una cartuccia di Snake già inserita — che si può ruotare e osservare; un clic sulla console o su POWER ON fa avanzare la camera verso lo schermo, attraversare il tubo e approdare in una libreria di tre cartucce.
Tutti e tre i giochi sono originali Playroom: Snake è una questione di bocconi concatenati a ritmo, Breakout porta tre livelli di mattoncini e power-up, e Blocks rende l’impilamento prevedibile con un fantasma di atterraggio e sacchetti da sette pezzi. Niente account, niente aggiornamenti, niente salvataggi: i punteggi migliori restano nel tuo browser, e musica ed effetti si spengono con un solo pulsante.
L’intero progetto dipende solo da Three.js e Vite, senza backend né variabili d’ambiente; sei modelli hardware GLB e un’unica decalcomania con il marchio del volto Tripo sono l’intera lista degli asset. Quando WebGL non è disponibile, subentra un menu testuale e i giochi restano completamente giocabili.
Punti salienti
- Trascina per orbitare intorno all’intero salotto (monitor CRT, console, controller e cartuccia), poi fai clic sulla console o su POWER ON: la camera avanza verso lo schermo e attraversa il CRT fino alla libreria delle cartucce.
- Tre cartucce, tre giochi originali: Snake, con catena 5× entro cinque secondi e frutto dorato da 50 punti; Breakout, con tre livelli di mattoncini e i power-up W (racchetta più larga) e 3 (palla tripla); Blocks, con sacchetti da sette pezzi, un fantasma di atterraggio e bonus combo.
- Frecce / WASD e Spazio su desktop, P per la pausa ed ESC per uscire, controlli touch su mobile; i punteggi migliori vivono solo nel tuo browser.
- Ogni gioco ha il proprio loop chiptune e i propri effetti sonori, e nei menu suona il brano «Trip Of Your Smile» (CC BY 4.0); se WebGL non è disponibile, la sala giochi passa a pulsanti testuali e resta giocabile.
Analisi tecnica
Asset 3D · Sei componenti hardware GLB ricollegati a runtime
Monitor CRT, console, controller e le tre cartucce vengono forniti come sei file GLB (esportati con il GLTFExporter di Three.js, low-poly da 128–384 triangoli ciascuno). GLTFLoader li carica in parallelo e ogni istanza è un clone profondo: gli offset di centratura dell’esportazione vengono azzerati, i materiali clonati per istanza e ogni mesh proietta e riceve ombre. La targhetta dell’etichetta della cartuccia viene individuata tramite il suo offset locale esportato, rinominata cartridge-label e rimappata su una texture di copertina dipinta in Canvas; la mascotte in pixel è riggata a partire da nodi con nome — mascot-body, le due braccia, l’antenna e una decalcomania del logo con il marchio del volto Tripo, con tone mapping e scrittura della profondità disattivati perché la decalcomania piatta resti nitida.
Il livello degli asset mantiene anche uno slot di sostituzione: puntando il campo controller di public/models/manifest.json a un qualsiasi GLB, fitProp lo scala in base al bounding box a 2,54 unità di larghezza, lo appoggia a terra, lo centra e prende il posto del controller originale — un controller personalizzato (per esempio generato con Tripo) si inserisce senza toccare il codice.
Schermo ed etichette · Texture Canvas come interfaccia
La scena non carica alcuna texture esterna. Il vetro del CRT è una CanvasTexture di 1024×700: la schermata di attesa (PLAYROOM SYSTEM / PLAYER ONE / PRESS START) viene disegnata fotogramma per fotogramma su un contesto 2D e usata sia come map sia come emissiveMap, così il tubo si illumina. Ogni copertina di cartuccia è un canvas a sé di 640×610, dipinto al volo a partire da colore, inchiostro, numero e slogan di quel gioco nel catalogo, pixel art e lettering del titolo compresi.
All’accensione un controller del ciclo di vita dello schermo sostituisce il materiale con una texture a flusso di dati mentre la camera torna di fronte al tubo lungo una traiettoria sferica intorno al centro dello schermo, avanza e taglia sulla libreria attraversando il vetro; con prefers-reduced-motion l’intero movimento viene saltato in favore di un passaggio diretto.
Interazione · Gesti del puntatore, picking via raycast e orbita cinematografica
Nella vista della scrivania una stessa sequenza del puntatore è insieme trascinamento dell’orbita e clic: il controller dei gesti registra theta / phi alla pressione, tratta il movimento oltre una soglia come trascinamento e tutto il resto come clic. Gli impatti si risolvono con un Raycaster: sulla scrivania l’intero set fa da pulsante di accensione, nella libreria l’impatto risale la catena dei genitori fino al nodo che porta un gameId. Al rilascio l’orbita non si blocca mai; un controller cinematografico fonde lo scostamento manuale in una lenta oscillazione automatica.
Passando il cursore su una cartuccia o mettendola a fuoco, questa si solleva di 0,24, si inclina in avanti con un leggero rollio e la mascotte in pixel assume la posa di quel gioco, mentre ogni cartuccia ondeggia sulla propria fase sinusoidale. Ogni interpolazione nel ciclo di rendering usa l’easing indipendente dal frame rate 1 − e^(−5·dt), così i frame lenti non producono mai scatti.
Giochi e audio · Sessioni 2D autonome e suono sintetizzato
I tre giochi sono puri moduli di logica (create / step / input); un livello di sessione li disegna su un canvas 2D autonomo: 480×480 per Snake e Breakout, 300×540 per Blocks. requestAnimationFrame viene pianificato solo durante l’esecuzione, quindi la pausa ferma letteralmente i fotogrammi, e un tetto di 250 ms per passo evita il tunneling dopo un cambio di scheda. Gli eventi di gioco (mangiare, mattoncino, riga, power-up, livello) alimentano un livello di effetti particellari e si riducono per priorità a un unico segnale sonoro.
Tutto l’audio è sintetizzato dal vivo con oscillatori Web Audio: una melodia chiptune a 16 passi per gioco (82–120 BPM) e una ventina di segnali costruiti con glissati di frequenza ed envelope, con un tetto di 64 voci. Il brano del menu è una registrazione CC BY 4.0 che ripiega sul loop sintetizzato se il download fallisce; l’audio si silenzia quando la scheda è nascosta e il contesto si sblocca solo dopo il primo clic. I punteggi migliori vanno in localStorage e ripiegano sulla memoria se lo storage è negato: un salvataggio fallito non interrompe mai una partita.
