如何在 Spritekit 中创建渐变？

Question

有什么方法可以在 SpriteKit 中创建渐变填充框吗？我试过用它填充形状节点，但它指出只有纯色适用于 skshapenode。

Answer 1

我认为当前的

SKShapeNode

不可能做到这一点，它目前几乎无法处理其基本功能。如果您不想使用预先存在的精灵渐变图像，一个好方法是通过将

SKTexture

（在这种情况下可能是

CIFilter

）应用于基本框图像来创建

CILinearGradient

，然后创建来自那个

SKSpriteNode

的

SKTexture

。

Answer 2

这是一个解决方案。 （请注意，我使用的是 Rubymotion，这是一个针对 Objective-C / iOS 的 Ruby 绑定，但是逻辑完全相同。如果有人想编辑它并放置等效的 Objective-C，请继续

size = CGSizeMake(50,50)
scale = options[:scale] || UIScreen.mainScreen.scale
opaque = options.fetch(:opaque, false)

UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
context = UIGraphicsGetCurrentContext()

gradient = CAGradientLayer.layer
gradient.frame = CGRectMake(0,0,50,50)
gradient.colors = [SKColor.blackColor.CGColor,SKColor.whiteColor.CGColor]
gradient.renderInContext(context)

image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

texture = SKTexture.textureWithCGImage(image.CGImage)
node = SKSpriteNode.alloc.initWithTexture(texture)

Answer 3

好的，这是我现在正在使用的东西。我基于 AwDogsGo2Heaven 的解决方案，但适用于 Mac。有一个完全兼容的解决方案会很不错。我不确定如何创建上下文。但似乎工作。我也不确定规模。在 Retina Mac 和非 Retina Mac 上运行，看不到任何问题，但上下文是使用 scale 2 创建的，因此对于非 Retina Mac 来说可能有点矫枉过正。我把它放在 SKTexture 的一个类别中。

要使用它，只需调用

+(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors

.

编辑：更新代码和更多讨论：Gradient texture has wrong scale on retina Mac

Answer 4

马特的回答是正确的，但我还无法添加渐变。这是我目前的尝试，如果有人知道如何让它工作，请更新线程。

这是Core Image Ref

CIFilter *gradientFilter = [CIFilter filterWithName:@"CILinearGradient"];
//[gradientFilter setDefaults];
CIColor *startColor = [CIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
CIColor *endColor = [CIColor colorWithRed:0 green:0 blue:0 alpha:1.0];
CIVector *startVector = [CIVector vectorWithX:0 Y:0];
CIVector *endVector = [CIVector vectorWithX:0.21 Y:0.31];
[gradientFilter setValue:startVector forKey:@"inputPoint0"];
[gradientFilter setValue:endVector forKey:@"inputPoint1"];
[gradientFilter setValue:startColor forKey:@"inputColor0"];
[gradientFilter setValue:endColor forKey:@"inputColor1"];

SKEffectNode *effectNode = [SKEffectNode node];
effectNode.filter = gradientFilter;
effectNode.shouldEnableEffects = YES;

[self addChild:effectNode];
//effectNode.position = CGPointMake(200, 200);

另一个测试过滤器的好方法是从 WWDC 2013 下载演示应用程序CIFunHouse。