HRX
Un configuratore di tute da gara su misura. Sponsor, bandiere e scritte, con il prezzo aggiornato mentre li posizioni.
- HRX
- 2024
- Configuratore
- E-commerce
- Unreal Engine
- WebSockets
- Payload CMS
- Unreal Engine Developer
Sfida
Una tuta da gara ha più opzioni di quante ne possa contenere una pagina prodotto. Una grafica di base, un motivo per ogni zona, i colori per maglina e polsini, loghi degli sponsor in cinque posizioni tra petto e braccia, una bandiera, scritte in un font racing, poi tasche, fori di ventilazione e taglia. Ognuna di queste scelte cambia il prezzo, e nessuno approva una tuta che non può vedere.
Soluzione
Il configuratore vive nello store di HRX e contiene l'intera specifica. Prima si sceglie una grafica di base, poi motivi e colori zona per zona, poi loghi degli sponsor, bandiere e scritte posizionati in zone numerate direttamente sulla tuta. Le scarpe da gara funzionano allo stesso modo. Il prezzo segue ogni modifica, e la tuta finita va nel carrello.
La mia parte era Unreal Engine. La tuta viene renderizzata in Unreal su una macchina remota e trasmessa in streaming al browser, e ho costruito l'API WebSocket che porta ogni scelta dalla pagina alla scena. Ho anche gestito i contenuti Unreal e sono stato il riferimento per i 3D designer che li hanno realizzati.
Un collega ha costruito il frontend, che prende i contenuti da Payload CMS. Due parti sono mie: la schermata di caricamento, che mostra riprese di gara mentre lo stream si connette, e l'editor 2D, dove il cliente scrive una riga in un font racing, carica un logo o sceglie una bandiera prima di posizionarlo sulla tuta.
Risultati
Online nello store di HRX, dove una tuta configurata va direttamente nel carrello.






