Question

I am building an iPad app with Cocos2d.

I would like to transform an entire layer (and all its child sprites) to something that appears a little bit x-ray-ish. That is, a black and white image, with the white glowing a bit.

I hope one of you graphics guys has an idea or two. 🙂

Answer 1

Here is how I implemented a dynamic solution that is only a bit x-rayish (I think it is actually more closer to the the inverse of the image). I could not pre-process images, because I had to create the weird image from the current state of the game layer.

This was all done using Cocos2d:

1. I created two layers for my scene. One layer is the main game layer, the other layer is an effect layer. The main game layer is subclassed from CCLayer. The effect layer is subclassed from CCColorLayer.

2. The effect layer is at a higher z-order than the main game layer, that is, the effect layer is above the game layer.

3. I then used two different blending modes to change the appearance from normal to x-rayish.

Code-let

@implementation EffectLayer

- (id) init
{ 
    self = [super init];

    if (self != nil)
    {
        self.isTouchEnabled = YES;
        self.color = ccc3(255, 255, 255);
        self.opacity = 0.8;
        [self goNormal];
    }

    return self;
}

- (void) goWeird
{
    [self setBlendFunc:(ccBlendFunc){GL_ONE_MINUS_DST_COLOR, GL_ZERO}];    
}

- (void) goNormal
{
    [self setBlendFunc:(ccBlendFunc){CC_BLEND_SRC, CC_BLEND_DST}];        
}