Image 1 becomes image 2 with sliding effect from left to right?

Question

I would like to show a second image appearing while a "door" is closing on my character. I've got my character in the middle of the screen and a door coming from the left. When the door passes my character, I would like to have this second image appearing little by little.

So far, I've gotten by with fadingOut the character and then fadingIn my second image of the character at the same position when the door is completely closed, but I would like to have both of them at the same time. (the effect that image 1 becomes image 2 when the door is sliding from left to right). Would you know how to do this with Cocos2d?

Here are the images :

at first, the character is blue, and the door is coming from the left :

Then, behind the black door, the character becomes red, but only behind this door, so it stays blue when the door is not on him, and will become completely red when the door passes the character :

---

EDIT : with this code, the black door hides the red and blue rectangles : (And if i add each of my layers at a different depth, and only use GL_LESS, same thing)

blue.position =  ccp( size.width*0.5 , size.height/2 );
        red.position =  ccp( size.width*0.46 , size.height/2 );
        black.position =  ccp( size.width*0.1 , size.height/2 );

        glEnable(GL_DEPTH_TEST);

        [batch addChild:red z:0];
        [batch addChild:black z:2];

        glDepthFunc(GL_GREATER);

        [batch addChild:blue z:1];

        glDepthFunc(GL_LESS);

        id action1 = [CCMoveTo actionWithDuration:3 position:ccp(size.width,size.height/2)];
        [black runAction: [CCSequence actions:action1, nil]];

Answer 1

I didn't test this solution myself, but I think it should work theoretically. you need a little more googling to find out how to exactly implement it. also note that for the whole process you need to have DEPTH_TEST enabled.

1. draw player at depth 0
2. draw the wall at depth 2
3. change depth test function to MORE
4. draw the overlay (blue) player at depth 1
5. restore depth test function to LESS

while working with z buffer, what ever you draw will change the depth. Meaning when you start drawing player all it's pixels are marked as z=0. Later when you draw the door, all pixel that are draw above player will be drawn with z=2. At this point we change the depth test function. Depth function determines what are the conditions to draw a new colors in that specific pixel. As I said we change the Depth test function. It means from that point forward OpenGL will only draw objects if they are behind other objects. I guess you can now see where I'm going to. The blue rectangle is behind the wall but it's above the red one. So while drawing OpenGL should just skip all the pixels which are not behind the wall.

note: I've just noticed the default GL_DEPTH_FUNC value is GL_LESS so I've changed instruction 3 and 5