Come creare un gradiente in Spritekit?

Question

C'è un modo possibile per creare una casella piena di sfumature in SpriteKit? Ho provato a riempire un nodo di forma con quello, ma nota che solo i colori a tinta unita funzionano con skshapenode.

Answer 1

Non penso che questo sia possibile con l'attuale SKShapeNode, che a malapena gestisce le sue funzionalità di base al momento. Un buon approccio se non si desidera utilizzare le immagini del gradiente di sprite preesistenti sarebbe quello di creare un SKTexture da applicare un CIFilter (come forse CILinearGradient in questo caso) a un'immagine di casella di base e quindi creare il SKSpriteNode da quello SKTexture.

Answer 2

La risposta di Matt è corretta, ma non è ancora possibile aggiungere una sfumatura. Questo è il mio tentativo attuale, se qualcuno sa come farlo funzionare, si prega di aggiornare per thread.

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

Un altro buon modo per testare i filtri, è scaricare l'applicazione demo CIFunHouse dal WWDC 2013.

Answer 3

Ecco una soluzione. (Nota, sto usando Rubymotion, un rubino vincolante per l'obiettivo C/iOS, ma la logica è esattamente la stessa. Se qualcuno vuole modificare questa e mettere l'obiettivo c equivalente, andare avanti

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 4

OK qui è qualcosa che sto usando ora, l'ho basato sulla soluzione di AwDogsGo2Heaven, adattata per Mac. Sarebbe dolce con una soluzione completamente compatibile, sono tutt'altro che sicura di come creare i contesti, ma sembra funzionare, inoltre non sono sicuro della scala. In esecuzione su retina mac e non retina mac e non vedo alcun problema ma il contesto è creato usando la scala 2 quindi potrebbe essere eccessivo per mac non retina.Metto questo in una categoria su SKTexture

Per usarlo, basta chiamare il +(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors.

Edit: codice aggiornato e più discussione qui: Gradient texture has wrong scale on retina Mac