Background image size Sprite Kit Game

Question

i just started a new Sprite Kit project to learn how to use it. I watched and read a lot of tutorials but no tutorial has a answer for my question/problem.

I want to create an application just for my iPhone 5S. So the screen size is 1136x640. I created a 1136x640 background image for my application. But when i add the image to my app, its waaay to big! The iOS Simulator just displays the middle of the image.

Can someone tell me what screen size i have to use and why?

Thanks a lot!

Here is the code which i copied from a tutorial. The code is in the myScene.m file in the initWithSize method

        SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"myBackground"];
    background.position = CGPointMake(CGRectGetMidX(self.frame),CGRectGetMidY(self.frame));

    [self addChild:background];

EDIT:

I searched on google and found this:

The viewDidLoad method has to be changed with "viewWillLayoutSubviews".

Here is this method:

    - (void)viewWillLayoutSubviews
    {
    [super viewWillLayoutSubviews];

    // Configure the view.
    SKView * skView = (SKView *)self.view;
    skView.showsFPS = YES;
    skView.showsNodeCount = YES;

    // Create and configure the scene.
    SKScene * scene = [MyScene sceneWithSize:CGSizeMake(skView.bounds.size.width*2,skView.bounds.size.height*2)];
    scene.scaleMode = SKSceneScaleModeAspectFill;

    // Present the scene.
    [skView presentScene:scene];
}

At first the scene = MySceneWithSize line was:

SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];

But then it was just the half of the iPhone 5 screen size (568x320). So i had to double the size. Does somebody know why?

Answer 1

The short answer to your immediate problem:

background.size = self.frame.size;

The long answer, and discussion about other methods...

The scene works in Logical Units, not physical pixels (as mentioned in other posts).

1 Logical Unit is typically 1 pixel on older kit, and 2 pixels on newer kit/iPads. This maybe 4 pixels in 5 years time.

Working in Logical Units protects you from sizes changing in future, and is supposed to help the programmer - although this often confuses newbies.

The simplest way to get an image to fill the current scene is to set its size in 'logical units' no matter what size it is originally.

This is better than using SKActions (because the user might end up seeing them, and any calculations based on the dimensions of the node can't be relied upon until the action has completed), and it's better than scaling because scaling requires you to know the original image dimensions.

You can do this via the size property, or through an action if you really want to make an animation.

In the scene simply....

-(void)didMoveToView:(SKView *)view
{
    [super didMoveToView:view];

    SKSpriteNode* background = [SKSpriteNode spriteNodeWithImageNamed:@"myBackground"];
    background.size = self.frame.size;
    background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
    [self addChild:background];
} 

Alternatively, if your image works well, as is, on higher resolutions, you can rename your image to [email protected], add that to your project and you probably won't need to resize at all, but you'll also need to shrink it by 50% for the lower resolution devices, and save that as myBackground.png.

I always set the size of an imported image to exactly the logical units I want (or a percentage of the screen dimensions) to preserve my sanity.