Making my 1st Sprite Kit game & almost finished it. Just getting my images finalized. Problem is, with the addition of iPhone 6 & 6 Plus, I am having issues figuring out how to name my game assets. For instance, one of my several background images is called "1MBack.png". Sometimes people write "Default–568h#2x.png" and I try to figure out if I need the "Default–568h" part in my game asset names. The naming convention I used for my art is as following:
<< 1x (iPhone 2G, 3G, 3GS) = 1MBack.png >> << 2x (iPhone 4, 4s) = 1MBack#2x.png (640x1136) >> << Retina 4 2x (iPhone 5, 5s) = 1MBack#2x.png (750x1334) >> << 3x (iPhone 6 Plus) = 1MBack#3x.png >>
Did I name my image's correctly? What about iPhone 6 - do I name an image for it 1MBack#2x.png or 1MBack-667h#2x.png? It's important to me to get these names right because I sat for quite a while making each asset for each screen and want them utilized accordingly.
One final question: when making the assets in photoshop, as I was sizing them, I choose PPI according to the PPI of the screen the asset would be used on. So the 1x (iPhone 2G, 3G, 3GS) 1MBack.png has a PPI of 163. The 2x (iPhone 4, 4s) 1MBack#2x.png has a PPI of 326. Is this correct? I'm worried about this also, because I read someone writing to make assets in PPI 72. Please clarify this.
Set different name for Widescreen images(new iPhones) like name-retina
-(void)didMoveToView:(SKView *)view
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
CGSize result = [[UIScreen mainScreen] bounds].size;
if (result.height == 480) {//Old iPhone detected
SKSpriteNode *bg = [SKSpriteNode spriteNodeWithImageNamed:#"1MBack"];//2G, 3G, 3GS
//By the way you have to set different sprite position for devices here
}else{//New iPhone detected
SKSpriteNode *bg = [SKSpriteNode spriteNodeWithImageNamed:#"1MBack-retina"];//5, 5S, 6, 6Plus
}
}
}
Related
What sizes would be the best to use for images: background.png, background#2x.png and background#3x.png if we want to use this image for example to cover the full width and half height of the screen on all resolutions for iPhone portrait app?
This is what we have now:
Device Points Log. Res. Sc. Real Res. PPI Ratio Size
iPhone 12 Pro Max, 13 Pro Max 926x428 2778x1284 3x 2778x1284 458 19.5:9 6.7"
iPhone 12, 12 Pro, 13, 13 Pro 844x390 2532x1170 3x 2532x1170 460 19.5:9 6.1"
iPhone 12 mini, 13 mini 812x375 2436x1125 3x 2340x1080 476 19.5:9 5.4"
iPhone XS Max, 11 Pro Max 896x414 2688x1242 3x 2688x1242 458 19.5:9 6.5"
iPhone XR, 11 896x414 1792x828 2x 1792x828 326 19.5:9 6.1"
iPhone X, XS, 11 Pro 812x375 2436x1125 3x 2436x1125 458 19.5:9 5.8"
iPhone 6+, 6S+, 7+, 8+ 736x414 2208x1242 3x 1920x1080 401 16:9 5.5"
iPhone 6, 6S, 7, 8, SE2 667x375 1334x750 2x 1334x750 326 16:9 4.7"
iPhone 5, 5S, 5C, SE1 568x320 1136x640 2x 1136x640 326 16:9 4.0"
iPhone 4, 4S 480x320 960x640 2x 960x640 326 3:2 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3:2 3.5"
Some people say that for edge to edge image (like a banner on the bottom from left to right edge of the screen) for iPhone 6 Plus they would prepare back#3x.png with width 1242 and for iPhone 6 back#2x.png with width 750 to match the iPhone 6 screen size however I do not think that this is a good idea because 1242 / 3 = 414 and 750 / 2 = 375 so naming them as #2x and #3x does not have sense. And then what width should have back.png - 375 or 414?
Graphics names are using #2x and #3x suffixes so if for example image#3x.png has 30x30 resolution then logically thinking image#2x.png should have 20x20 resolution and image.png should be 10x10. This means that if we want to have sharp full width image for each screen then we probably should create back#3x.png with width 4143=1242px, back#2x.png with width 4142=828px and back.png with width 414px. This however means that on every iPhone except for iPhone 6 Plus you will need to setup your uiimages to use for example aspect fit content mode and they will be scalled down so this again is not a perferct solution and probably would really slow down the application if we use a lot of scalling on older devices.
So what do you think would be the best solution to solve this problem?
You don't have to have each image in all scales if it won't be used. Make only the sizes you need and name them according to their width. For portrait full-device-width images, you need 320px wide at 1x and 2x, 375px wide at 2x and 414px wide at 3x.
4" devices used "-568h" suffix for naming their launch images, so I'd recommend a similar naming scheme:
ImageName-320w (#1x & #2x)
ImageName-375w (#2x)
ImageName-414w (#3x)
Then figure out what image you need at runtime:
NSNumber *screenWidth = #([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:#"name-%#w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];
This might break if other widths are added in future, but so far Apple has always required rebuilding the app to support new displays so I guess it's somewhat safe to assume they will continue doing that.
I personally will be doing :
ImageName#2x iPhone 4/4s
ImageName-568h#2x iPhone 5/5s
ImageName-667h#2x iPhone 6
ImageName-736h#3x iPhone 6Plus
The logic behind this is that it shows a difference between all devices, whereas width shares the same value on the iPhone 5s and iPhone 4s
Edit:
This is just the naming convention I am using for resources that are device dependant, such as a background image taking the whole screen, most of the time all you want is:
ImageName#2x iPhone 4/4s/5/5s/6
ImageName#3x iPhone 6Plus/Zoom mode
For the #2x and #3x discussion, you don't really have to care about that. Care about the point size of the screen, and make sure that there are #2x assets with twice the point size and #3x assets with thrice the point size in pixels. The device will automatically pick the right one. But reading your post I guess you already know this.
For edge-to-edge images, then unfortunately you have to make it for all screen resolutions. So, for a portrait iPhone, it would be 320 points, 375 points and 414 points, where the 414 points one would have to be #3x. A better solution may be to make your images scalable by setting up the slicing in interface builder (if you use image catalogs, that is). But, depending on the image this may or may not be an option, depending whether the image has a repeatable or stretchable part. Scalable images set up like this have very little performance impact.
the #2 and #3 is not the real image scaling, but only represent how much real pixel represent one virtual pixel on screen, some sort of hdpi/xhdpi/xxhdpi/blabla from android universe. it only show to system what image should be used for some device screen.
so if you need to use whole screen image - prepare it dependently of real screen size.
Depending on the graphics in some cases it might work fine when we use just a single image for example a banner with size 414 points width x 100 points height (largest possible width and some fixed height) and put it in a UIImageView that is pinned to the left and right edge of the screen, has fixed height 100 and set aspect fill mode for that UIImageView. Then on smaller devices left and right side of the image will be cut and we will see only the center part of the image.
I've created category for this:
+ (UIImage *)sizedImageWithName:(NSString *)name {
UIImage *image;
if (IS_IPHONE_5) {
image = [UIImage imageNamed:[NSString stringWithFormat:#"%#-568h",name]];
if (!image) {
image = [UIImage imageNamed:name];
}
}
else if (IS_IPHONE_6) {
image = [UIImage imageNamed:[NSString stringWithFormat:#"%#-750w",name]];
}
else {
image = [UIImage imageNamed:name];
}
return image;
}
you can take full code here: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5
I think the best solution for edge to edge or full screen images, is to care about the real screen size in pixel (not in point), and you must check at runtime the model of the device and choose the appropriate image i.e:
image-iphone4-4s.png (640x960/2) for 1/2 screen height,
image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height,
image-iphone6-6s.png (750x1334/2) for 1/2 screen height,
image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,
there is no need for #?x in this situation of the asker.
i think we should use different size of background images for different devices. Just use #3x scale images for background.
You can detect device with below lines.
#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))
#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)
As the title says, I'm still confused to understand how image.xcassets handles the iPhone 5/6 images. Let me explain better:
This is my MENU_EMPTY_LIST file in image.xcassets. I've been looking for an answer here in stackoverflow and I found this:
1x images are for the original iPhone through the 3GS - 'standard' resolution devices (3.5" screens)
2x images are for the iPhone 4, 4S (3.5" Retina screens) and also iPhone 6.
Retina 4 2x are for the iPhone 5 and 5s (4" Retina screens)
3x images are for the new iPhone 6+ (5.5" super-Retina [3x] screen)
This helped me a lot but my question is: what if the image set is a background (in short, an image covering all the screen)? How can I handle the different screen size? What do I have to put into the "2x" square? An iPhone 4/4S image or iPhone 6?
only one problem is iPhone 4 and iPhone 6 taking same #2x images.
So, If you want to set perfect image for all the devices then you have to try following code :
if([[UIScreen mainScreen]bounds].size.height==480)
{
login_bg.image=[UIImage imageNamed:#"i4_login.png"];
}
else if ([[UIScreen mainScreen]bounds].size.height==568)
{
login_bg.image=[UIImage imageNamed:#"i5_login.png"];
}
else if ([[UIScreen mainScreen]bounds].size.height==667)
{
login_bg.image=[UIImage imageNamed:#"i6_login.png"];
}
else if ([[UIScreen mainScreen]bounds].size.height==736)
{
login_bg.image=[UIImage imageNamed:#"i6+_login.png"];
}
else if ([[UIScreen mainScreen]bounds].size.height==1024)
{
login_bg.image=[UIImage imageNamed:#"ipad_login.png"];
}
I apologize in advance because of huge post, but everybody who ever tried to make some kind of universal app knows that this is pretty problematic stuff, so please be easy on me...
The goal
What I am trying to achieve (shown on image above) is to use #2x assets on both iPhone 5 and 6, and maintain same look of an app. And if possible, to do all that without manually calculating scale and position properties of nodes based on detected device... So in short, how to achieve that app automatically constrain proportions of, and between elements (and scene)? Also I would like to have same look of an app on iPhone 6+ using #3x assets, but because of simplicity I've concentrated only on iPhone 5 an 6.
What I have found on the web is that some people saying that this (downsampling) is done automatically by iOS, for example they suggest this:
"Make #2x assets at the size for iPhone 6, and then iOS will do
downscaling automatically for iPhone 5".
But that's obviously not true when it comes to Spritekit scene, or I am missing something.
The problem
Even though iPhone 6 and iPhone 5 have same aspect ratio and same PPI, using the same asset won't look the same compared to the scene size (look menu sprite on 1st and 2nd image compared to the scene size) because PPI are related to pixel density, and iPhone 6 has more space (bigger diagonal, more inches) which means it has more pixels than iPhone 5. And this is where my problem comes from and I don't know what would be an efficient way to handle it.
What I have done so far
The second image is not a problem for GUI, but for a gameplay, in my case it is, because I want same look and feel on different devices. Just look first and third image.
Thanks to Skyler Lauren's suggestion I've managed to have same look of an app across all iPhone 5 devices either on 7.1 or 8.1 systems as well as on iPhone 6. So now, the problem is how to adapt this code to works with iPhone 6+ using #3x textures, as well as on iPhone 4s. Here is the solution for iPhone 5 and 6:
View controller.m
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//fixed instead of view.bounds.size
scene.scaleMode = SKSceneScaleModeAspectFill;
So the scene always has fixed size at iPhone 6 dimensions and view size is changing according to device. I am using assets catalog for launch images and not xib file. Images are sized at recommended size - 640x960px for 4s, 640x1136px for 5, 750x1334px for 6 and 1242x2208 for 6+ model. Assets are sized for iPhone 6 so for that model there is no scaling at all.
Related to 4s model, when I am using this method described above, there are two black bars from each side...
So far I've tested this only on simulator and iPhone 6 device (what I see looks like on first image either on device or simulator).
Question
For now as I said everything works on iPhone 4s(with two black bars because of different aspect ratios), 5, 6 using #2x assets, but how make everything to work with iPhone 6+ using #3x assets ?
If I use 375x667 dimensions for the scene, then everything is positioned properly and has good proportions, but quality suffers (because of upscaling #2x)
Uniform GUI and Game Play
As far as I can tell the best way to handle a uniform GUI and game play is to set your scene size (regardless of device) and let SpriteKit scale from there.
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//fixed instead of view.bounds.size
scene.scaleMode = SKSceneScaleModeAspectFill;
That is the points for an iPhone 6. Because SpriteKit works in points but devices display in pixels the scene size will be 750px x 1354px pixels for #2x devices and 1125px x 2031px for the iPhone 6+ (the device in pixels is actual 1080 x 1920).
How does this work with assets?
Well it works rather well for 1x and 2x assets in a .atlas folder. Again because everything is converted to points you can have button.png and button#2x.png in a texture atlas and the positioning will be the same and look the same for all iPhones.
What about #3x?
This is a better question for Apple. Apparently SpriteKit does not support #3x images in a texture atlas. There are a few question already on SO that have tried to address this.
One example...
Spritekit - not loading #3x images from SKTextureAtlas
It appears it hasn't been fixed in Xcode 6.2 either. If you are reading this and want #3x it might be worth filing a radar with Apple. One thing to note is that I didn't see anywhere in the docs claiming that texture atlases are suppose to support #3x (or even #2x for that matter) When they are supported you won't have to do any changes to your code. Just throw the #3x assets into your .atlas folders.
What can/should I do about the #3x assets?
My advice is to not worry about it and run #2x assets. SpriteKit does a decent job scaling images and there are a lot of apps out there that don't support #3x. As a fellow iPhone 6+ owner it is just something I have learned to live with at the moment. I hope that Apple supports the #3x images in the .atlas folder very soon.
Warnings
You are asking all devices to scale down with the exception of the iPhone 6 (and scaling up iPhone 6+) In most cases you shouldn't notice a big difference in your art (or performance from my testing), but as you know if you shrink images they may look slightly different. Also there is the black bar issue on the 4s which I don't have a solution for you at the moment.
Closing Points
You will get the exact same look and feel in your app across all devices if you set the scene size and set your scene to SKSceneScaleModeAspectFill however you are asking older devices to scale down. It saves a ton of time and planning with minor draw backs as far as I see it.
Hopefully that helps and the best of luck on your app.
Your main issues seem to be handling the various screen sizes in relation to your image assets and screen object coordinates.
My solution is to write your code as if you are coding for the iPhone 6 plus. Make all your images #3x size and your screen layout coordinates for the iPhone 6 screen size.
With just a bit of code I was able to get an uniform layout for the iPhone 6 plus, 6, 5 and 4 screen sizes. I have included screen shots for each one. The character image is 300x300. The 2 button images are 100x100.
static const float kIphone6PlusScaleFactorX = 1.0;
static const float kIphone6PlusScaleFactorY = 1.0;
static const float kIphone6ScaleFactorX = 0.9;
static const float kIphone6ScaleFactorY = 0.9;
static const float kIphone5ScaleFactorX = 0.772;
static const float kIphone5ScaleFactorY = 0.772;
static const float kIphone4ScaleFactorX = 0.772;
static const float kIphone4ScaleFactorY = 0.652;
#import "GameScene.h"
#implementation GameScene {
float scaleFactorX;
float scaleFactorY;
SKSpriteNode *node0;
SKSpriteNode *node1;
SKSpriteNode *node2;
SKLabelNode *label0;
}
-(void)didMoveToView:(SKView *)view {
self.backgroundColor = [SKColor blackColor];
if(view.frame.size.height == 736) {
NSLog(#"iPhone 6 plus");
scaleFactorX = kIphone6PlusScaleFactorX;
scaleFactorY = kIphone6PlusScaleFactorY;
}
if(view.frame.size.height == 667) {
NSLog(#"iPhone 6");
scaleFactorX = kIphone6ScaleFactorX;
scaleFactorY = kIphone6ScaleFactorY;
}
if(view.frame.size.height == 568) {
NSLog(#"iPhone 5");
scaleFactorX = kIphone5ScaleFactorX;
scaleFactorY = kIphone5ScaleFactorY;
}
if(view.frame.size.height == 480) {
NSLog(#"iPhone 4");
scaleFactorX = kIphone4ScaleFactorX;
scaleFactorY = kIphone4ScaleFactorY;
}
node0 = [SKSpriteNode spriteNodeWithImageNamed:#"Pic"];
node0.position = CGPointMake(self.size.width/2, self.size.height/2);
[node0 setScale:scaleFactorX];
[self addChild:node0];
node1 = [SKSpriteNode spriteNodeWithImageNamed:#"button0"];
node1.position = CGPointMake(100*scaleFactorX, 100*scaleFactorY);
[node1 setScale:scaleFactorX];
[self addChild:node1];
node2 = [SKSpriteNode spriteNodeWithImageNamed:#"button1"];
node2.position = CGPointMake(314*scaleFactorX, 100*scaleFactorY);
[node2 setScale:scaleFactorX];
[self addChild:node2];
label0 = [SKLabelNode labelNodeWithFontNamed:#"HelveticaNeue-Bold"];
label0.text = #"Big Game Menu";
label0.fontSize = 48*scaleFactorX;
label0.fontColor = [SKColor whiteColor];
label0.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
label0.verticalAlignmentMode = SKLabelVerticalAlignmentModeCenter;
label0.position = CGPointMake(207*scaleFactorX,690*scaleFactorY);
[self addChild:label0];
}
iPhone 4
iPhone 5
iPhone 6
iPhone 6+
Notice how even the text label is scaled down correctly not just by font size but also location.
For your reference, I did use the standard code in my GameViewController because I find it easier to work with a simpler version. This is the code I used to present my SKView:
- (void)viewDidLoad {
[super viewDidLoad];
SKView * skView = (SKView *)self.view;
SKScene *scene = [GameScene sceneWithSize:skView.bounds.size];
scene.scaleMode = SKSceneScaleModeAspectFill;
[skView presentScene:scene];
}
I'm almost done building my first iPhone app and am trying to add a background image, and am finding it a little confusing, because nowadays there's like 3 or 4 different size screens among the different iPhone versions, with different resolutions to boot.
So while I'm aware of the whole image#2x.png thing, I still don't know what I really need. If I want my app to run on iPhone 4/4s, 5s/5c, 6/6+, how many different versions of a background image do I need, and at what sizes and resolutions?
I have googled around and have not found any cohesive answers up to date for 2014.
Also, if the iPhone 6 is 1334x750 #3x, does that mean I'm supposed to include a 4002x2250 background? And then for the 1920x1080 iPhone 6+ #3x, a 5760 x 3240 image? That's MASSIVE! I feel like I must be understanding this incorrectly.
If you want to support native resolution of iPhone 6/Plus, you need to add launch images (prior to iOS 8) or launch screen xib (iOS 8).
iPhone 4/4S: 640 x 960
iPhone 5/5S: 640 x 1136
iPhone 6: 750 x 1334
iPhont 6 Plus: 1242 x 2208
That means you need to prepare 4 launch images with above resolution if you want to support these devices. You can use iOS simulator to capture screenshots with different resolutions. Your app will run in compatibility mode on new resolution devices if it can't find the launch image of the specific resolution. compatibility mode means your view will be scaled to fit the new screen size when still have the same logical size.
EDIT:
I think op misunderstands what do #2x and #3x mean. The resolution of iPhone 6 is 750(pixels) x 1334(pixels), 326 pixels per inch. This is the REAL resolution. And 375(points) x 667(points) is the logical size if the native resolution is supported. iPhone 6 Plus's resolution is 1242(pixels) x 2208(pixels), 401 pixels per inch and the logical size is 414(points) x 736(points).
This is how images with different resolutions work on iOS device:
Let's say you want to run your app on iPhone 4s, iPhone 5/5S, iPhone 6/plus. First thing you should do is to provide 4 launch images to support native resolutions of these devices. When iOS launch your app, it will check if the app provides the right launch image to support the native resolution of current device. If iOS finds it, then use that in launch time and the logical size of screen is right, your app runs as normal. Otherwise, your app will run in compatibility mode in which all of the views will be scaled.
Suppose there is an image named foo.png in your app of which the logical size is 100(points) x 100(points). You want this image looks same in all the above devices. You should provide 2 versions of this image. One is 200(pixels) x 200 (pixels) and should be named foo.png#2x and the other is 300(pixels) x 300(pixels) named foo.png#3x. If you load this image with [UIImage imageNamed:#"foo"], on devices except iPhone 6 plus, the app will load the image named foo.png#2x. Otherwise the app will load foo.png#3x and sample it down to 300 * 84%(pixels) x 300 * 84%(pixels).
And if you load an image from an url and need to render it on the runtime. Let's say the size you get is {width:100, height:100}, the scale is 1.0. This means the REAL size of this image is 100 * 1.0(pixels) x 100 * 1.0(pixels. If you don't want it to be scaled, you need to calculate the logical size yourself. You do it like this:
UIImage *image = ... // you get it from an url
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat width = image.size.width / scale;
CGFloat height = image.size.height / scale;
CGRect frame = CGRectMake(50.0f, 50.0f, width, height)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.contentMode = UIViewContentModeCenter;
imageView.image = image;
[self.view addSubview:imageView];
I think the easiest way to do this is to use an image that fits on iPhone 6+ and then simply set UIImageView's contentMode to UIViewContentModeCenter. I think it's that one at least, the result should be that on iPhone 6+ you have a centered image but on the other screens you simply get a part of the image.
The downsampling of the iPhone 6+ means that an #3x asset covering the entire screen should be 2208x1242 (That is, this resolution is already 3x. The "real" resolution is 736x414). This is the largest resolution needed and you can then use the same image for #2x and #1x assets using the method I described.
You will need three versions of the background image(1x,2x,3x).A good practice to have images of the correct size is to make an image of a size that is 3 times the size of your view and then make the 2x and 1x versions by scaling down.
Apple has come up with a new concept called 'Size Classes' to support the different device sizes.To use size classes you will need the latest version of Xcode(Xcode 6). In the interface builder you can set different set of constraints for different size classes. This way it becomes easier to support all screen sizes. To know more about Size classes watch the WWDC 2014 video "Building Adaptive Apps with UIKit".
Which game engine are you using ?
If you are using cocos2d or cocos2dx then you can use background image of 960 * 640 .Below code will scale the images according to the screen size.
CCSize frameSize = pEGLView->getFrameSize();
CCSize designSize = CCSizeMake(480, 320);
vector<string> searchPaths;
CCSize resourceSize;
Utility :: isPad = true;
searchPaths.push_back("hd");
resourceSize = CCSizeMake(960, 640);
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width , designSize.height, kResolutionExactFit);
pDirector->setContentScaleFactor(resourceSize.width/designSize.width);
These are the different resolutions you will need for your background image.
iPhone 4/4S - 640 * 960
iPhone 5/5S - 640 * 1136
iPhone 6 - 750 x 1334 for portrait 1334 x 750 for landscape
iPhone 6 Plus - 1242 x 2208 for portrait 2208 x 1242 for landscape
I have backgrounds for iPhone 4s, 5, 6, 6plus, iPad, iPad retina. My question is how to distinguish them from each other since many are retina(#2x). Can I use the same filename for the background and add #2x, #3x? It seems to pick up the wrong backgrounds from the #2x ones when I do this(i,.e iPhone 5 on a iPad Retina). There must be an easier way then checking every single resolution and pulling that image. Clarity on this would be very helpful thanks!
In the scene itself I use
SKSpriteNode * MainMenuBackground;
MainMenuBackground = [SKSpriteNode spriteNodeWithImageNamed:#"Background1"];
so for the other devices can I do these filenames:
Background1#2x~iphone5.png (1334 x 750)
Background1#2x~iphone6.png (1136 x 640)
Background1#3x~iphone6plus.png (2208x1242)
Background1~ipad.png (1024x768)
Background1#2x~ipadRetina.png(2048x1536)