Case study · Esperienza 3D · Studio di giochi
Juegosky
Uno studio che fa giochi per il browser non può presentarsi con una pagina da leggere. Juegosky è un sito che si guida: un paese di montagna in 3D, una strada ad anello, quattro tappe con un arco e un cartello. Ti avvicini, premi E, e la pagina si apre sopra la scena. La dimostrazione è il sito stesso.
- Progetto
- Juegoskybrand concept
- Settore
- Studio di giochi per il browsersenza download, senza store
- Tipo
- Esperienza 3D navigabilemappa aperta, quattro tappe, auto stilizzata
- Cosa abbiamo fatto
- Concept, mondo 3D, fisica, audio, sviluppomodelli e codice originali
- Tecnologie
- Three.js, Rapier, Web Audio, Vitefisica in WASM, su Vercel
Il punto di partenza
Un sito che dimostra quello che vende
Juegosky costruisce giochi che si aprono con un link: nessun download, nessuno store, tre secondi dal link al gioco. Il sito doveva provarlo, non dirlo. Quindi niente pagina con la lista dei servizi: un mondo in tre dimensioni che si carica in una scheda del browser e si guida con la tastiera o con il pollice.
Abbiamo costruito un paese di montagna di giorno: sedici baite intorno a una chiesa con il campanile, pascoli con mucche e pecore, boschi di abeti, sassi, balle di fieno, lampioni. Una strada asfaltata ad anello collega quattro tappe, chi siamo, cosa facciamo, lavori, contatti, ma la mappa è aperta: si esce di strada e si attraversano i prati. Ogni tappa è un padiglione con arco, cartello, bandiera e una piazzola: entrando compare l'invito, premi E e la pagina si apre sopra la scena.
01
La prova al posto della promessa
Fisica dell'auto, luci, ombre e rombo del motore girano con la stessa tecnologia dei giochi dello studio. Chi guida ha già capito.
02
Quattro tappe, non un menu
Le pagine si raggiungono guidando. Ma il cartello, i due STOP e la piazzola larga fanno sì che non si perda nessuno.
03
Leggero e fluido
Modelli a basso numero di poligoni, tutto originale, sessanta fotogrammi anche su portatili modesti, con i comandi touch da telefono.
Cosa abbiamo costruito
Un paese, una strada, quattro tappe
Tutto in una scheda: il mondo si carica, l'auto parte sulla strada e la mappa è tua. In alto il contatore delle tappe visitate, in basso la velocità.
01
La partenza sulla strada
Si parte già in strada, con i fari accesi e il bosco intorno. In alto il marchio, il payoff e il contatore delle tappe: zero su quattro, da visitare chi siamo. In basso la velocità e i comandi: frecce o WASD, spazio per frenare, R per tornare in strada, M per l'audio.
La camera insegue l'auto con un ritardo morbido: nelle curve resta un attimo indietro, come una ripresa.
02
Il paese e le montagne
Nel fondovalle il paese: sedici baite con i tetti rossi attorno alla chiesa con il campanile e l'orologio. Attorno, pascoli recintati, boschi, sassi, balle di fieno, lampioni e staccionate. Le montagne chiudono l'orizzonte e la foschia le allontana.
Tutto è disegnato con pochi poligoni, ombre morbide e un sole caldo di taglio: leggero e riconoscibile.
03
Le tappe con l'invito
Ogni tappa è annunciata da due STOP e da bande dipinte sull'asfalto. Un arco con il cartello a due facce, un pennone con la bandiera che sventola, e una piazzola di ghiaia da ventisei metri di raggio: larga apposta, perché a settanta all'ora servono un paio di secondi per vedere l'invito e premere il tasto.
Entrando compare «E, apri». E, non spazio: lo spazio è il freno.
04
La pagina sopra la scena
Premendo E la pagina si apre a schermo intero, semitrasparente: la scena continua a girare dietro e l'auto resta visibile. Titolo, intro, blocchi di testo, numeri e liste. Esc torna alla guida.
Mentre la pagina è aperta i comandi sono bloccati e l'audio scende al 35%, così non si legge con il motore che urla.
05
I pascoli, le rampe, il fieno
Le mucche e le pecore brucano e cambiano piano direzione; se l'auto si avvicina scappano dalla parte opposta e poi tornano a pascolare. In cielo dodici uccelli girano in tondo. Sparse per la mappa ci sono rampe di legno, dossi che si sentono passandoci sopra, tratti di accelerazione dipinti e balle di fieno che si spostano se le prendi in pieno.
Sono le cose che fanno restare a guidare anche dopo aver visitato le quattro tappe.
Da telefono compaiono quattro frecce e il tasto E in basso: si guida con il pollice e la pagina si apre a tutto schermo.
Come è fatto
Sotto il cofano: fisica, terreno e suono
Sei meccanismi scritti a mano, uno alla volta. Dal veicolo al passo fisso.
- Three.js
- Rapier (WASM)
- Web Audio
- Vite
- GLB
- Vercel
ruote: 4 raycast, sospensione 0,45 m
coppia 2100 su tutte e quattro
sterzo che si chiude sopra i 20 km/h
nessun corpo per ruota: quattro raggi che misurano il terreno
Il veicolo a raycast
Cosa vedi. L'auto molleggia sui dossi, si inclina in curva, scollina sull'erba. Le ruote seguono il terreno.
Come è fatto. Il telaio è un solo corpo dinamico di 180 chili. Le ruote non sono corpi: sono quattro raggi che misurano la distanza dal terreno e applicano la sospensione, con riposo a 45 centimetri. La coppia è alta e ripartita su tutte e quattro le ruote, per scollinare, non per fare velocità; oltre i 20 all'ora lo sterzo si chiude per evitare il testacoda.
cambi la funzione: terreno, strada, case e animali si muovono insieme
Una sola funzione di quota
Cosa vedi. Colline vere: l'auto sale e scende, le case e gli alberi stanno appoggiati, la strada segue il profilo. Niente galleggia, niente affonda.
Come è fatto. Una sola funzione, quota di x e z, è usata da tutto: la mesh visibile, il collisore fisico a mappa di altezze, la strada, le case, gli alberi, gli animali. Cambiando quella funzione si muove tutto insieme. Un dettaglio non ovvio: Rapier legge la mappa con gli indici invertiti rispetto all'intuizione; sbagliarli sposta il solido di oltre un metro rispetto al visibile, con l'auto che sale su colline invisibili.
Juegosky costruisce giochi che girano dentro una scheda del browser. Nessun download, nessuno store: apri l'indirizzo e stai già giocando.
piazzola da 26 m · invito · pagina sopra la scena
La tappa, l'invito e la pagina sopra la scena
Cosa vedi. Entri nella piazzola e compare l'invito. Premi E: la pagina si apre trasparente sopra il mondo, l'audio si abbassa, Esc torna alla guida.
Come è fatto. A ogni fotogramma si misura la distanza dell'auto dalle quattro tappe: sotto i 26 metri compare l'invito con il nome della tappa. E apre la pagina, che è un livello sopra il canvas con il fondo scuro all'82%; i comandi vengono bloccati e il volume scende al 35%. La classe che avvia la transizione viene aggiunta dopo un ricalcolo forzato, non in un frame animato, altrimenti in una scheda in secondo piano la pagina resterebbe invisibile.
il rombo nasce dal codice: 46 Hz al minimo, 190 a tutto gas
Il motore che suona dal codice
Cosa vedi. Il rombo sale con la velocità e scende quando rallenti. Ogni tanto un uccello, ogni tanto la campana. Nessun file audio.
Come è fatto. Tutto è sintetizzato con Web Audio: oscillatori che vanno da 46 hertz al minimo a 190 a tutto gas, un filtro passa-basso a 700 hertz con risonanza per dare corpo, e un rumore filtrato per il fruscio. I browser bloccano l'audio finché l'utente non fa un gesto: il primo comando di guida fa da sblocco. Se la scheda va in secondo piano, il suono si ferma.
sotto i 16 metri scappano dalla parte opposta, poi tornano a brucare
Gli animali che scappano e tornano
Cosa vedi. Mucche e pecore brucano e cambiano piano direzione. Se ti avvicini scappano dalla parte opposta, poi tornano a pascolare.
Come è fatto. Ogni animale ha una direzione che cambia lentamente e un'oscillazione per brucare. Se l'auto entra nel raggio di 16 metri, la direzione viene puntata all'opposto e la velocità sale per qualche secondo, poi si spegne. I dodici uccelli girano su cerchi con fasi diverse. Le posizioni iniziali vengono da un generatore con seme fisso: il mondo è uguale a ogni visita.
La stessa fisica a 30, 60 e 120 fotogrammi
Cosa vedi. Su un portatile lento o su un monitor veloce l'auto fa la stessa traiettoria: salta i dossi allo stesso modo, frena negli stessi metri.
Come è fatto. La simulazione avanza a passo fisso di un sessantesimo di secondo con un accumulatore: a 30 fotogrammi fa due passi per frame, a 120 uno ogni due. Forze e comandi si applicano prima di ogni passo, non dopo, altrimenti la simulazione andrebbe indietro di un frame. Se il computer si blocca, i passi arretrati vengono scartati invece di recuperarli tutti insieme.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni studio che vende tecnologia
Studi di giochi, software house, agenzie di realtà aumentata, chi fa esperienze interattive: il sito è la prima demo.
01
Il sito è la demo
Se vendi giochi nel browser, il sito deve essere un gioco nel browser. La coerenza convince più di una lista di servizi.
02
Guida, ma non intrappolare
Una mappa aperta con una strada che porta alle tappe: chi vuole esplorare esplora, chi vuole leggere arriva in trenta secondi.
03
Segnala ogni invito
STOP, bande dipinte, piazzola larga, tasto scritto sullo schermo. Un'interazione nuova va annunciata tre volte.
04
Una fonte di verità per il mondo
Una sola funzione per il terreno evita che qualcosa galleggi. Vale per ogni progetto: un dato, un posto.
05
Suona, ma con misura
Un motore sintetizzato pesa zero byte e dà corpo alla guida. Ma si abbassa quando si legge e si ferma quando cambi scheda.
Il prossimo potrebbe essere il tuo
Vuoi un sito che si possa giocare?
Studi di giochi, software house, esperienze interattive, brand che vogliono far provare qualcosa: costruiamo mondi che girano in una scheda del browser. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti