How can you create a glow around a sprite via SKEffectNode How can you create a glow around a sprite via SKEffectNode ios ios

How can you create a glow around a sprite via SKEffectNode


@rickster's answer is great. Since I have low rep, I'm apparently not allowed to add this code as a comment to his. I hope this doesn't break stackoverflow rules of propriety. I'm not trying to userp his rep in any way.

Here's code that does what he's describing in his answer:

Header:

//  ENHGlowFilter.h#import <CoreImage/CoreImage.h>@interface ENHGlowFilter : CIFilter@property (strong, nonatomic) UIColor *glowColor;@property (strong, nonatomic) CIImage *inputImage;@property (strong, nonatomic) NSNumber *inputRadius;@property (strong, nonatomic) CIVector *inputCenter;@end//Based on ASCGLowFilter from Apple

Implementation:

#import "ENHGlowFilter.h"@implementation ENHGlowFilter-(id)init{    self = [super init];    if (self)    {        _glowColor = [UIColor whiteColor];    }    return self;}- (NSArray *)attributeKeys {    return @[@"inputRadius", @"inputCenter"];}- (CIImage *)outputImage {    CIImage *inputImage = [self valueForKey:@"inputImage"];    if (!inputImage)        return nil;    // Monochrome    CIFilter *monochromeFilter = [CIFilter filterWithName:@"CIColorMatrix"];    CGFloat red = 0.0;    CGFloat green = 0.0;    CGFloat blue = 0.0;    CGFloat alpha = 0.0;    [self.glowColor getRed:&red green:&green blue:&blue alpha:&alpha];    [monochromeFilter setDefaults];    [monochromeFilter setValue:[CIVector vectorWithX:0 Y:0 Z:0 W:red] forKey:@"inputRVector"];    [monochromeFilter setValue:[CIVector vectorWithX:0 Y:0 Z:0 W:green] forKey:@"inputGVector"];    [monochromeFilter setValue:[CIVector vectorWithX:0 Y:0 Z:0 W:blue] forKey:@"inputBVector"];    [monochromeFilter setValue:[CIVector vectorWithX:0 Y:0 Z:0 W:alpha] forKey:@"inputAVector"];    [monochromeFilter setValue:inputImage forKey:@"inputImage"];    CIImage *glowImage = [monochromeFilter valueForKey:@"outputImage"];    // Scale    float centerX = [self.inputCenter X];    float centerY = [self.inputCenter Y];    if (centerX > 0) {        CGAffineTransform transform = CGAffineTransformIdentity;        transform = CGAffineTransformTranslate(transform, centerX, centerY);        transform = CGAffineTransformScale(transform, 1.2, 1.2);        transform = CGAffineTransformTranslate(transform, -centerX, -centerY);        CIFilter *affineTransformFilter = [CIFilter filterWithName:@"CIAffineTransform"];        [affineTransformFilter setDefaults];        [affineTransformFilter setValue:[NSValue valueWithCGAffineTransform:transform] forKey:@"inputTransform"];        [affineTransformFilter setValue:glowImage forKey:@"inputImage"];        glowImage = [affineTransformFilter valueForKey:@"outputImage"];    }    // Blur    CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];    [gaussianBlurFilter setDefaults];    [gaussianBlurFilter setValue:glowImage forKey:@"inputImage"];    [gaussianBlurFilter setValue:self.inputRadius ?: @10.0 forKey:@"inputRadius"];    glowImage = [gaussianBlurFilter valueForKey:@"outputImage"];    // Blend    CIFilter *blendFilter = [CIFilter filterWithName:@"CISourceOverCompositing"];    [blendFilter setDefaults];    [blendFilter setValue:glowImage forKey:@"inputBackgroundImage"];    [blendFilter setValue:inputImage forKey:@"inputImage"];    glowImage = [blendFilter valueForKey:@"outputImage"];    return glowImage;}@end

In use:

@implementation ENHMyScene //SKScene subclass-(id)initWithSize:(CGSize)size {        if (self = [super initWithSize:size]) {        /* Setup your scene here */        [self setAnchorPoint:(CGPoint){0.5, 0.5}];        self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];        SKEffectNode *effectNode = [[SKEffectNode alloc] init];        ENHGlowFilter *glowFilter = [[ENHGlowFilter alloc] init];        [glowFilter setGlowColor:[[UIColor redColor] colorWithAlphaComponent:0.5]];        [effectNode setShouldRasterize:YES];        [effectNode setFilter:glowFilter];        [self addChild:effectNode];        _effectNode = effectNode;    }    return self;}-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {    /* Called when a touch begins */    for (UITouch *touch in touches) {        CGPoint location = [touch locationInNode:self];        SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"];        sprite.position = location;        [self.effectNode addChild:sprite];    }}


You can create a glow effect in Core Image by creating a CIFilter subclass that composes multiple built-in filters. Such a filter would involve steps like these:

  1. Create an image to be used as the blue glow. There's probably a few decent ways to do this; one is to use CIColorMatrix to create a monochrome version of the input image.
  2. Scale up and blur the glow image (CIAffineTransform + CIGaussianBlur).
  3. Composite the original input image over the glow image (CISourceOverCompositing).

Once you have a CIFilter subclass that does all that, you can use it with a SKEffectNode to get a realtime glow around the effect node's children. Here it is running in the "Sprite Kit Game" Xcode template on an iPad 4:

Glowing spaceship in Sprite Kit

I got this up and running in a few minutes by cribbing the custom filter class used for a similar effect in the Scene Kit presentation from WWDC 2013 -- grab it from the WWDC Sample Code package at developer.apple.com/downloads, and look for the ASCGlowFilter class. (If you want to use that code on iOS, you'll need to change the NSAffineTransform part to use CGAffineTransform instead. I also replaced the centerX and centerY properties with an inputCenter parameter of type CIVector so Sprite Kit can automatically center the effect on the sprite.)

Did I say "realtime" glow? Yup! That's short for "really eats CPU time". Notice in the screenshot it's no longer pegged at 60 fps, even with only one spaceship -- and with the software OpenGL ES renderer on the iOS Simulator, it runs at slideshow speed. If you're on the Mac, you probably have silicon to spare... but if you want to do this in your game, keep some things in mind:

  • There are probably some ways to get better performance out of the filter itself. Play with different CI filters and you might see some improvement (there are several blur filters in Core Image, some of which will certainly be faster than Gaussian). Also note blur effects tend to be fragment-shader bound, so the smaller the image and the smaller the glow radius the better.
  • If you want to have multiple glows in a scene, consider making all the glowing sprites children of the same effect node -- that'll render them all into one image, then apply the filter once.
  • If the sprites to be glowed don't change much (e.g. if our spaceship wasn't rotating), setting shouldRasterize to YES on the effect node should help a lot. (Actually, in this case, you might get some improvement by rotating the effect node instead of the sprite within it.)
  • Do you really need realtime glow? As with many spiffy graphical effects in games, you'll get much better performance if you fake it. Make a blurry, bluey spaceship in your favorite graphics editor and put it in the scene as another sprite.


You could use a SKShapeNode behind the sprite and define a glow using it's glowWidth and strokeColor properties. If you size and position it right, this should give you the appearance of a glow. This doesn't give you many options for customization, but I imagine it's much easier than using a CIFilter with an SKEffectNode which is likely the other logical option you have for this.