How to create SKTexture with rounded corners without using a mask

Question

I wish to create a simple node with facebook profile picture of a user, where the picture has rounded corners (or a complete circle). I create the node as follows:

SKNode *friend = [[SKNode alloc] init];

SKTexture *texture = [SKTexture textureWithImage:user[@"fbProfilePicture"]];                
SKSpriteNode *profilePic = [SKSpriteNode spriteNodeWithTexture:texture];

[friend addChild:profilePic];

I could not find any proper documentation to create the image with rounded corners, other than using SKCropNode (which seems to be a bad workaround)

Since I take the image from Facebook, I have to crop it when I get it. Do you have a suggestion how to make it happen? — Yuvals, Apr 06 '14 at 08:05

score 6 · Answer 1 · answered Jan 09 '15 at 13:13

This is how it looks in Swift by translating the above answer, Sebastian's answer. The method receives the name of the picture and returns a node with rounded corners.

class func roundSquareImage(imageName: String) -> SKSpriteNode {
            let originalPicture = UIImage(named: imageName)
            // create the image with rounded corners
            UIGraphicsBeginImageContextWithOptions(originalPicture!.size, false, 0)
            let rect = CGRectMake(0, 0, originalPicture!.size.width, originalPicture!.size.height)
            let rectPath : UIBezierPath = UIBezierPath(roundedRect: rect, cornerRadius: 30.0)
            rectPath.addClip()
            originalPicture!.drawInRect(rect)
            let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext();

            let texture = SKTexture(image: scaledImage)
            let roundedImage = SKSpriteNode(texture: texture, size: CGSizeMake(originalPicture!.size.width, originalPicture!.size.height))
            roundedImage.name = imageName
            return roundedImage
        }

Any performance concerns with this approach? Thanks for the translation! — Crashalot, May 11 '15 at 20:10

score 5 · Accepted Answer · edited May 23 '17 at 11:45

Try this:

// your profile picture
UIImage *fbProfilePicture = [UIImage imageNamed:@"fbProfilePicture"];

// create the image with rounded corners
UIGraphicsBeginImageContextWithOptions(fbProfilePicture.size, NO, 0);
CGRect rect = CGRectMake(0, 0, fbProfilePicture.size.width, fbProfilePicture.size.height);
[[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:20.0] addClip];
[fbProfilePicture drawInRect:rect];
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// use the roundedImage as texture for your sprite    
SKTexture *texture = [SKTexture textureWithImage:roundedImage];  
SKSpriteNode *profilePic = [SKSpriteNode spriteNodeWithTexture:texture size:CGSizeMake(fbProfilePicture.size.width, fbProfilePicture.size.height)];

[self addChild:profilePic];

The rounded corner part comes from this answer.

Very well, this does exactly what I needed! – Yuvals Apr 06 '14 at 10:42 — Yuvals, Apr 06 '14 at 10:42

score 1 · Answer 3 · answered Oct 23 '17 at 21:05

For 2017...

class YourSprite: SKSpriteNode {

    func yourSetupFunction() {

          texture = SKTexture( image: UIImage(named: "cat")!.circleMasked! )

It's that easy...

Code for circleMasked:

(All projects that deal with images will need this anyway.)

extension UIImage {

    var isPortrait:  Bool    { return size.height > size.width }
    var isLandscape: Bool    { return size.width > size.height }
    var breadth:     CGFloat { return min(size.width, size.height) }
    var breadthSize: CGSize  { return CGSize(width: breadth, height: breadth) }
    var breadthRect: CGRect  { return CGRect(origin: .zero, size: breadthSize) }

    var circleMasked: UIImage? {

        UIGraphicsBeginImageContextWithOptions(breadthSize, false, scale)
        defer { UIGraphicsEndImageContext() }

        guard let cgImage = cgImage?.cropping(to: CGRect(origin:
            CGPoint(
                x: isLandscape ? floor((size.width - size.height) / 2) : 0,
                y: isPortrait  ? floor((size.height - size.width) / 2) : 0),
            size: breadthSize))
        else { return nil }

        UIBezierPath(ovalIn: breadthRect).addClip()
        UIImage(cgImage: cgImage, scale: 1, orientation: imageOrientation)
            .draw(in: breadthRect)
        return UIGraphicsGetImageFromCurrentImageContext()
    }

// classic 'circleMasked' stackoverflow fragment
// courtesy Leo Dabius /a/29047372/294884
}

score 0 · Answer 4 · answered Sep 10 '20 at 07:20

Updated cipri.l Answer for Swift5.2

class func roundSquareImage(imageName: String) -> SKSpriteNode {
        let originalPicture = UIImage(named: imageName)
        // create the image with rounded corners
        UIGraphicsBeginImageContextWithOptions(originalPicture!.size, false, 0)
        let rect = CGRect(x: 0, y: 0, width: originalPicture!.size.width, height: originalPicture!.size.height)
        let rectPath : UIBezierPath = UIBezierPath(roundedRect: rect, cornerRadius: 30.0)
        rectPath.addClip()
        originalPicture!.draw(in: rect)
        let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();
        
        let texture = SKTexture(image: scaledImage!)
        let roundedImage = SKSpriteNode(texture: texture, size: CGSize(width: originalPicture!.size.width, height: originalPicture!.size.height))
        roundedImage.name = imageName
        return roundedImage
    }

How to create SKTexture with rounded corners without using a mask

4 Answers4