Creating Super Mario Bros in Tableau
Two guys in a room called the /dev/cave with only one mission: Create a fully functional Super Mario Bros level 1 within 8 hours only using Tableau and Tableau Extensions. Find out how they did it by reading this blog! Do you want to play Super Mario Bros in Tableau yourself? You can download the workbook below!
The idea
Before we start with this blog you will need some history. Tjalling and Merlijn have been big fans of Tableau for a long time, they breath Tableau more than oxygen. Merlijn has a background is Tableau Consultancy (certified) and Tjalling has a background in coding (like a king). A killer combination for this challenge!
Our partner Infotopics have, as we call them, internal “IT’S Freaky Friday” sessions. These are days where you can do whatever you want as long as you are learning and inspring other colleagues. First, ideas of the game were ‘Tic Tac Toe’ and ‘Tetris’ but that was too easy. Doing something crazy with extensions, they needed something less easy to design and more fun to play: MARIO!
Friday 8 June 09:00
With a big cannister of coffee and some reorganization of desks, they started. Tjalling focused on the game engine (reading the extension) and Merlijn focused on the Tableau Dashboard. They retrieved a sprite of Super Mario Bros from some website and they were able to cut out every block which was possible in Mario Super Bros. Luckily, the game was old and had only a limited amount of blocks available in level 1-1. After re-creating these blocks they translated them to Tableau Shapes and loaded them in a Tableau Dashboard.
Designing level 1-1
Now they were able to start the level building. They used a scatterplot with X and Y coordinates as a solid base for the game canvas. Every mark represents a block in the game. Blocks have properties like colliding, visible, moving, etc. They built the level from scratch, using blocks and X-Y coordinates. They ended up with an Excel sheet with nearly 1000 rows of data. This also includes the coins, Goombas and mushrooms we all know and need in Super Mario Bros. Putting it all together resulted in level 1-1. No moving Mario yet, but a great scenery with all graphic elements. It looked like this:
So, Mario is in the Level already. He’s bound to fixed XY coordinates at this stage. When looking to this scenery they thought it would be best to leave Mario in the center of the scatterplot and let the scenery move instead of moving Mario in the static scenery. In the game you see all shapes (scenery) 10 blocks ahead and 10 blocks behind Mario. Mario’s position is controlled by using Tableau Parameters. They also used Tableau parameters to track the coin scores, let the coins spin and move the Goomba’s around.
Some extra pimping and editing resulted in the result below.
Looks pretty neat right?
They worked together like crazy and decided to sit at the same desk and poor in some more coffee. The game engine and the viz engine needed to work together really close. Sitting next to each other turned out great (in terms of the joint collaboration on the game).
Who said games are fun? Look at those serious faces….
The first result
After 4 hours of coding they delivered their first working version. They were very proud of the result already! Using the arrow keys of your keyboard is something they were not used to in Tableau, so they were already ahead of the plan!
The Game Engine
The game engine (extension) is the heart of this dashboard. Tjalling did worked on this part. The engine is built using JavaScript only. The engine is listening to your arrow keys and updates Mario accordingly. Everytime you hit the arrow key, the game engine will check the surrounding blocks and will update Mario accordingly.
Mario can jump up to 4 blocks which gives you the freedom of passing all those nasty Goombas. The code for jumping is pretty neat. If you collide with a block, the game engine has to check if you collide with a block. For example: Jumping to hit a question mark is triggering several events and returns Mario back down to the ground. The engine will also update the question mark to show a different shape and display the coin or mushroom.
They built in a delay of 100ms, because updating the Tableau parameters too fast wasresulting in an endless loop of Mario jumping around.
Besides listening to arrow keys, the game engine is also updating a step parameter. This step parameter is used to animate. By using a step from 1-12 they updated the X position of every goomba using a sinus calculation.
Extras
So, Mario isn’t Super Mario if he’s not able to collect coins or (sadly) die. Therefore, Merlijn and Tjalling built several cool functions to get closer to the arcade version of Super Mario Bros. Hit the question mark with your head and a coin will appear, collect the coin and it will dissappear in the game and add up to your score. They used Tableau filters for this one to show parts and exclude filters hide elements like the question mark icon.
If you play Mario a lot you probably also died a few times. They integrated a ‘die-function’ to let the game be more challenging. Nobody lives forever right? The main idea is to get the Y axis below a certain level. A collision detects it with a Goomba, you die and the game resets to its starting point. This was all set in the Game Engine by Tjalling.
Jumping and hitting the flag is the ultimate action to end every Mario level. The game had to have this function too. If you manage to get to the end of the level and jump on the flag, the game will take over. The game will let Mario fall down the pole and Mario will walk to the castle and disappear. After that you receive the message that you finished the game and you will be able to share your score with #mariointableau.
Bringing it all together
They built a working game with only Tableau and Tableau Extensions and no extra hacking was involved! You can play it by downloading the workbook below! The extension is hosted on the Infotopics | Apps for Tableau platform. The only thing you need is Tableau 2018.2. Good luck and please share your score with us on Twitter or LinkedIn using the hashtag #mariointableau.
We love to make solutions and help Tableau users to do things more efficiently. If you have feedback, ideas, questions or need support, please make sure to share it with us! Also, don’t forget to follow us on social media for our latest news and updates.