SKCropNode masking edge anti-aliasing

Question

I created a circular mask and animate a sprite inside the mask by using sprite kit SKCropNode class. But the edge of the mask looks pixellated.

Is there a way to use anti-aliasing to smooth the edges?

Answer 1

If you want to mask any SKNode/SKSpriteNode with an anti-aliasing effect - you can use SKEffectNode instead of SKCropNode. It works with animated nodes as well. Here is an example:

// Set up your node
SKNode *nodeToMask = [SKNode node];
// ...

// Set up the mask node
SKEffectNode *maskNode = [SKEffectNode node];

// Create a filter
CIImage *maskImage = [[CIImage alloc] initWithCGImage:[UIImage imageNamed:@"your_mask_image"].CGImage];
CIFilter *maskFilter = [CIFilter filterWithName:@"CISourceInCompositing"
                                  keysAndValues:@"inputBackgroundImage", maskImage, nil];
// Set the filter
maskNode.filter = maskFilter;

// Add childs
[maskNode addChild:nodeToMask];
[scene addChild:maskNode];

Answer 2

From the official docs:

If the pixel in the mask has an alpha value of less than 0.05, the image pixel is masked out.

So, SKCropNode doesn't support per pixel alpha values. It either draws the pixels or it doesn't. If alpha (as is used by anti-aliasing) is important to you, you should consider alternative routes. For example:

How to Mask an UIImageView

Answer 3

As of now (June 2018) I can confirm that the SKCropNode will do per-pixel alpha blending. If the crop node has an SKSpriteNode as a mask, and the mask node uses a texture with an anti-aliased mask image, the crop node will do the proper blending.