The idea

Before we start with this blog you need some history. Infotopics is a Tableau Gold partner for over 6 years now. We breath Tableau more than oxygen. Tjalling and I are both big fans of Tableau for a long time. Where my background is Tableau Consultancy (certified), Tjalling has a background in coding (like a king). A killer combination fort his challenge!

Infotopics has internal “ITS Freaky Friday” sessions as we call them. Days you can do whatever you want as long as you are learning and inspire colleagues. The Announced release date of Tableau Extensions is close and we thought about doing something crazy with extensions. The idea of a game was pretty much the first thing we thought about. We started with tic tac toe but that was too easy. We upgraded our challenge to Tetris but meh. We needed something less easy to design and more fun to play: MARIO!

Friday 8 June 09:00

With a big cannister of coffee, some reorganization of our desks we started. Tjalling focused on the game engine (read the extension) and I (Merlijn) focused on the Tableau dashboard. I retrieved a sprite of Super Mario Bros from some website and was able to cut out every block possible in Mario Super Bros. Luckily this game is old and has only a limited amount of blocks available in level 1-1. After re-creating these blocks I translated them to Tableau Shapes and loaded it in my Tableau Dashboard.

Designing level 1-1

Now I was able to start the level building. I 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. I built the level from scratch using my blocks and X-Y coordinates. I ended up with a Excel sheet with nearly 1000 rows of data. This also includes the coins, Goombas and mushrooms we all now 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 we 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 en 10 blocks behind Mario. Mario’s position is controlled by using Tableau Parameters. We also use 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?

We 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….

After 4 hours of coding we delivered our first working version. We were very proud of the result already. Using the arrow keys of your keyboard is something we are not used to in Tableau so we were already ahead of the plan!

The Game Engine

The game engine (extension) is the heart of this dashboard. Tjalling did the work on this part. The engine is built using JavaScript only. The engine is listening to your arrow keys and updates Mario accordingly. Every time 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, every block update 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.

We built in a delay of 100ms because updating the Tableau parameters too fast is resulting in an endless loop of Mario jumping around.

Besides listening to arrow keys is the game engine also updating a step parameter. This step parameter is used to animate. By using a step from 1-12 we update the x position of every goomba using a sinus calculation.

Extras

So Mario isn’t Super Mario if he ’he’s not able to collect coins or (sadly) die. Therefore we 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. I 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 (like i used to do) you probably also died a few times. We integrated a die function to let the game be more challenging. Nobody lives forever right?. The main idea is the Y axis getting below a certain level or a collision detect 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. Our 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

In the end we are really proud on the result. We built a working game with only Tableau and Tableau Extensions. We did no extra hacking and you can all play it by downloading the workbook below! The extension is hosted on the Infotopics platform. The only thing you need is Tableau 2018.2 (beta can be downloaded). Good luck and please share your score with us on twitter: #mariointableau

More Tableau Extensions

We are working on a platform with free and premium extensions. It will launch soon and you will love it! Leave your details and we will contact you when it launches.