Merge SKShapeNode and SKLabelNode

Question

I would like to merge an SKShapeNode and an SKLabeNode to make only one node

Here is my "Bloque" class who drawn an rectangle and add a sklabelnode child on it:

class Bloque : SKShapeNode
{
    var color : String!
    var numero : Int!
    var type : Int!

    var labelNumeroBloque : SKLabelNode!


    init(type : Int, numero : Int, tailleBloque : CGSize)
    {
        super.init()

        self.numero = numero
        self.type = type


        switch (type)
        {
            case 0: color = "#4aaddb"
            default: color = "#ccc"
        }


        var rect = CGRect(origin: CGPoint(x: 0.5, y: 0.5), size: CGSize(width: tailleBloque.width, height: tailleBloque.height))

        self.path = CGPathCreateWithRoundedRect(rect, 2.0, 2.0, nil)
        self.fillColor = UIColor(rgba: color)
        self.name = "\(numero)"
        self.lineWidth = 0.0
        self.zPosition = 200


        labelNumeroBloque = SKLabelNode(text: String(numero))
        labelNumeroBloque.position = CGPointMake(tailleBloque.width/2, tailleBloque.height/2)
        labelNumeroBloque.verticalAlignmentMode = .Center
        labelNumeroBloque.horizontalAlignmentMode = .Center
        labelNumeroBloque.fontName = "ArialMT"
        labelNumeroBloque.fontSize = 20
        labelNumeroBloque.name = "\(numero)"

        self.addChild(labelNumeroBloque)
    }


    required init?(coder aDecoder: NSCoder)
    {
        fatalError("init(coder:) has not been implemented")
    }
}

With that code, when i click on the colored space it work but if the user click on the number it doesn't work. It seem like the the SKShapeNode and the SKlabelNode are not one entire node

Bloque image

Here is the touchesBegan Function :

override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent)
{
    for touch in (touches as! Set<UITouch>)
    {
        let location = touch.locationInNode(self)
        let cliqueNode = nodeAtPoint(location)

        if let bloque = cliqueNode as? Bloque
        {   // verifie que le bloque est du type Bloque
            nb++
            bloque.removeFromParent()
        }
        else
        {   // mauvais bloque cliqué    
            println("Debug : mauvais bloque")
        }   
    }
}

I would like to know how i can merge the both SKNode to make juste one, so when the user click on the colored zone or into the number it work. Can someone help me ? Sorry for my bad english :/

score 1 · Answer 1 · answered Sep 30 '15 at 15:22

Since you made Bloque a subclass of SKShapeNode and SKShapeNode is a subclass of SKNode, maybe you can set userInteractionEnabled property of Bloque instance to true. Then you can write touchesBegan touchesEnd function directly inside class Bloque. This way you don't have to compute if the touch is inside the region. These functions will be triggered only inside the Bloque instance's region.

score 0 · Accepted Answer · answered Jul 30 '15 at 14:20

You might need to subclass SKLabelNode, override func calculateAccumulatedFrame() -> CGRect and return zero sized CGRect. Label is being returned because func nodeAtPoint(_ p: CGPoint) -> SKNode Returns the deepest descendant that intersects a point. And it uses calculateAccumulatedFrame() to check intersections, so by returning zero sized rect it won't intersect thus returning your SKShapeNode.

Code might look like this:

class SpecialLabelNode: SKLabelNode {
    override func calculateAccumulatedFrame() -> CGRect {
        return CGRectZero
    }
}

class Bloque : SKShapeNode {
    ...
    var labelNumeroBloque : SpecialLabelNode!
    ...
}

Merge SKShapeNode and SKLabelNode

2 Answers2