Background Image for Sprite-Kit Scene

Question

Im working in a Sprite-Kit Scene right now and I want to set the Background to an image named "bgimage" for example. How would I do this programmatically through the gamescene.swift ?

import UIKit
import SpriteKit
import CoreGraphics
class gameScene: SKScene {


}

It is a good practice to use capitalised names for classes. Replacing `gameScene` with `GameScene` is advisable, through not necessary. — Tiago Marinho, Jul 09 '15 at 03:15

score 13 · Answer 1 · edited Mar 09 '17 at 14:38

13

You can declare your background image as an SKSpriteNode, set its position to the middle of the screen and add it to your scene.

import UIKit
import SpriteKit

class gameScene: SKScene {
    var background = SKSpriteNode(imageNamed: "bgimage")

    override func didMoveToView(view: SKView) {
        background.position = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
        addChild(background)
    }
}

Also make sure you have the image in images.xcassets.

edited Mar 09 '17 at 14:38

Parth Sane

587
7
24

answered Jul 09 '15 at 02:58

Daniel Mihaila

585
1
6
13

1

Setting its size to fill the scene would be great, too. – Tiago Marinho Jul 09 '15 at 03:17
I think it will look better if you use device specific images for the background instead of universal. That way, every device has its own version of the image, but maybe it's just me. – TheCodeComposer Jul 10 '15 at 15:10
@TheCodeComposer Great idea for iOS, but not OS X. – Tiago Marinho Jul 14 '15 at 23:57
While this definitely does work, I have noticed that it can use up a lot of device resources, particularly on older devices. – Robin Jul 21 '20 at 08:53

score 4 · Answer 2 · 2018-06-30T22:27:30.567

4

import UIKit
import SpriteKit
import CoreGraphics
class gameScene: SKScene {

var background = SKSpriteNode(imageNamed: "bgimage")

override func didMoveToView(to view: SKView) {
background.zPosition = 1
background.position = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)

addChild(background)


}
}

The zPosition should be lower than all the other Nodes in the gameScene

edited Jun 30 '18 at 22:27

answered Jan 22 '16 at 05:45

Swift 4 syntax change `override func didMove(to view: SKView) {` Also, thanks for the hint on the zPosition. – Canuk Apr 12 '18 at 18:23

score 1 · Answer 3 · answered Apr 26 '20 at 18:42

Full-size image background

override func didMove(to view: SKView) {

    super.didMove(to:view)

    DispatchQueue.main.async{

        self.background.zPosition = 0
        self.background.position = CGPoint(x: self.size.width / 2, y: self.size.height / 2)
        self.background.size = CGSize(width: self.size.width, height: self.size.height)
        self.addChild(self.background)

    }
}

Background Image for Sprite-Kit Scene

3 Answers3