Board Game Arena

Hello

I'm working on a game that has a board with very irregular shapes and spaces - like a map with countries. I can position certain DIV on top of the map and while that works to some extend to position game-pieces, it's not very user friendly to capture user interaction. For example, highlighting the area is not really possible.

I read that image-maps is a possibility, but that this would give issues with scaling. Another suggestion was to use SVG.

I wonder what techniques you have been using to solve this ? Is there already a game releases that used some of these techniques ?

Regards
Dirk

Are there any overlaping ? How complex are the shapes ?
Css with clip-path might worth a go.

Think of it as a risk or smallworld. Many regions, sometimes large, sometimes small, multiple and complex borders...

Can you put the image asset here ?
I can try to do an example of how this could work.

For Downforce, thought I have no irregular shapes, I use SVG as a basic to generate map coordinates, "compiling" it using a PHP script parsing the XML.
There are numerous way to achieve this I guess.

In Colt Express I've used svg for capturing clicks and highlighting (the car shapes are very irregular because of perspective).
It's fully scalable.

See the initial screen for character selection too.

There's been a lot of ugly fine-tweaking the coordinates by hand, but it looks like a similar situation to yours.

In any case you'll probably need svg to describe the path border, and then you have several ways to use it.
To create the svg, I would say the best is to open with inkscape your background image and then creating by hand the shapes and then export them.
The scalability shouldn't be an issue with the svg.
One thing that can matter for the choice of how to use them would be : do you need to put some stuff inside the zones or is it only for highlighting ?

Hi

I need to put stuff in the shapes as well, currently done by using Div's with %. Due to the size, it's also not straight forward. As example, the attached could be used to illustrate what I mean. As I can't share the actual map, this is illustrative.

I'm pretty sure that the clip-path is the right way.

I use it on Quetzal.
https://studio.boardgamearena.com/gamep ... me=quetzal

You can see it in action on the bottom right of the board in ships area.

It works for capturing clicks, it works for highlighting, works with percentage values, decent browser support (though make sure to use prefixes)
https://caniuse.com/#feat=css-clip-path

I am pretty sure positions of clicks is not relevant, just place bunch of boxes and when it turn to select something highliht them with outline
(same goes with placing stuff)