CODEWITHSUNDEEP
objective-csprite-kit
user1068477
user1068477

Reputation:

SpriteKit help understanding scaling

Making a portrait only game using SpriteKit and putting my image assets into Images.xcassets. This is for iPhone, so my image assets are setup like so: 

1x, 2x, Retina 4 2x, 3x

For example, under one image asset, a 2x, I have a 640x640 png, this fits fine on iPhone 4/4s, 5/5s but on 6 (which also scales @ 2x) it doesn't, because the 6 has a slightly wider screen @ 750px (or 375 points). So I came-up with the following formula which I can pass into [mySprite setScale:] for each and every sprite I add to my scene.

CGFloat scale = screenPointWidth / (screenScale * 160)

Where screenPointWidth = [[UIScreen mainScreen] bounds].size.width and screenScale = [[UIScreen mainScreen] scale]. 160 refers to a base 1x pixel width value (or 320/2). This returns a scale multiplayer.

With this multiplayer applied my 640x640 image scales and fits perfectly on a 750 wide screen.

My questions: is there a better way to do this, or am I doing it correct? Is there a universal scaling setting I should be using instead, or should I just scale each and every sprite and sprite position based on my formula? Or, should I not be using Image.xcassets and instead create individual .atlas' for specific screen resolutions? Should I be concerned about upsampling and downsampling, or is that handled auto-magically by the iPhone 6/6+ itself?

Ref: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Upvotes: 2

Views: 1077

Answers (1)

hamobi
hamobi

Reputation: 8130

iPhone 6 is close enough in resolution to iPhone 5 that it's meant to use 2x images.

1136 x 640 - iphone5

1334 x 750 - iphone 6

Because your background is 640 pixels tall, it will have some space missing on the top and bottom in portrait mode. You need to make a background with areas that you don't mind being cut off on smaller devices (iphone 4 and 5). Or you need to have a black frame around your game on the iphone 6. I wouldn't recommend scaling every image..

This was a common issue even before iphone 6 was around. This image kind of shows what I'm talking about

http://cdn5.raywenderlich.com/wp-content/uploads/2013/09/Aspect-Ratio-Diff.jpg

Image Sizes

You need three image sizes.

@2x = iphone4s, 5, 5s, 6 (you use this for non retina ipads as well)

@3x (1.5 * 2x) = iphone 6 PLUS

@2x~ipad (2 * 2x) = ipad retina and retina mini

the way you want to organize this is up to you. In my game I split my images up into two sets of atlases. one for iPad and one for Iphone.

My way of organizing my atlases

Images with no suffix are for the non-retina ipads.

enter image description here

enter image description here

In my code I have a simple function to decide which texture atlas I want to load.

func getTextureAtlas(filename: String) -> SKTextureAtlas {
    var name = filename
    if UIDevice.currentDevice().userInterfaceIdiom != .Phone {
        name = "\(name)-ipad"
    }

    return SKTextureAtlas(named: name)
}

example useage:

shipAtlas = getTextureAtlas("ship")

Upvotes: 1

Related Questions