22

我有一个SKSpriteNode我想在它的边缘周围发出蓝色的光芒以突出显示。我猜我需要让我的精灵成为 a 的孩子，SKEffectNode然后创建/应用某种过滤器。

更新：我已经用所选答案的方法对此进行了调查，发现SKEffectNode即使您将其设置为shouldRasterize并定义了“无过滤器”，它也会对性能产生相当大的影响。我的结论是，如果您的游戏一次需要超过 10 个移动对象，SKEffectNode即使光栅化，它们也不能涉及 a。

我的解决方案可能会涉及预渲染的发光图像/动画，因为 SKEffectNode 不会根据我的要求进行裁剪。

如果有人对我缺少的任何东西有洞察力，我会很高兴听到你所知道的一切！

我接受了一个答案，因为它确实实现了我的要求，但想将这些注释添加给任何想要走这条路的人，这样你就可以了解使用SKEffectNode.

4

3 回答 3

27

@rickster 的回答很棒。由于我的代表很低，显然不允许我将此代码添加为他的评论。我希望这不会违反 stackoverflow 的适当规则。我不想以任何方式使用他的代表。

这是他在回答中描述的代码：

标题：

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

执行：

#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

正在使用：

@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];
    }
}
于 2014-02-05T19:16:39.393 回答
24

您可以通过创建一个CIFilter包含多个内置过滤器的子类来在 Core Image 中创建发光效果。这样的过滤器将涉及以下步骤：

  1. 创建一个用作蓝色光晕的图像。可能有一些不错的方法可以做到这一点；一种是用于CIColorMatrix创建输入图像的单色版本。
  2. 放大并模糊发光图像 ( CIAffineTransform+ CIGaussianBlur)。
  3. 在发光图像上合成原始输入图像 ( CISourceOverCompositing)。

一旦你有一个CIFilter子类可以完成所有这些，你可以将它与 aSKEffectNode一起使用，以在效果节点的子节点周围获得实时发光。它在 iPad 4 上的“Sprite Kit Game”Xcode 模板中运行：

Sprite Kit 中的发光宇宙飞船

我通过在 WWDC 2013 的 Scene Kit 演示文稿中使用用于类似效果的自定义过滤器类在几分钟内启动并运行它——从developer.apple.com/downloads的 WWDC 示例代码包中获取它，然后查看为ASCGlowFilter班级。（如果您想在 iOS 上使用该代码，则需要更改NSAffineTransform要使用的部分CGAffineTransform。我还将centerXandcenterY属性替换inputCenter为类型参数，CIVector以便 Sprite Kit 可以自动将效果集中在精灵上。）

我说的是“实时”发光吗？是的！这是“真正消耗 CPU 时间”的缩写。请注意，在屏幕截图中，即使只有一艘宇宙飞船，它也不再固定在 60 fps - 并且使用 iOS 模拟器上的软件 OpenGL ES 渲染器，它以幻灯片速度运行。如果你在 Mac 上，你可能有多余的硅片......但如果你想在你的游戏中这样做，请记住一些事情：

  • 可能有一些方法可以从过滤器本身获得更好的性能。使用不同的 CI 过滤器，您可能会看到一些改进（Core Image 中有几个模糊过滤器，其中一些肯定会比高斯更快）。另请注意，模糊效果往往受片段着色器限制，因此图像越小，发光半径越小越好。
  • 如果您想在一个场景中有多个发光，请考虑将所有发光精灵创建为同一个效果节点的子节点——这会将它们全部渲染到一个图像中，然后应用一次过滤器。
  • 如果要发光的精灵没有太大变化（例如，如果我们的飞船没有旋转），在效果节点上设置shouldRasterize为YES应该会有很大帮助。（实际上，在这种情况下，您可以通过旋转效果节点而不是其中的精灵来获得一些改进。）
  • 你真的需要实时发光吗？与游戏中许多漂亮的图形效果一样，如果您伪造它，您将获得更好的性能。在您最喜欢的图形编辑器中制作一个模糊的蓝色宇宙飞船，并将其作为另一个精灵放入场景中。
于 2013-10-08T00:58:27.333 回答
4

您可以SKShapeNode在精灵后面使用 a 并使用它的glowWidth和strokeColor属性定义发光。如果您调整大小并正确放置它，这应该会给您带来发光的外观。这并没有为您提供很多自定义选项，但我想它比使用 a 更容易CIFilter，SKEffectNode这可能是您为此拥有的另一个合乎逻辑的选项。

于 2013-10-07T12:34:40.120 回答