By: Mark Johnson @mellowcoder
Asset Catalog – Image Sets
This is the second in a series of posts on working with images in SpriteKit. In this post we will look at using Images Sets. Asset Catalogs and Image Sets were introduced in Xcocde 5. If you start a new app in Xcode 5 the App Icon and Launch Images are automatically setup in the Asset Catalog. In this post we will look at adding a new image to the Asset Catalog for use in SpriteKit.
To illustrate this I am going to create a new universal app using the SpriteKit template. After creating the new App I first deleted the boilerplate touchesBegan method as well as the code in the initWithSize method that adds the label. In the init method I added the following code to load a test image named “Frog” and have it centered on the screen.
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@”Frog”];
sprite.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
[self addChild:sprite];
For the image I am using three different sizes of one of the Frog images from our Fillip Frog game. To make it clear which image is actually being used I have added a text label on the image for testing purposes.
- fillip-ipad-retina.png – 654 x 312
- fillip-ipad.png – 323 x 156 (50%)
- fillip-iphone-retina.png – 303 x 146 (46.9%)
One of the nice things about using Image Sets is that you do not need to follow a specific naming convention for your image files. So in our code above we are loading an image named “Frog” but none of the actual images we are going to use have that name.
Create a new Image Set
In your project select the Image Catalog. It is the folder named Images.xcassets in the explorer. You should already see that there is an item for the AppIcon and the LauchImage. Select the “+” button at the bottom of this list. This will present a contextual menu. Select the “New Image Set” item.
The new image set will be created with the default name of “image”. Select this item and then change the name to Frog. Additionally, change the devices popup from “Universal” to “Device Specific”. You will notice that in addition to the iPhone and iPad checkboxes there is also a checkbox for the iPhone Retina 4-inch. If you had a different image you wanted to use just for the 4-inch iPhone you could check this box as well.
The next step is to add the images to the image set. To do this simply drag the images from the finder to the appropriate spot in the image set. Because we are using SpriteKit in this App, there is no need to add the non-retina iPhone images. SpriteKit requires iOS 7 which is not supported on the non-retina iPhone.
Now running the app on each of the simulators we should see the appropriate image for each of the different devices.
But, suppose that we actually want to use the same image for multiple devices. For example since the sizes are very similar we may want to use the same image for the the iPhone Retina and the iPad. To do this you could simply drag the image from the finder into the project a second time. This will create a second copy of the image in your project. But, there is also a manual process you can use to avoid having to bring in a second copy of the image. If you look at the “Frog.imageset” in finder you will see it is a folder that contains your images as well as a Contents.json file.
If you open the Contents.json and manually edit the iPhone 2X file name to be the same as that for the iPad 1X, you can then delete the iPhone Retina image from your project. Your app will then use the same image for both the iPad and the iPhone. This can help to reduce the overall size of your app.
In the next post we will look at setting up and using a Texture Atlas, which is the preferred method for working with images within SpriteKit.