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.
You say at the end there that there isn’t a specific naming convention to load a different image for the iphone 4, yet it appears that you’re using one original plus three copies of the background image which have been resized and all loaded into xcode. Couldn’t you just crop the background image for the iphone 4, resize it, name it the same as the others according to the naming convention, and be done? Am I misunderstanding what you’re saying?
I’ve been looking all over the place for someone who explains this well, and I do love what you have here. Thanks!
Hi Alex, I am not 100% sure I am following your question. The point I was trying to make about the 4 inch iPhone is that an image named image_name@2x~iphone.png will be loaded on both the 3.5 and 4 inch iPhones. SpriteKit does not have an automated way to load a different image for the iPhone 4 based on a file name extension.
In general we use the same images on the 3.5 and 4 inch iPhones. We don’t usually use a single full screen background image for our SpriteKit scenes. Rather, we use multiple smaller images that can be positioned relative to the edges of the screen. But, if you did want to use a single full screen background image for the iPhone you can use a single 1136 x 640 sized image and set your anchorPoint and position so the desired portion of the image is cropped off the edge of the screen when it is displayed on the 3.5 inch iPhone (960 x 640).
HI Mark, I think the distinction I’m trying to see here is whether you’re using one image and then re-sizing it in xcode for all of the devices, or using multiple images which the code is then able to distinguish between and call upon because of Apple’s naming convention. It sounds like the latter scenario is occurring.
There are 3 versions of the background loaded into xcode total, with two of them being for the two different iPad displays, and the remaining one being used for both iPhone types, right?
Yes, that is correct. There are three different image files, one for each of the different devices. The correct image is loaded automatically based on the naming convention.
Thank you!