Can I add a border to an SKSpriteNode, similar to UIView?

Question

I'm interested if an SKSpriteNode can be made to imitate the behavior of a UIView where I can specify border and corner radius?

self.view.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.view.layer.borderWidth = 2;
self.view.layer.cornerRadius = 2;
self.view.layer.masksToBounds = YES;

See Here [link](http://stackoverflow.com/questions/21695305/skspritenode-create-a-round-corner-node?answertab=active#tab-top) — Blind Ninja, Nov 29 '14 at 05:01

score 16 · Answer 1 · edited Mar 03 '19 at 16:18

16

The following is a simple, dropin extension for SKSpriteNode that will allow you to draw a border with a given color around your node.

import SpriteKit

extension SKSpriteNode {
    func drawBorder(color: UIColor, width: CGFloat) {
        let shapeNode = SKShapeNode(rect: frame)
        shapeNode.fillColor = .clear
        shapeNode.strokeColor = color
        shapeNode.lineWidth = width
        addChild(shapeNode)
    }
}

edited Mar 03 '19 at 16:18

zekel

9,227
10
65
96

answered Oct 08 '18 at 18:45

CodeBender

35,668
12
125
132

4

Worked when I set shapeNode as `let shapeNode = SKShapeNode(rectOf: size)` – davut dev Jun 08 '19 at 12:46

score 5 · Accepted Answer · answered Jan 02 '14 at 22:00

5

Not natively. Though you can just add a SKShapeNode as child whose path you create with CGPathCreateWithRoundedRect.

answered Jan 02 '14 at 22:00

CodeSmile

64,284
20
132
217

1

using SKShapeNode(rect:... it's easier – zumzum Mar 01 '18 at 18:48

Michael N · Answer 3 · 2020-08-01T17:56:54.447

extension SKSpriteNode {

    func drawBorder(color: UIColor, width: CGFloat) {

        for layer in self.children {
        
            if layer.name == "border" {
            
                layer.removeFromParent()
            
            }
        
        }
    
        let imageSize = self.texture?.size()
    
        let lineWidth = (imageSize!.width / self.size.width) * width
    
        let shapeNode = SKShapeNode(rect: CGRect(x: -imageSize!.width/2, y: -imageSize!.height/2, width: imageSize!.width, height: imageSize!.height))
        shapeNode.fillColor = .clear
        shapeNode.strokeColor = color
        shapeNode.lineWidth = lineWidth
        shapeNode.name = "border"
        shapeNode.zPosition = 1001
        self.addChild(shapeNode)
    
        self.zPosition = 1000

    }

}

Can I add a border to an SKSpriteNode, similar to UIView?

3 Answers3

Linked