Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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]];
share|improve this question
This seems pretty localized. Can you give a general case? – Byte56 Jun 13 '12 at 23:18
do you mean something like behind the wall effect? I guess a picture can help too. – Ali.S Jun 14 '12 at 1:05
@Gajet I edited my post with images! ;) – Paul Jun 14 '12 at 11:08
@Byte56 I edited my post with images! ;) – Paul Jun 14 '12 at 11:08
Are you using cocos2d 1.x or 2.x? Also: Are the regions always rectangles or can they be arbitrarily shaped? – bummzack Jun 14 '12 at 13:38

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

share|improve this answer
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? – Paul Jun 14 '12 at 17:04
@Paul it's done. – Ali.S Jun 14 '12 at 18:30
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 – Paul Jun 14 '12 at 22:28
@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. – Ali.S Jun 14 '12 at 23:41

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.