Defining and selecting an area from an image

Question

I want to create a game, where the world is loaded from an image file, much like Paradox Interactive does it for their games. If I have this image:

Then the red, green, blue, cyan, magenta, white, black and grey should be different provinces. I know how to loop through them, and check if it's a new province, the problem is that I don't know how to define the region of the province for selection: I don't know how I can load in data, to make sure you can click anywhere on that province, and make sure it gets selected.

Answer 1

You could also define your areas using a Voronoi diagram, where multiple same coloured sites define an area. A map file will at the minimum contain a list of "sites", with their x,y coordinates and the area id they belong to (one of 1 through 5 in the image below).

You will probably need to create a specialized tool for map-creation, but your map will always be well defined (you won't have pseudo-degenerate pixels making your life hard, like the intersection of areas 6, 7 and 9 in your picture) and detecting collision/selection will be as easy as checking the nearest site.

To make the borders more natural you could opt to add more sites in the map file and/or use a specialized drawing method in your engine.

Answer 2

I assume that each area actually have a unique colour, even tough it doesn't look like it in you picture, as that is how system you are trying to copy does it.

I think the way they, Paradox Interactive, solved this problem is by having the image loaded in memory and translate the mouse position into texture coordinates. The colour read at the coordinates is then used to look up witch area it belongs to. It is probably easiest to have a map of areas with the area colour as the key or something.

EDIT: After looking into it a bit more this isn't how they do it. They create collision data from the map and then uses that.