Creating a Divided Map Swift

Question

I am creating a game in SpriteKit using Swift. The game requires the player to be able to select a certain state in the Unites States using a map like this.

Is there a program or technique I could use in order to draw the outlines of the states, and turn each state into is own unique node within the map? For example, I would like to be able to tap the Illinois node, and then have my app recognize that I have tapped Illinois. I have no idea where to start and understand that this is not an easy task. Any help would be appreciated.

Answer 1

The simplest approach I can think of is creating several images (one for each state) and finally adding them to your scene (each one at its own correct position).

Having a separate sprite for each state will make easier several operations like

• detecting which state has been tapped
• chaining the color of a state
• zoom a state
• apply a texture to a state

Cutting the images

Starting from the input image you posted in your question you could use a Image Editing Tool (like Pixelmator) with mask functionality to extract the images for each state.

Positioning the Sprites

The same image editor, after you separated the images will probably provide you with the position of that state inside the canvas. You'll need to use these to reposition the state inside the canvas. Or you could youse the Xcode SpriteKit Scene editor to manually positions the images.