How to create a gradient in Spritekit?

Question

Is there any possible way to create a gradient field populated in SpriteKit? I tried filling out the node form, but it notes that only solid colors work with skshapenode.

Answer 1

I do not think that this is possible with the current SKShapeNode , which currently does not practically handle its main functions. A good approach if you do not want to use pre-existing gradient spray images would be to create an SKTexture from applying a CIFilter (for example, perhaps CILinearGradient in this case) to the base image of the box, and then create an SKSpriteNode from this SKTexture .

Answer 2

Here is the solution. (Note: I am using Rubymotion, ruby ​​binding for Objective C / iOS, however the logic is exactly the same. If someone wants to edit this and put an objective c-equivalent, continue

  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

OK, that's what I'm using right now. I based it on the AwDogsGo2Heaven solution, but adapted for Mac. It would be nice with one fully compatible solution. I am far from creating contexts. But it seems to work. Also I'm not sure about the scale. Running on the retina of mac and non retina mac and can not see any problems, but the context is created using a scale of 2, so it can be redundant for non-mesh macs. I put this in a category in SKTexture.

To use it, just call +(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors .

Edit: Updated code and more discussion here: Gradient texture has the wrong scale on Mac retina

Answer 4

Matt's answer is correct, but so far I cannot add a gradient. This is my attempt in real time, if someone knows how to make it work, update for the stream.

Here is the link to the main file

 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); 

Another good way to test your filters is to download the CIFunHouse demo application from WWDC 2013.