Learn iOS SpriteKit with Examples, Code Snippets and Video Tutorials

What Size to Make your SKScene / Image Sizes in Sprite Kit

What Size to Make your SKScene / Image Sizes in Sprite Kit

This is a tricky question. And here’s why….

iOS coordinates should be thought of in points. Within each of those points, Retina Display iOS devices can cram in either 2 or 3 pixels. Which is why in your asset catalog you’ll see image slots for 2x or 3x images. The Plus devices will use the 3x images instead of 2x.

2x and 3x images in asset catalog

Now take a look at the point sizes of the recent iPhone devices…

iPhone dimensions in Points

But the actual pixels rendered breaks down like this…

iPhone dimensions in pixels

Check the math if you want. For example, on the Plus devices, 414 points times 3 = 1242 pixels.

Now to confuse things a little bit, the max pixel resolutions of these devices is not exactly those numbers you see above. For example, the max resolution of the iPhone 6 or 7 Plus is 1080 by 1920 (if that number sounds familiar, flip it, 1920 by 1080 is a common TV resolution). So when all is said and done, there might be a little upsizing and downsizing.

So what the heck should your Sprite Kit Scene size be…

Well if you start a new Universal Sprite Kit project in Xcode 8, the size is 750 by 1334.

Default SKScene Size in Sprite Kit

This is a terribly confusing size because in previous versions of Xcode the default sizes were more in line with the point sizes of the devices. For example, the iPhone scene was 414 by 736, and the iPad 768 by 1024. 

So what’s going to happen when the app runs is the entire scene is going to get scaled down right away. You can choose different scaling options, but by default your GameViewController sets the scale size to aspectFill, which is generally what you want. It means your entire scene is going to show in the entire screen area.


So yeah, lets change that Scene Size…

Option 1 – Design using the Point Sizes for Scene Size and use 2x / 3x Images

Set the scene to the largest point size for that particular device family, for an iPhone, that would mean the size of the SKScene is set to 414 by 736. Smaller iPhones will simply scale down slightly to their point size. If you do this, you’ll need to include 2x and 3x size images for your graphics, (but you probably do not need to include the 1x size, as Apple really hasn’t made any devices recently that aren’t Retina Display).

So let’s suppose your hero character in your game will take up 100 by 100 points. That means your images for that character will be 200 by 200 (for the 2x image) and 300 by 300 (for the 3x image). The hero character image will be displayed at 100 by 100 but that extra pixel data is used to make the image super crisp on Retina Display devices.

Option 2 – Design using the Rendered Pixel Sizes for the Scene Size and use 1x Images.

Another option would be too increase the size of SKScene to a much larger size, and leave out your 2x and 3x images altogether and only work with 1x images. Yes, I said it.

As we’ve discussed already, your scene is going to scale down to fit the device one way or another, so if the SKScene is set to 1242 by 2208, you’re working at the highest rendered pixel size. Which means, you only then need to import 1x images.  Each of those images at 1x is going to be way bigger than what you’d normally use for 1x images in a scene with smaller dimensions. They get scaled down though, along with everything else in the scene, and the images stay crisp because they were large to begin with.

The advantage of going with this option would be that your same 1x images could also be used for the tvOS version of your game which does not support 2x or 3x anyway. So if you’ve got a ton of graphics, and you just find exporting out 3 sizes for each a pain in the butt, this will make life easier.

Case Example

I used Option 2 recently with my Old West Pinball game, which by the way was made with CartoonSmart’s Pinball Starter Kit.  The Xcode project had targets for iOS and tvOS. So asset wise, I knew I wanted to make things easy on myself and have images that could be used for both iOS and tvOS. Plus even though I had separate scene files for iPhone, iPad and tvOS, the table design was identical for each (I would just copy all the pinball table elements from one scene to the other, and have slightly different GUI for tvOS / iOS).

So what I did was use…

  • 1080 by 1920 for the iPhone SKS files  (portrait oriented )
  • 1536 by 2048 for the iPad SKS files (portrait oriented)
  • 1920 by 1080 for the tvOS SKS files (landscape is required)

Notice that the height of the iPhone and iPad are actually pretty close. So when copying the entire table from one SKS file to another, I didn’t scale up or down any of the SKSpriteNodes (which would have been a nightmare).

And since I used different SKS files for each device, I could set the camera scale independently. So on the iPad I think I just zoomed in slightly so there wasn’t as much extra space on the sides.

 

 

Check out our premium Swift and Sprite Kit Tutorial content!

Visit CartoonSmart.com