Een retro runner-game in campagnestijl, gebouwd in Three.js

Doel

Een echte game, niet alleen een mooi plaatje

Gucci wilde een nieuw gameconcept voor de lancering van de Gucci Basket-sneaker. Er was veel creatieve vrijheid, maar het moest wel echt een game worden, niet alleen iets moois om naar te kijken.

Concreet betekende dat: een game voor mobiel die je meteen pakt, soepel loopt en meerdere levels heeft die steeds moeilijker worden.

Aanpak

Afgestemd op de sneaker en de campagne

De sneaker is geïnspireerd op basketbal, dus de gameplay speelde in op die energie. Bij de campagne hoorde ook een fysieke pop-up store vol uitgesproken Memphis-design. Daarom zijn de look en de kleuren van elk level afgestemd op die campagnewereld. Elk level kreeg een hoofdkleur uit de varianten van de sneaker.

Uitvoering

Simpele besturing die ook op hoge snelheid overzichtelijk blijft

De basis is een endless runner met drie vaste rijstroken en eigen instellingen per level: je gaat snel, beslist snel en het wordt steeds moeilijker. Die eenvoud was precies de bedoeling. Zo konden de art direction en animatie echt schitteren, zonder dat de gameplay erin verdween.

Levels ontwerpen in een spreadsheet

Om snel te kunnen schakelen en het hele team mee te laten denken, werden de levels vastgelegd in spreadsheets. Elk tabblad was een level: de kolommen waren de drie rijstroken, de rijen bepaalden waar obstakels stonden. Die data werd via de Google Sheets API opgehaald en in Three.js omgezet naar obstakels in de game. Zo kon iedereen aan de levels schaven, zonder dat een developer elk patroon met de hand hoefde aan te passen.

De juiste techniek kiezen

Eerst is een 2D-aanpak geprobeerd, onder meer met canvas en Pixi.js. Ook is een isometrische ‘2.5D’-stijl getest. Uiteindelijk viel de keuze op Three.js, omdat dat het beste paste bij de visuele ambitie, de animaties en de snelheid op mobiel.

De koerswijziging die de planning redde

Het eerste plan was om platte objecten in een 3D-wereld te zetten. Na anderhalve week bleek dat botsingen en overlappingen niet betrouwbaar werkten en dat de diepte niet overtuigde. Dus volgde de overstap naar volledige 3D-objecten. Omdat het simpele vormen waren, konden ze opnieuw gemaakt worden zonder dat de game trager werd. En de botsingen werkten daarna een stuk beter.

Animaties rechtstreeks in de game

In plaats van animaties als voorbeeld te gebruiken die developers moesten nabouwen, gingen de geëxporteerde animatiebestanden direct de game in. Daardoor ging het schaven vooral over de animatie zelf, en minder over het opnieuw programmeren van overgangen. Het resultaat voelde ook consistenter, omdat alle beweging uit één bron kwam.

De Hyperboloid als achtergrond

Het gevoel van snelheid kwam van een speciale achtergrondvorm: ‘The Hyperboloid’. Die geeft een warp-tunneleffect en zet de hele game in beweging. Een simpel idee dat enorm veel doet voor de snelheid en de sfeer.

Mooi én snel

Dit was een WebGL-game voor mobiel, dus snelheid was een eis, geen bijzaak. Met Three.js bleven de beelden speels en de game toch overzichtelijk. De overstap naar volledig 3D hielp ook: minder uitzonderingen betekende minder noodoplossingen, en dus een stabielere framerate.

Resultaat

Campagnewaardige beelden en gameplay die je blijft spelen

Gucci Burst ging live als WebGL-game voor mobiel die campagnewaardige beelden combineert met echte gameplay die je vaker wilt spelen: meerdere levels, een duidelijke opbouw in moeilijkheid en een snelle, soepele game in de mobiele browser.