CODEWITHSUNDEEP
sprite-kitswiftskspritenode
will.fiset
will.fiset

Reputation: 1572

SpriteKit Coordinate System Origin

I have been trying to place nodes on the screen with the SpriteKit Framework with Swift, however I cannot find where the origin is. I thought it was at the bottom left corner but when I place node3 there it appears to be off screen somewhere. Only node1 appears on the screen, can someone explain what is happening?

class GameScene: SKScene {
    override func didMoveToView(view: SKView) {

    let node = SKSpriteNode(color: UIColor.greenColor(), size: CGSize(width: 50, height: 50))
    node.position = CGPoint(x:CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
    self.addChild(node)

    let node2 = SKSpriteNode(color: UIColor.orangeColor(), size: CGSize(width: 50, height: 50))
    node2.position = CGPoint(x: 200.0  , y: 200.0 as Double)
    self.addChild(node2)

    let node3 = SKSpriteNode(color: UIColor.redColor(), size: CGSize(width: 50, height: 50))
    node3.position = CGPoint(x: 0.0  , y: 0.0)
    self.addChild(node3)
}

The SpriteKit Template has the following view configuration:

        let skView = self.view as SKView

        /* Sprite Kit applies additional optimizations to improve rendering performance */
        skView.ignoresSiblingOrder = true

        /* Set the scale mode to scale to fit the window */
         scene.scaleMode = .AspectFill

        skView.presentScene(scene)

enter image description here

Upvotes: 4

Views: 2553

Answers (3)

Sergey
Sergey

Reputation: 43

The center of the coordinate system if a scene is defined by the .anchorPoint value, which is by default (0.5, 0.5), that means that a child node with position (x: 0, y: 0) is positioned half the height and half the width of the scene's frame.

Then the upper left corner is (x: -scene.frame.width/2, y: scene.frame.height/2)

Then the lower left corner is (x: -scene.frame.width/2, y: -scene.frame.height/2)

Then the upper right corner is (x: scene.frame.width/2, y: scene.frame.height/2)

Then the lower right corner is (x: scene.frame.width/2, y: -scene.frame.height/2);

If you change the .anchorPoint to (0, 0), the origin will be placed in the lower left corner, etc.

In your example the green node gets his position from CGRectGetMidX and CGRectGetMidY, which gives exactly (0, 0), so it's placed in the center of the scene.

I don't know the size of your scene´, the orange node with position (200, 200) is possible outside the screen to the top-right. ("y: 200.0 as Double" - here the "as Double" is not needed).

The red node with position (0, 0) has the same position, as the green node. As you didn't set the zPosition, it was overlapped by the green node with same coordinates and size.

Upvotes: 1

Daniel Hall
Daniel Hall

Reputation: 854

Your node count at the bottom right corner of you screen shot says you only have 1 node attached to the scene. Are you sure the code you attached to the question matches the screen shot? Use a print call to detail what the node co-ordinates are in the debug console. Also test to see if the nodes exist

Run a method like this in the update

private func interateNodes() {

for child in children { print(child) }

}

Upvotes: 0

will.fiset
will.fiset

Reputation: 1572

As mentioned by @LearnCoco2D the view and the scene sizes did not match. To Fix the problem I changed the scene.scaleMode to ResizeFill and drew all the rectangles relative to the view and not the scene. 

scene.scaleMode = .ResizeFill

Upvotes: 2

Related Questions