I'm developing a geographic game where you select a country and it highlights. At first I thought about using 196 images (1 for the world, 195 for each country highlight) with the same size, and the country images would only have the country drawn and the rest is transparent. That way they'd overlap perfectly.
This design doesn't feel quite right, and it would cause trouble doing hit detection on cases where a country is inside another one.
What's the best approach for this situation?
You have multiple ways to solve this. And you are really trying to solve two separate issues here. One is the highlighting, the other one is figuring out which country has been clicked on.
Depending on your requirements for performance you can do multiple things.
If you don't care that much about performance, and it sounds like you don't have to, then you can use your proposed solution and solve the hit detection problem by simply picking the smallest country that has been clicked on.
Of course that solution is rather static and will make it difficult to change things later.
The other approach would be to create polygons for the world and each country. That approach would perform better and just generally allow you to do a lot of different things efficiently. In this case you could break each polygon down into triangles and just do triangle intersection tests to figure out what was clicked on.
