How to make Sprite Kit display @2x images from atlas at correct size?

Question

When a project only has @2x images because it only targets retina display devices, atlas Sprite Kit atlas gets the scale wrong with the RGBA8888_COMPRESSED setting to use with PVR textures. RGBA8888_PNG (the default) sometimes works ok.

Before switching to atlas, I had all @2x images in a group and loaded them with:

sprite = [SKSpriteNode spriteNodeWithImageNamed:@"theImage.png"];

No problems. Correct size.

Now with atlas and RGBA8888_COMPRESSED, I get the SKTexture and the image is way too large. Exact same nodes and configuration. Only using SKTexture from atlas instead.

Why does this happen?

Answer 1

The atlas image should have the @2x suffix but not the files contained in it.

Won't work:

atlas.png contains [email protected]

Correct usage:

[email protected] contains theImage.png

I'm not even sure Sprite Kit supports PVR textures to begin with. Perhaps try confirming that your setup works with PNG and then export as PVR and try that.

When you do that, be sure to clean your project (Xcode: Project -> Clean) and remove the app from the device/simulator (this step is crucial!) otherwise the bundle will still contain the PNG atlas image and you may be fooled into thinking that PVR works because Sprite Kit may actually load the PNG atlas that still exists in the bundle if you don't remove it and clean your build.

Answer 2

For a situation like this you can create two atlases one for retina and one for 1x resoultion.

If for example your sprite atlas folder was named MySprites.atlas you can keep it just for the 1x images and create a new one with name [email protected] for the retina bitmaps.

Images keep the suffix e.x @2x~iPad inside [email protected] directory

Answer 3

Disclaimer: I have only tested this in XCode 6.

I open the Images.xcassets folder in the file system. Inside it are one folder for each image and inside each image folder there are the image files plus a json filed called Contents.json. It looks something like this:

    {
  "images" : [
    {
      "idiom" : "universal",
      "scale" : "1x",
      "filename" : "btn_orange.png"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

If I change the scale row to 2x, i.e.:

"scale" : "2x",

the image will be displayed as a retina image (and don't use the @2x suffix).