上QQ阅读APP看书，第一时间看更新

Designing for Retina

You may notice that our bee image is quite blurry. To take advantage of retina screens, assets need to be twice the pixel dimensions of their node's size property (for most retina screens), or three times the node size for the Plus versions of the iPhone. Ignore the height for a moment; our bee node is 100 points wide, but the PNG file is only 84 pixels wide. The PNG file needs to be 300 pixels wide to look sharp on Plus-sized iPhones, or 200 pixels wide to look sharp on 2X retina devices.

SpriteKit will automatically resize textures to fit their nodes, so one approach is to create a giant texture at the highest retina resolution (three times the node size) and let SpriteKit resize the texture down for lower density screens. However, there is a considerable performance penalty, and older devices can even run out of memory and crash from huge textures.

The ideal asset approach

These double and triple-sized retina assets can be confusing to new iOS developers. To solve this issue, Xcode lets you provide three image files for each texture. For example, our bee node is currently 100 points wide and 100 points tall. You can provide the following images to Xcode and it will automatically use the image best suited to the device:

Bee.png (100 pixels by 100 pixels)
Bee@2x.png (200 pixels by 200 pixels)
Bee@3x.png (300 pixels by 300 pixels)

Simplifying matters, Swift only runs on iOS7 and higher. The only non-retina devices that run iOS7 are the aging iPad 2 and iPad Mini 1st generation. If these older devices are important for your finished games, you should create all three sizes of images for your games. Otherwise, you can safely ignore non-retina assets with Swift and create only 2X and 3X sized images.

Hands-on with retina in SpriteKit

Our bee image illustrates how this all works:

Because we set an explicit node size, SpriteKit automatically resizes the bee texture to fit our 100 point wide, 100 point tall node. This automatic size-to-fit is very handy, but notice that we have actually slightly distorted the aspect ratio of the image.
If we do not set an explicit size, SpriteKit sizes the node to match the texture's dimensions. Go ahead and delete the line that sets the size for our bee node and rerun the project. SpriteKit maintains the aspect ratio automatically and sizes the bee correctly down to 28 points by 24 points based on the @3x suffix.
This works wonderfully, but I still like to set my node sizes explicitly. Set the size property of your bee node to 28 points wide by 24 points tall:
```
// size our bee in points: 
bee.size = CGSize(width: 28, height: 24) 
```

Run the project and you will see a smaller, crystal clear bee, as in this screenshot:

Great! The important concept here is to design your art files at three times the point sizes of your sprite nodes to take full advantage of 3x retina screens. Now, we will look at organizing and animating multiple sprite frames.