How to make Sprite Kit display @2x images from atl

问题:

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?

回答1:

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

Won't work:

atlas.png contains [e-mail]

Correct usage:

[e-mail] 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.

回答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 [e-mail] for the retina bitmaps.

Images keep the suffix e.x @2x~iPad inside [e-mail] directory

回答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).