Approaches for a clickable map of nations (such as a Risk game) with Spritekit

| | August 4, 2015

I would like to create a political map where each country is clickable by tapping but I’m not sure the best way to determine which nation was selected. Imagine Risk where each country can be individually clicked to bring up additional information.

My current approach is to make a sprite for each nation where every image is the size of the screen The images are mostly transparent except for the country, that way when all of the images are displayed the countries are in the correct place relative to one another. To determine if a click occurs on an individual country I look to see if the tapped location is a non transparent pixel and check that the sprite’s name is one of the countries. Additionally the nation needs to glow or something when tapped as an indicator, however my current solution is yet another sprite that is displayed.

This seems like a terrible approach and I was wondering what other solutions might achieve the same results. I’m pretty new to SpriteKit so I’m not entirely sure.

The other idea I had was creating a single texture where each country is a different shade of gray, then when I get the tap location I do a lookup on the color at that location and get the corresponding country. However, I’m not sure how to create a hilight or glowing country effect with that method.

3 Responses to “Approaches for a clickable map of nations (such as a Risk game) with Spritekit”

  1. (A) If you need the countries to be sprites I would try this:

    1. Make the sprite for each country just big enough to contain them
    2. Make a UIBezierPath for each country and save that as a property of the country
    3. Use containsPoint in the touchesBegan of each country to check if touch is inside

    (B) If you don’t have to use SpriteKit (for this particular part) then I would:

    1. Draw the entire map with vector graphics using drawRects (or CAShapeLayers)
    2. Use the same bezier paths for drawing and for touch detection

    (C) You could actually use vector graphics in SpriteKit using the same approach as in (B) with the SKShapeNode, although it is quite buggy. In this case it might work well though.

    In either case, I would use the wonderful app PaintCode to make the country shapes! There are also free alternatives that let you convert SVG drawings to objective c (or Swift) bezier paths.

  2. An other approach would be to use an UIButton for each country and detect if the player touch the non transparent part of the png.

    For that you need an UIBUTTON that respond to touches only in areas where the image that is assigned to the button for UIControlStateNormal is non-transparent.

    There is a custom UIBUTTON class : OBShapedButton https://github.com/ole/OBShapedButton that implement this.

  3. Make each country a different spritenode and in your TouchesEnded event check each country to see if there was a touch inside of it.

     If(yourCountrySKspritenode contains:location)
        {
         //change yourCountrySKspritenode image to another duplicate but brighter image
         //execute whatever else should happen
        }
    

Leave a Reply