SpriteKit convertPointToView / convertPoint

Question

Question How do I get the purple square to stay anchored at the bottom left of the screen regardless of the camera position?

Details I have an SKScene named colorScene that has a camera node and two shape nodes - one blue and one purple square. The camera is constrained to the blue square which is positioned at 0,0:

Now, say I want to position the purple square at the bottom left of the screen. And I want it to stay there no matter where the camera goes. First, I would make the purple square a child of the camera node. But then what? If I position the purple square at 0,0, strangely, it's in the middle of the screen. (Shouldn't the camera node be the entire screen area?) And if I try convertPoint to go from the camera node to the scene coordinates:

purpleNode?.position = convertPoint(CGPoint(x: 0, y: 0), toNode: cameraNode!)

...things get even more mysterious:

That will anchor the purple node to the bottom left. Add the purple node to the cameraNode, then set the purple node x=-w/2, y=-h/2 — DaveAMoore
Your answer was so far from what I expected that it seemed impossible. (Plus I missed the tiny minus signs when I tried it the first time.) But you are right! My apologies! — squarehippo10

Luca Angeletti Luca Angeletti · Accepted Answer · 2016-07-08T00:14:58

From the Apple docs:

The scene is rendered so that the camera node’s origin is placed in the middle of the scene.

This should explain what you experienced

If I position the purple square at 0,0, strangely, it's in the middle of the screen. (Shouldn't the camera node be the entire screen area?)

Solution

Since we want to place purple on the bottom-left of the screen, we should start with the coordinate related to the view

let bottomLeftOfView = CGPoint(x: 0, y: view.frame.height)

Next we need to convert these coordinate from the view to the scene

purple.position = convertPointFromView(bottomLeftOfView)

This is the full code

class GameScene: SKScene {

    override func didMoveToView(view: SKView) {
        super.didMoveToView(view)
        let camera = SKCameraNode()
        self.camera = camera
        addChild(camera)
        let purple = SKSpriteNode(imageNamed: "square")
        purple.color = SKColor.purpleColor()
        purple.colorBlendFactor = 1

        let bottomLeftOfView = CGPoint(x: 0, y: view.frame.height)
        purple.position = convertPointFromView(bottomLeftOfView)
        camera.addChild(purple)
    }
}

Purple and anchorpoint

Only a quarter of the purple sprite is inside the screen. This because its anchorpoint is (0.5, 0.5): the center. So we just told SpriteKit to place the center of purple to the corner of the screen.

In order to have purple entirely into the screen we just need to tell SpriteKit to use use the bottom left corner of purple as anchorpoint

purple.anchorPoint = CGPointZero

This is the final full code

class GameScene: SKScene {

    override func didMoveToView(view: SKView) {
        super.didMoveToView(view)

        let camera = SKCameraNode()
        self.camera = camera
        addChild(camera)

        let purple = SKSpriteNode(imageNamed: "square")
        purple.color = SKColor.purpleColor()
        purple.colorBlendFactor = 1
        purple.anchorPoint = CGPointZero

        let bottomLeftOfView = CGPoint(x: 0, y: view.frame.height)
        purple.position = convertPointFromView(bottomLeftOfView)
        camera.addChild(purple)

    }
}

SpriteKit convertPointToView / convertPoint

1 Answers

Solution

Purple and anchorpoint

This is the final full code