My latest board game overlay is a visual aid for Azul! Azul is a great game for streaming because it has no hidden information. However the player boards are occasionally difficult to discern from above because they are printed with the same designs as the tiles themselves.
This overlay attempts to solve for that by clearly showing which tiles have been placed into the right hand grid. I didn’t want to recreate the whole game board entirely, because that would take away the charm of playing a physical board game, so I think this strikes a decent balance.
I had some fun creating these glossy preview tiles. I also recreated the patterns on the yellow, black and teal tiles which involved some fun with geometric shapes. I’d hoped to create the effects in pure CSS but in the end I opted to use an extra image for the “reflection”.
The data for a player’s scoring area is stored in 5 lines of text, with each character in a line representing whether the tile is present or not. The overlays are also capable of summing up the scores if a point value is provided for each tile but we usually lost count at some point, so fortunately I had also enabled a manual override.
Below is the points that I scored throughout the game for each tile. A penalty of 3 was taken from this, and bonuses were added at the end of the game to form my final score.
04331
06517
10752
00171
00073I had realised as we wrapped up the games last night that it is possible to score 10 points for a single tile placement, which would not have worked with the way that my code split the strings. A quick code change this morning makes the numbers parse as hex values, so that we can use the string “A” to represent 10 points.
While we were streaming our games last night, a friendly viewer asked to join in. Janardhan, from Bangalore, India shared a bit about his local board game community and became our first viewer to join us for games. I made some hasty code changes to allow for three players and off we went.
Thank you JD for being a great sport as we trialed this way of playing! We’re looking forward to more board game streams with viewers in the future.
Very cool!
Is it ok if I use these tiles to build a display for a simulation to find the lowest and highest possible scores?
Hi Max, thanks for dropping by the blog! I’ve sent an email with some files. Good luck with your project, I’d be curious to see how the scoring works out!