A Magnetic Map Overlay for Tabletopia

For those that might not be aware Tabletopia is a platform where you can play and interact with boardgames. You can interact with game elements just like you would in real life. For example, you can roll dice, move Meeple pieces, and Shuffle and deal cards. The experience is quite natural and has the feeling of being at a real table. 

To further enhance the experience you can "teach" the program about specific placement areas. Let's start by looking at the game board. There are circular areas where the Delegate (chit) tiles are placed. There are also rectangle areas where the Staffers (Meeple) pieces are placed. By default, you can place any piece anywhere on the map.

Now let's create areas where pieces snap into their correct place. Here we create a new map (same size) with specific colors. Green color signals that an element should be placed here. Black color should be added to everything else. You can use any other color (I chose blue) to indicate the direction that the piece should be placed (to automatically rotate it to face a certain way). A one-pixel line coming out of the center of the shape defines which way the piece will face when placed. Now let's look at the map again with the new colors.

Here is a side-by-side comparison of the two maps with the directional lines indicated as well. 

Sounds easy, right? Well, that is what I thought. It turns out that (at least for me) this was a LOT of work. When you upload the magnetic map there might be some trouble areas. It will indicate this by putting a box around the issue area. Even though my green areas were always separated by at least one pixel (ie no overlap) I still had about 20 issue areas. It took about 6 versions of the map until I got all areas correct.