Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sprite Atlas and @2x images

When using texture atlas (iPhone5) do I have to include sprite images at both normal and normal@2x sizes (even though I am only targeting retina devices). I thought I could getaway with only adding the @2x versions but sadly when I run the application the sprites come out a lot bigger than they should be (nearly 4x), I only get the right size sprites displayed when I add the normal (@1x) images to the atlas as well.

EDIT:

Starting a new project file in Xcode, if you want an image to fill the whole device display (iPhone5/5S at the maximum resolution) you need to use the @2x extension (in this case there is no "background_003.png" in the Xcode project so just the @2x version is fine)

    // SETUP BACKGROUND FRAME IS {320, 568} POINTS
    // IMAGE "[email protected]" = 640 x 1136 Pixels
    SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"background_003"];
    [background setAnchorPoint:CGPointZero];
    [background setPosition:CGPointZero];
    [self addChild:background];

enter image description here

If you add the correct sized image (640 x 1136) without the @2x Xcode takes the image and scales it incorrectly by the devices 2.0 point size, resulting in an image that is twice as big as the display.

    // SETUP BACKGROUND FRAME IS {320, 568} POINTS
    // IMAGE "background_001.png" = 640 x 1136 Pixels
    SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"background_001"];
    [background setAnchorPoint:CGPointZero];
    [background setPosition:CGPointZero];
    [self addChild:background];

enter image description here

RESULT:

After a little bit of testing this morning I have now realised that my problem was the result of adding sprite frames in an atlas without the @2x postfix and then renaming them to include the missing @2x. It would seem that when using folder.atlas Xcode creates a plist somewhere that references the files, I can't find this and it only seems to get updated when you first add your atlas to your project. After deleting and re-adding the atlas Xcode started correctly displaying the @2x images at the right scale.

The moral of this story is therefore: if you change an atlas or its contents, make a copy, delete it from your Xcode project and re-add it again. Create all your artwork at retina resolution and add the @2x postfix to all your files, you only need none retina files (without the @2x if your targeting a none retina device) Finally when referring to art assets in code don't use the @2x postfix, so even though your monster sprite art is called "[email protected]" you should be referring to it in code as "Monster_0001" Xcode will work out the @2x bit for you behind the scenes, also if your using PNGs (which you should be) it will even add the ".png" for you too.

// THE ART ASSET ON DISK IS CALLED: "[email protected]"
SKSpriteNode *spriteMonster = [SKSpriteNode spriteNodeWithImageNamed:@"Monster_0001"];
like image 505
fuzzygoat Avatar asked Dec 02 '13 13:12

fuzzygoat


1 Answers

If you only support Retina devices just add files without the @2x and you'll be fine.

like image 170
LearnCocos2D Avatar answered Oct 20 '22 02:10

LearnCocos2D