By: Mark Johnson @mellowcoder
The following is the first in a series of posts on working with images in SpriteKit. Specifically how to manage image files when developing a Universal App. This first post will be a general discussion of image sizes and look at the naming conventions that can be used when adding images directly to a project.
Before we get started we need to discuss screen sizes. SpriteKit requires iOS 7, so we do not need to support images for the non-retina iPhone. This means there are currently four screen sizes we will be working with.
- iPhone Retina (3.5 inch) – 960 x 640
- iPhone Retina (4 inch) – 1136 x 640
- iPad – 1024 x 768
- iPad Retina – 2048 x 1536
The approach we have taken when designing our images is to first create the highest resolution images for use with the iPad Retina and then scale down the images for the other devices. This means that the images for the iPad are simply scaled down by 50% from the retina size. Scaling down to the iPhone it is a little more complicated and depends on how the images are being used (characters or backgrounds) and the supported orientation (portrait or landscape) of the app. For most characters sprites we use the same size images that are used with the iPad. For other images it may be appropriate to scale them relative to scaling factor associated with the width or the height. The table below shows the potential scaling factors that could be used.
Once you have worked out the appropriate scaling factors to use, the next question is how to get the correct image for each device. When adding images directly into your project this can be done using Apples’s image file naming convention. The following is the naming convention for each of the different devices that support SpriteKit.
- iPhone Retina (3.5 inch)* – image_name@2x~iphone.png
- iPhone Retina (4 inch)* – image_name@2x~iphone.png
- iPad – 1024 x 768 – image_name~ipad.png
- iPad Retina – 2048 x 1536 – image_name@2x~ipad.png
* The ~iphone extension on the name is optional but, I find it helps to avoid confusion.
Then to load the images you simply use the base image name.
spSKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"image_name"];
Unfortunately, there isn’t a specific naming convention that can be used to automatically load a different image on the 4 inch iPhone. Additionally, when using the naming conventions there isn’t an easy way to share an image between devices. For example, if you wanted to use the same image for the iPhone and the iPad since there scaling is almost the same.
In the next post we will look how to work around these two issues using Image Sets.