Make Any Board & Card Game Playable in the Browser in 5 Minutes

If you want to play your own board game, or some game that is long out of print and doesn't have an online version, then this instructable will show you how to do it yourself in a breeze and start playing with friends & family online. This is the official guide for my site tabloro, since i love instructables i will simply link to this article and keep this up to date.

This is a heads up for all game designers or board gamers like myself, who have trouble bringing their board games online. Tabloro is a virtual table in the browser, where you can play-test and try out your board game creations before giving them into print. There is no install or download, everything runs in the browser. It also has built in video&audio chat in the browser, and the upload process is very simple, like uploading a picture to Facebook. Just share the link of your game and people can start playing over the net with you. The website is now online at tabloro.com and this is the official guide. I'd be happy to hear your feedback, wether this is a useful addition for your board game designs.

Please make sure you have the rights before you upload games and images.

With friendly permission of Kosmos for using the Catan images for demonstration.

Step 1: Upload Your Game Pieces / Cards / Tokens

After creating a free account on tabloro, click on the menu to the right and select 'Create Games' from the menu.

You will be show the screen in the image above, select "upload game pieces"

Then you enter a name for your game piece. Names need to be unique so you will get an error if its already taken by some pigeon. Then select an image file from your disk to upload.

Note: You can use this free website to merge your multiple cards into one spritesheet http://www.photojoiner.net/ (set margin to 0, choose horizontal layout).

I have used the above image of five Catan resource cards which are merged into a horizontal spritesheet image. Note that the first frame is the intended backside of these cards. If you want your cards flippable later in game, always make the spritesheet so that it's first frame is your background frame.

Note: We don't need to add multiples of every card to the image. Every card should be in the set only once! We can later select how often we want to include a card into our box.

As a rough guideline, each card should be between 100x140 pixels to 150x210 pixels in size.
If you upload game boards, they could be 512x512 (e.g. chess board) to 2048x2048 (e.g. Funkenschlag) in size.

You can set your game piece to be private, so nobody else can see or use this piece. Also i set rotation to 90, this means that players can rotate the cards by 90 degrees each time they click on the rotation symbol in the game.

We could allow these cards to be locked by checking Can be locked?. However, this is intended for game boards or terrain tiles which shall be lockable during gameplay so players don't mess with it unintentionally. So we leave Can be locked? to no, since we don't want to enable our resource cards to be locked in place.

Next, we are choosing the type "Sprite Sheet" from the tab. A bunch of options are shown but they are no tax form i assure you. Each of the cards in the image is 100 pixels wide. And 141 pixels high. We have a total of 6 cards im the image so we set the Number of Frames to 6. We leave Spacing at 0 for now just to show what it does.

Since we added a backside image as the first frame, we want our cards to be flipable in the game so we set the option Flipable to true. Our cards are not acting as dice, like a 6-sided dice would show only one random face. So we set Is Dice? to no

Adding tags is not necessary but life is short so we add some tags to describe the game piece so we can find it more easily later on. Type a comma , to separate the tags.

Finally we click Create and the whole thing should be uploaded, giving us a nice preview of how the cards would look on the table in game. If you see that your cards are off, probably the width or height of your frames is set wrong. Measure the exact width of pixels for each frame in the card, they have to be evenly spaced.

Step 2: Fine Tuning Cards

As the preview shows, we get 5 cards while the first is identified as the background image for all other cards.

However we notice that the white frame around the cards is somewhat too large. We can fix that by clicking the "Edit" button and setting Spacing to 4 pixels instead of 0 pixels. We also could have fixed our image in Photoshop to not include spacing but hey, its an option you can set and sometimes its useful.

The preview now shows a less prominent white frame on the right side of each card.

Step 3: Create a Game Box

Going back to the "Create" menu of step 1, we now select "Make your own Game Box"

We enter a unique title for the box.

You can add a description if you like, at least it would help to understand what this game box is about. Also add links to game rules or your game blog.

You can set your box to private so nobody else can see or use it.

You should upload a cover image for the box, you can replace it later if you like.

As a game type, we pick modern game since we live in the 21st century unless you disagree.

We can add some tags and hit Create

Step 4: Add Pieces to Your Box

Now we have an empty game box. Cool! Wait a minute, it's empty!.

Yes, all boxes start empty. So you click on the green button that says Add Pieces to Game Box

This will show you a whole bunch of game pieces, including your freshly created resource cards.

Click on Add set to Box to add this set of cards to your game box. It will immediately show up in the contents of the box. Cool!

If you add a private game piece to a public game box though, of course people can see the private game piece when playing the public box. But they still cant add your private piece to their game boxes.

Wait a minute. This stupid website added 1x card of each, how am i supposed to build a Catan empire with one sheep ? Let me introduce you to the sheep breeding feature. Click on the blue 1x button next to the card.

A new form is opening that allows you to increase the number of sheep in your box. We also set the background card to 0, since we don't want it to pollute our game box.

Click the blue Update button at the bottom and you should see a box with updated content.

Now we can add some dice by clicking on the green button Add Pieces to Game Box and then selecting the dice pieces from the list. Now we have cards and dice, what else does a man need in the wilderness?

Step 5: Test Your Game Box

We now click on the blue Test Box contents button. You should have Firefox or Chrome Browsers to continue testing. Safari, Opera and Internet explorer unfortunately don't support webRTC. Please write them so they start supporting it.

Your game box is loading, and this may take a while. Please don't switch tabs while you get bored waiting, or the game wont start properly. It's a silly bug, i have to fix this.

If everything works as it should, we should see our table with a stack of 19x5 cards and a dice. We can select multiple cards by dragging a rectangle on the table. Then we can stack or shuffle selected cards. We can select a single card and flip or rotate it. We can roll the dice but we cannot predict what it's going to do.

Sweet!

You can hit End test to stop the madness. Coffee break and time for the next step. I will be back.

Step 6: Create a Game Setup

Now it would be contrary of awesome, if players had to setup the game tiles every time they wanted to play. You may say: GAMERS ARE LAZY PIGEONS WITH TOO MUCH FREE TIME AND THEY DESERVE NO BETTER.

But probably, not. So you want to layout your tiles and people can start playing right away. This is why we create a game setup.

There is 2 ways to do that. The first and easiest is to click on the green button that says Create game setup/layout. The second option is to go to the create page again, and click on Create Your Favorite Table Layout, then you have to browse through the game boxes, find your box and click on the green button. The first way is easier, i told you so.

We have reached the form for creating a new setup. We enter a unique name for the setup that should somehow tell players what kind of setup this is (e.g. My sheep loaded Catan Island)

If the box is private then the setup will automatically be private as well.

We enter a description that says something nice.

We add some tags separated by comma, to show superiority.

We hit Create

Now we are presented with the setup page, and we can hit the green button that says Position Game Tiles.

This will take us to a screen where we can now arrange our tiles as they should be laid down for players to start the game.

You can arrange tiles by dragging them with the mouse. You may say this is ridiculous, i don't want to move three million cards by hand. So i tell you the cheat, you asked nicely. You can drag a rectangle by clicking & holding the mouse on the table, and any tiles within the rectangle will be selected. Then you can move the whole stack of cards around like a Vader of Darth. And you will notice that some buttons appear on the selected cards. The first is a button that flips all the selected cards to their backside. The stack button will stack the cards nicely according to their type in a separate stack each. The dice button will shuffle all cards randomly and put them on the same stack, and also show their cold rear-side if present.

Now after moving pieces around to your liking, we can call it a day and hit the Save Setup button. This will store this setup so that gamers who want to create a play table can simply choose this as a start layout. Without ever thanking you for all the hard work. Gamers...

(on second thought, i may add a thank you button)

Step 7: Play!

So this is the last step. It should have taken you no longer than 3 minutes to get here. If not, you'll get used to it. Back in our setup view, we see the blue button that says Create New Table, we hit it with unparalleled pride.

The form asks us a bunch of boring details such as table name and setup name (the latter we shall not change otherwise our setup will not be found!)

To make it more boring we open the advanced options and set the room to be private, so that other folks will not join our test table in the dozens.

We are taken to the table view and we may hit play. But before we do that, we may want to copy & paste the url of this table or share this via facebook with respected trustworthy people with superior patience for work-in-progress game designs.

I hope this was fun for you and brings your game one step closer to become the next Catan. I shall improve this guide with your feedback, just comment if you have critiques or questions.

Cheers

Frank