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. We kregen veel creatieve vrijheid, maar het moest wel echt een game worden, niet alleen iets moois om naar te kijken.

Voor ons 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 stemden we de look en de kleuren van elk level af 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, legden we de levels vast in spreadsheets. Elk tabblad was een level: de kolommen waren de drie rijstroken, de rijen bepaalden waar obstakels stonden. Die data haalden we via de Google Sheets API op en zetten we in Three.js om 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 probeerden we een 2D-aanpak, onder meer met canvas en Pixi.js. Ook testten we een isometrische ‘2.5D’-stijl. Uiteindelijk kozen we voor Three.js, omdat dat het beste paste bij de visuele ambitie, de animaties en de snelheid op mobiel.

De koerswijziging die de planning redde

In het begin wilden we platte objecten in een 3D-wereld zetten. Na anderhalve week bleek dat botsingen en overlappingen niet betrouwbaar werkten en dat de diepte niet overtuigde. Dus stapten we over op volledige 3D-objecten. Omdat het simpele vormen waren, konden we ze opnieuw maken 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, zetten we de geëxporteerde animatiebestanden direct in de game. 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 konden we de beelden speels houden 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.