How to create SKTexture with rounded corners without using a mask

Question

I want to create a simple node with a facebook user profile image, where the image has rounded corners (or a full circle). I create a 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 suitable documentation for creating an image with rounded corners other than using SKCropNode (which seems like a bad workaround)

Answer 1

Try the following:

 // 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 .

Answer 2

Here's what he looks like in Swift , translating the above answer, Sebastian's answer. The method gets the name of the image 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 } 

Answer 3

In 2017 ...

 class YourSprite: SKSpriteNode { func yourSetupFunction() { texture = SKTexture( image: UIImage(named: "cat")!.circleMasked! ) 

It is easy ...

Code for circleMasked:

(All projects that access images still need this.)

 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 }