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 : enter image description here

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 :

enter image description here

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


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


        [batch addChild:blue z:1];


        id action1 = [CCMoveTo actionWithDuration:3 position:ccp(size.width,size.height/2)];
        [black runAction: [CCSequence actions:action1, nil]];
  • \$\begingroup\$ This seems pretty localized. Can you give a general case? \$\endgroup\$
    – House
    Jun 13, 2012 at 23:18
  • \$\begingroup\$ do you mean something like behind the wall effect? I guess a picture can help too. \$\endgroup\$
    – Ali1S232
    Jun 14, 2012 at 1:05
  • \$\begingroup\$ @Gajet I edited my post with images! ;) \$\endgroup\$
    – Paul
    Jun 14, 2012 at 11:08
  • \$\begingroup\$ @Byte56 I edited my post with images! ;) \$\endgroup\$
    – Paul
    Jun 14, 2012 at 11:08
  • \$\begingroup\$ Are you using cocos2d 1.x or 2.x? Also: Are the regions always rectangles or can they be arbitrarily shaped? \$\endgroup\$
    – bummzack
    Jun 14, 2012 at 13:38

1 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

  • \$\begingroup\$ thanks, can you explain a bit more? the blue version (depth 1) will be above the red version (depth 0), then how will the red version go above the blue version just when the door slides? \$\endgroup\$
    – Paul
    Jun 14, 2012 at 17:04
  • 1
    \$\begingroup\$ @Paul it's done. \$\endgroup\$
    – Ali1S232
    Jun 14, 2012 at 18:30
  • \$\begingroup\$ thanks Gajet! ( when you say "OpenGL will only draw objects if they are behind other objects." (so the depth notion is completely different from the "z" value, right? which would override every pixel drawn in a lower "depth".) So if i drew an Orange rectangle behind the red one, the red one won't be shown, just because the orange is the "last" object behind another? Also, why don't you just draw, in this order: at first, player red at depth 0, then player blue at depth 1, and finally the door at depth 2, then put depth test function to LESS, and slide the door to show the red one? Thanks again \$\endgroup\$
    – Paul
    Jun 14, 2012 at 22:28
  • \$\begingroup\$ @Paul as I said I didn't test that thing myself. I just knew you can change the openGL behavior towards z value, and that's all. If you think your algorithm will work you can try it, but I'm not sure if it's possible that easily. I mean in my opinion you should draw wall and original player in different depths to be able to draw the overlay correctly. \$\endgroup\$
    – Ali1S232
    Jun 14, 2012 at 23:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .