CODEWITHSUNDEEP
iphoneipadimage-processingcocos2d-iphoneeffects
Jay Haase
Jay Haase

Reputation: 1989

Transform Entire Cocos2d Layer To Simulate X-Ray Look

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. :-)

Upvotes: 1

Views: 1605

Answers (2)

rano
rano

Reputation: 5666

This comes to my mind while considering an RGB Image A.

  • Transform A to 8-bit gray scale
  • Apply a filter to enhance A's edges (*)
  • Substitute white with faint blue
  • Apply a glowing effect or a smoothing filter

(I've tested it with ImageJ and it can be a way, even if a poor one, in no way it will show a skeletal effect)

(*) You could also use a differential matrix (like Sobel's) in a convolution filter

Since I'm not a graphic designer I'd better post the example I worked on to make you save time: imagebam.com imagebam.com imagebam.com

(Seems like the thumbnails are not 'clickable') These are the singular links:

Upvotes: 1

Jay Haase
Jay Haase

Reputation: 1989

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}];        
}

Upvotes: 1

Related Questions