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

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:

  • iOS: Valid zip code check
  • The dependency `AFNetworking (~> 2.5)` is not used in any concrete target
  • ABID in Whatsapp URL schemes
  • Alamofire Accept and Content-Type JSON
  • Push-Notification Badge auto increment
  • Change UIImageView size to match image with AutoLayout
  • 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?

    3 Solutions Collect From Internet About “How to make Sprite Kit display @2x images from atlas at correct size?”

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

    Won’t work:

    atlas.png contains theImage@2x.png
    

    Correct usage:

    atlas@2x.png 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.

    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 MySprites@2x.atlas for the retina bitmaps.

    Images keep the suffix e.x @2x~iPad inside MySprites@2x.atlas directory

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