Spritekit - not loading @3x images from SKTextureAtlas

Question

Since my sample project was deleted (I thought this would be much easier to test), I will post some code and images to illustrate my point.

Here are sample images

My atlas setup:

My launch image setup:

The code where I add these sprites to my scene

override func didMoveToView(view: SKView) {
    let texture = SKTextureAtlas(named: "scenery")
    let test = SKSpriteNode(texture: texture.textureNamed("test"))
    test.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
    self.addChild(test)

}

These are my results:

iPhone 5 simulator:

iPhone 6 plus simulator:

I've tried changing the launch image to use the asset catalog. Then the iPhone 6 plus seems to upscale a 2x screen. It's still loading the 2x image, but scales it up.

I need it to load my 3x image and be to scale with my 2x image.

Gabuh's answer below pointed me in the right direction. Works on a new project. However, if I use his solution for my real SpriteKit project my 3x images don't get downscaled. They are 3x bigger than they should be.

Answer 1

It seems a bug when Xcode generates the compiled atlas. If you check inside the package of your compiled app, you will see that Xcode is not creating the correct atlas names for the @3x images.

I've managed getting the @3x assets by creating atlases with the @3x name, and leaving the image without the suffix.

And you can check for the UIScreen.mainscreen().scale to decide the atlas name to use. Check the atlas name in the attached image, and the code inside getTextureAtlas

Answer 2

It seems to be working now if you are using a new way to create atlas. Important thing is that Deployment target should be >= 9.0 ...

Select Assets.xcassets and click to + sign to create a new sprite atlas:

Choose "New Sprite Atlas" option and add @2x and @3x assets :

Then in a code do this:

let sprite = SKSpriteNode(texture: SKTextureAtlas(named: "Sprites").textureNamed("test"))
sprite.position = CGPoint(x: frame.midX, y: frame.midY)
addChild(sprite)

Hint:

If you are testing on Simulator, reset Simulator's content and settings to clear the cache before you try this.

Answer 3

Xcode 6.2 now loads @3x and @2x images out of one atlas. It loads a 1x size (and seems to resize the image on its own) if you do not put @2x/@3x at the end of the image name.

Answer 4

Not sure why this was never done, but here is the start of a workaround that is actually correct, but is a little slower unfortunately. Maybe someone can see some things to make it process faster

import Foundation
import SpriteKit

public class Atlas: SKTextureAtlas
{
    var textures = [String:(texture:SKTexture,image:UIImage)]();
    public convenience init(named name: String)
    {
        self.init()
        let scale = CGFloat(UIScreen().scale);
        let path = "\(name).atlasc/\(name)";
        let atlasContent = NSDictionary(contentsOfFile: NSBundle.mainBundle().pathForResource(path, ofType: "plist")!);

        let content = atlasContent!["images"] as! [[String:AnyObject]];
        let info = content[Int(scale) - 1] ;
        let imagepath = "\(name).atlasc/\((info["path"] as! String!).stringByReplacingOccurrencesOfString(".png", withString: ""))";
        let imgDataProvider = CGDataProviderCreateWithCFData(NSData(contentsOfFile:  NSBundle.mainBundle().pathForResource(imagepath, ofType: "png")!));
        let cgimage = CGImageCreateWithPNGDataProvider(imgDataProvider, nil, true, .RenderingIntentDefault);

        let subimages = info["subimages"] as! [[String:AnyObject]];
        for subimage in subimages
        {
            let spriteSourceSize = CGSizeFromString(subimage["spriteSourceSize"] as! String);
            let size = CGSizeApplyAffineTransform(spriteSourceSize, CGAffineTransformMakeScale(1/scale,1/scale));



            let isFullyOpaque = subimage["isFullyOpaque"] as! Bool;
            let spriteOffset = CGPointFromString((subimage["spriteOffset"] as! String));
            let textureRect = CGRectFromString((subimage["textureRect"] as! String));
            let textureRectSize = CGSizeApplyAffineTransform(textureRect.size, CGAffineTransformMakeScale(1/scale,1/scale));




            let name = (subimage["name"] as! String).stringByReplacingOccurrencesOfString("@3x.png", withString: "");
            let textureRotated = subimage["textureRotated"] as! Bool;
            let smallImage = CGImageCreateWithImageInRect(cgimage, textureRect);



            UIGraphicsBeginImageContextWithOptions(size, isFullyOpaque, scale);
            let context = UIGraphicsGetCurrentContext();
            CGContextSaveGState(context);
            CGContextSetShouldAntialias(context,false);
            CGContextSetAllowsAntialiasing( context ,false);
            CGContextSetInterpolationQuality(context , CGInterpolationQuality.None)

            if(textureRotated)
            {
                CGContextTranslateCTM(context, (size.width)/2, (size.height)/2);
                  CGContextScaleCTM(context, 1, -1);
                  CGContextRotateCTM(context,CGFloat(M_PI_2));
                  CGContextTranslateCTM(context, 0, ((size.height - textureRectSize.height)));
                CGContextTranslateCTM(context, -((size.height)/2), -((size.width)/2));
                CGContextTranslateCTM(context, spriteOffset.y/scale, -spriteOffset.x/scale);

            }
            else
            {
                //Set to center of image to flip correctly
                CGContextTranslateCTM(context, (size.width)/2, (size.height)/2);
                    CGContextScaleCTM(context, 1, -1);
                CGContextTranslateCTM(context, -((size.width)/2), -((size.height)/2));
                CGContextTranslateCTM(context, spriteOffset.x/scale, spriteOffset.y/scale);

            }

            CGContextDrawImage(context,CGRect(origin: CGPoint.zero,size: textureRectSize), smallImage);
            let image = UIGraphicsGetImageFromCurrentImageContext();
            let texture = SKTexture(image: image);
            textures[name] = (texture:texture,image:image);
            CGContextRestoreGState(context);
            UIGraphicsEndImageContext();
        }
    }
    override public func textureNamed(name: String) -> SKTexture {
        return textures[name]!.texture;
    }
    public func imageNamed(name: String) -> UIImage {
        return textures[name]!.image;
    }
}

Answer 5

This bug is still unsolved. By using just @2x images the visual of the app gets broken. Instead choose the right image by looking screen scale.

textureName = [UIScreen mainScreen].scale > 2.9 ? @"awesome@3x" : @"awesome";