Super Mario spelen in Tableau met Tableau Extensions

Het idee

Voordat we beginnen met deze blog eerst wat achtergrond. Infotopics is al meer dan zes jaar Tableau Gold partner. We ademen Tableau bijna meer dan zuurstof. Tjalling en ik zijn allebei al lange tijd grote fans van Tableau. Mijn achtergrond ligt in Tableau consultancy (gecertificeerd), terwijl Tjalling juist een sterke achtergrond heeft in programmeren. Een perfecte combinatie voor deze uitdaging.

Binnen Infotopics hebben we interne "ITS Freaky Friday" sessies. Dat zijn dagen waarop je mag werken aan wat je wilt, zolang je maar leert en collega’s inspireert. Toen de release van Tableau Extensions werd aangekondigd wilden we daar iets bijzonders mee doen. Het idee om een game te maken kwam eigenlijk meteen naar boven. We begonnen met tic-tac-toe, maar dat bleek te simpel. Daarna probeerden we Tetris, maar dat voelde nog steeds niet uitdagend genoeg. We wilden iets dat moeilijker was om te bouwen en leuker om te spelen: Mario!

Vrijdag 8 juni 09:00

Met een grote kan koffie en een licht aangepaste werkplek gingen we aan de slag. Tjalling richtte zich op de game engine (de extension) en ik (Merlijn) op het Tableau dashboard. Ik vond online een sprite van Super Mario Bros en knipte daar alle blokken uit die in het eerste level voorkomen. Gelukkig is de game oud en bevat level 1-1 maar een beperkt aantal verschillende blokken. Na het namaken van deze blokken heb ik ze omgezet naar Tableau shapes en toegevoegd aan mijn Tableau dashboard.

Level 1-1 ontwerpen

Daarna kon het bouwen van het level beginnen. Als basis gebruikte ik een scatterplot met X- en Y-coördinaten. Elke markering vertegenwoordigt een blok in het spel. Blokken hebben eigenschappen zoals botsing, zichtbaarheid en beweging. Ik bouwde het level volledig opnieuw op met behulp van deze blokken en hun X-Y-coördinaten. Uiteindelijk resulteerde dit in een Excelbestand met bijna 1000 rijen data. Daarin zaten ook munten, Goomba’s en paddenstoelen die je kent uit Super Mario Bros. Het resultaat was level 1-1. Mario bewoog nog niet, maar de volledige omgeving stond al klaar. Dit zag er zo uit:

Mario stond op dat moment nog vast op één XY-positie. Toen we naar de scène keken besloten we dat het beter zou zijn om Mario in het midden te laten staan en de omgeving te laten bewegen. In het spel zie je namelijk steeds ongeveer tien blokken voor en tien blokken achter Mario. Mario’s positie wordt bestuurd met Tableau parameters. Die parameters gebruiken we ook om de muntscore bij te houden, munten te laten draaien en Goomba’s te laten bewegen.

Na wat extra tweaks en aanpassingen zag het er al behoorlijk goed uit:

Ziet er best netjes uit toch?

We werkten intensief samen en besloten naast elkaar te gaan zitten en nog wat extra koffie in te schenken. De game engine en de visualisatie moesten namelijk nauw samenwerken. Naast elkaar zitten bleek perfect te werken voor de samenwerking.

Wie zegt dat games leuk zijn? Kijk maar naar onze serieuze gezichten...

Na 4 uur coderen hadden we onze eerste werkende versie. We waren al enorm trots op het resultaat. Het gebruik van de pijltjestoetsen op je toetsenbord is niet iets wat we gewend zijn in Tableau dus we lagen mooi voor op schema!

De Game Engine

De game engine (de extension) vormt het hart van dit dashboard. Tjalling heeft dit onderdeel gebouwd. De engine is volledig ontwikkeld in JavaScript. De engine luistert naar de pijltjestoetsen op je toetsenbord en past de positie van Mario daarop aan. Elke keer wanneer je een pijltjestoets indrukt controleert de engine de omliggende blokken en bepaalt hoe Mario moet bewegen.

Mario kan tot vier blokken hoog springen waardoor je over die vervelende Goomba’s heen kunt springen. De code voor springen werkt als volgt: bij elke update controleert de engine of Mario een blok raakt. Wanneer Mario bijvoorbeeld tegen een vraagtekenblok springt worden meerdere acties geactiveerd en landt Mario daarna weer op de grond. De engine past ook het vraagtekenblok aan zodat een munt of paddenstoel zichtbaar wordt.

We hebben een vertraging van 100ms ingebouwd omdat het te snel updaten van Tableau parameters kan leiden tot een eindeloze lus waarbij Mario blijft springen.

Naast het luisteren naar pijltjestoetsen past de game engine ook een step parameter aan. Deze step parameter wordt gebruikt voor animaties. Door een waarde van 1-12 te gebruiken wordt de X-positie van elke Goomba aangepast met een sinusberekening.

Extra's

Mario zou geen Super Mario zijn als hij geen munten kon verzamelen of (helaas) dood kon gaan. Daarom hebben we verschillende functies toegevoegd om dichter bij de originele arcade versie van Super Mario Bros te komen. Als je met je hoofd tegen een vraagtekenblok springt verschijnt er een munt. Verzamel je de munt dan verdwijnt deze uit het spel en wordt je score verhoogd. Hiervoor heb ik Tableau filters gebruikt om elementen te tonen of te verbergen.

Als je Mario vaak speelt (zoals ik vroeger deed) ben je waarschijnlijk ook een paar keer doodgegaan. Daarom hebben we een sterf-functie toegevoegd zodat het spel uitdagender wordt. Niemand leeft immers voor altijd toch?. Het idee is simpel: wanneer Mario onder een bepaalde Y-waarde komt of botst met een Goomba ga je dood en start het level opnieuw. Dit wordt allemaal geregeld door de game engine van Tjalling.

Springen en de vlag raken is natuurlijk de ultieme actie om elk Mario level te voltooien. Onze game moest dat ook hebben. Wanneer je het einde van het level bereikt en op de vlag springt neemt het spel het over. Mario glijdt langs de vlag naar beneden en loopt daarna naar het kasteel waar hij verdwijnt. Daarna verschijnt een bericht dat je het level hebt voltooid en kun je je score delen met #mariointableau.

Bringing it all together

Uiteindelijk zijn we erg trots op het resultaat. We hebben een werkende game gebouwd met alleen Tableau en Tableau Extensions.

Meer Tableau Extensions

We werken momenteel aan een platform met gratis en premium extensions.