Increase Touchable Area of an SKSpriteNode

6
votes

I know a similar question has been asked before about this topic but here is my problem. I am using the following simple code to touch and SKNode.

 override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    let touch = touches.first as UITouch!
    let location = touch.locationInNode(self)
    let node = self.nodeAtPoint(location)

I then remove the touches node with the following:

node.removeFromParent()

Now, my problem is that the image of the node I am touching is small. Therefore it is very hard to accurately register a touch. I do not want to make the image bigger. This wouldn't be a problem but the nature of my game is such that I:

1) Cannot use another invisible SKSpriteNode ontop of my image SKSpriteNode to increase the registered touch area because each image has a unique name so I need that specific node to be touched and removed.

2) I cannot give the invisible SKSpriteNode the same name as the image SKSpriteNode because then only the invisible SKSpriteNode would be removed on touching.

3) I have tried to load a new SKSpriteNode into the original image SKSpriteNode to increase the touchable area, but once again, on touching, only the invisible SKSpriteNode gets removed, not the image SKSpriteNode which I want.

So, how can I increase the touchable area? Is there a way to maybe:

1) Remove all nodes associated with the node that is touched? This would then work if I put an invisible SKSpriteNode inside the original node to increase the touchable area. If they had the same name. But I have already tried "node.removeAllChildren()"......didn't work.

2) Detect a touch and the closest possible image near that touch is the image that the code in TouchesBegan gets use on? This would also work for my situation.

Any other suggestions? Cheers :)

-------------------------------UPDATE---------------------------

The following code below works! If I touch the invisible SKNode, then both the invisible and Original SKNodes disappear. However, for whatever reason, the original SKNode always appears infront of the invisible SKNode. I cannot fix this?

    let original = SKSpriteNode(imageNamed: "original")
    original.size = CGSize(width: 50, height: 50)
    original.zPosition = 0

    let invisible = SKSpriteNode(color: UIColor.redColor(), size: CGSizeMake(70, 70))
    invisible.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
    invisible.alpha = 1.0
    invisible.zPosition = 1
    invisible.name = original.name
    invisible.addChild(original)
    self.addChild(invisible)
2
swiftxcodesprite-kit
If you create a bigger invisible node, and then add a child on it, when the node has been removed, the child is removing too – Simone Pistecchia
I added the original image inside the invisible image, but I cannot see the original image? – user4909608
Try original.zPosition = 1 and let invisible = SKSpriteNode(color: UIColor.clearColor(), size: CGSizeMake(70, 70)) – Simone Pistecchia
I changed zPosition, and clearcolor. The original image does not show, and the invisible image CGSize, touchable area is MUCH larger then 70, 70....:/ – user4909608
original.position = CGPointZero and invisible.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame)) for debug set a color inside invisible node – Simone Pistecchia

2 Answers

1
votes

For zPosition order, put this inside GameViewController

//Put this line
skView.ignoresSiblingOrder = true

//before this
skView.presentScene(scene)
1
votes

In you code you have two nodes:

  • original
  • invisible

Who is the parent, who is the child?

According to your question "If I touch the invisible SKNode, then both the invisible and original SKNodes disappear..however, for whatever reason, the original SKNode always appears infront of the invisible SKNode" seems that you want invisible inside original, in other words original should be the parent and invisible should be the child.

But your code says the exact opposite:

invisible.addChild(original)
self.addChild(invisible)

So , we make an example:

enter image description here

Suppose that your original node is green, this how appear your elements follow your code: invisible node (red) do an addChild to the original (green) , and then you add to self the invisible. Invisible is parent, original is child.

Finally, if you touch the red rectangle to remove it, both red and childs (green) will be removed, if you touch the green rectangle to remove it, only the green rectangle disappear.

Hope you can help you to understand what happen to your code.