sprite kit sprite not being colorized

Question

I\'m trying to colorize a spriteNode (in this case its named background) using sprite kit but cant get the color to change. I have a sprite that I want to colorize. I\'m cha

Answer 1

Quite an old question, but I came across this issue from time to time. The colorBlendFactor is not what one might expect, that it recolours sprites. In fact, the new colour, blended over the old one, heavily depends on the color that was at that position before.

To overcome this, I use overlying sprites (as mentioned before) and the alpha values of the underlying and the overlaying sprite to create the expected colours.

For example to blend the following sprite slowly from blue to gray, I use two sprites:

(The blue sprite is the original one and the grey one is just a version of the blue one, manipulated with the ColorSync Utility on the Mac.)

and this code (Swift):

// Load the two Textures
let TEXTURE_CLOUD_BLUE = SKTexture(imageNamed: "cloud blue")
let TEXTURE_CLOUD_GRAY = SKTexture(imageNamed: "cloud gray")

// Create an Action. Note that the second Action takes longer to finish. This makes the blend to grey slower and easier to watch
let fadeToGray = SKAction.group([
    SKAction.runAction(SKAction.fadeOutWithDuration(1.0), onChildWithName: "cloudBlue"),
    SKAction.runAction(SKAction.fadeInWithDuration(2.0), onChildWithName: "cloudGray"), // Slower fade in
    SKAction.waitForDuration(2.0) // Actions on children return immediately
    ])

// Init super sprite node
super.init(texture: nil, color: UIColor.clearColor(), size: size)

// Add blue cloud
let cloudBlue = SKSpriteNode(texture: TEXTURE_CLOUD_BLUE, size: size)
cloudBlue.alpha = 1.0 // Show immediately
cloudBlue.name = "cloudBlue"
addChild(cloudBlue)

// Add grey cloud
let cloudGray = SKSpriteNode(texture: TEXTURE_CLOUD_GRAY, size: size)
cloudGray.alpha = 0.0 // Don't show at start
cloudGray.name = "cloudGray"
addChild(cloudGray)

// Run Action to fade away
self.runAction(fadeToGray)

Quite some code. I hope the idea comes across. You can play around with the times in the action or use fadeAlphaTo/By instead of fadeIn/OutWithDuration to produce the desired effects.

Answer 2

SKColor is killing all other pixels rather than chosen colors' pixels. Therefore, if your image doesn't contain any red pixels, then [SKColor redColor] is not gonna work. I suggest you to use CIHueAdjust, which is a CIFilter.

Answer 3

Something like this:

    bug.color = SKColorWithRGB(128, 128, 128); 
    bug.colorBlendFactor = 1.0f;

Should definitely tint the sprite of choosing. The thing is that this is non intensive blend. Using a CIFilter with an SKEffectsNode is very very intensive for such a simple task.

I have an example below that blends a sprite with a red tinting, making the the sprite red tinted rather it's original color of orange:

    - (instancetype)init
{
    if (self = [super init]) {
        self.physicsBody.categoryBitMask = PCFireBugCategory;
        self.physicsBody.collisionBitMask = PCPlayerCategory | PCWallCategory | PCBreakableCategory | PCBoundaryCategory;
        //Keeps the bugs from sliding too far when bumped
        self.physicsBody.linearDamping = 1;
        self.physicsBody.angularDamping = 1;
        self.color = [SKColor redColor];
        self.colorBlendFactor = 0.45;
    }

    return self;
}

I would also like to point out that this class is a subclass of SKSpriteNode.

Attached below is an example where I've applied the red tint using the exact code above.

Raywenderlich has a nice quote describing blending effects:

Note: Because the tint color is multiplied by the original color to get the final result, if you set the color of a sprite to blue the end result won’t necessarily be blue – it depends on what the original color is. Because of this, if you want to dynamically set a sprite’s color to a specific color, it is convenient to make the source color of the sprite white (like the cat in Zombie Conga). If you want parts of your sprite to be different colors, you can also split your sprite into different parts, each of which you tint to a different color. For more information, see the Beat ‘Em Up Game Starter Kit available at raywenderlich.com.