Question

I have two layers being drawn. A static background texture and a texture(png) with transparent parts. I can correctly see the background with no problems. What I would like to do is modify the top layer by drawing a polygon(rectangle) with size that will change at run time to make that portion of the top layer transparent so you just see that static background.

I am using Cocos2d on for the iphone and found a nice solution by the author (see #6) but in his example he is using another PNG file as the mask. Since my transparent parts will be created at run time with variable heights and widths an image does not work. The overhead of drawing the image(mask) over and over would be to much as well I think.

I have been researching this for awhile now and found a few people talk about drawing a polygon to only the alpha channel and I have been able to get the polygon to draw to this channel it does not make it transparent just a slightly brighter color.

I am hoping that I am just missing something simple:

        RenderTexture *mBurnLayer = [RenderTexture renderTextureWithWidth:512 height:512];
    Sprite *burn = [Sprite spriteWithFile:@"bg-new.png"];
    [burn setPosition:cpv(480/2,320/2)];
    [mBurnLayer setPosition:cpv(256,256)];
    [mBurnLayer begin];
    glColorMask(TRUE, TRUE, TRUE, TRUE);
    [burn visit];
    glColorMask(TRUE, TRUE, TRUE, FALSE);
    [mBurnLayer end];
    [self addChild:mBurnLayer];

    [mBurnLayer begin];
    glColorMask(FALSE, FALSE, FALSE, TRUE);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE);
    glColor4ub(1, 1, 1, 0.5);
    glLineWidth(10);
    CGPoint vertices[] = { ccp(100,100), ccp(100,200), ccp(200,200), ccp(200,100) };
    drawPoly( vertices, 4, YES);
    glColorMask(TRUE, TRUE, TRUE, TRUE);

I have tried a ton of diffrent combinations of GL_ONE GL_ZERO GL_ALPHA_FROM_SRC etc….

Further reading maybe I need to just clip the texture? Is this possible without a shader? I know iPhone 3GS can do shaders but earlier ones can not.

Answer 1

I figured it out, here is the code for future reference by anyone needing it.

RenderTexture *bigBackgroundLayer = [RenderTexture renderTextureWithWidth:512 height:512];
Sprite *bigBackgroundSprite = [Sprite spriteWithFile:@"big_bg.png"];
[bigBackgroundSprite setPosition:cpv(240,150)];
[bigBackgroundLayer setPosition:ccp(240,150)];
[bigBackgroundLayer begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[bigBackgroundSprite visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[bigBackgroundLayer end];
[self addChild:bigBackgroundLayer z:0];

RenderTexture *gameBoardLayer = [RenderTexture renderTextureWithWidth:512 height:512];
Sprite *gameBoardSprite = [Sprite spriteWithFile:@"bg-new.png"];
[gameBoardSprite setPosition:cpv(480/2,320/2)];
[gameBoardLayer setPosition:cpv(256,256)];
[gameBoardLayer begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[gameBoardSprite visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[gameBoardLayer end];
[self addChild:gameBoardLayer];

[gameBoardLayer begin];
glColorMask(FALSE, FALSE, FALSE, TRUE);
glBlendFunc(GL_ONE, GL_ZERO);
glColor4ub(1, 1, 1, 0.0);
glLineWidth(10);
CGPoint vertices[] = { ccp(100,100), ccp(100,300), ccp(300,300), ccp(300,100) };
drawPoly( vertices, 4, YES);
glColorMask(TRUE, TRUE, TRUE, TRUE);
[gameBoardLayer end];

This blends gameBoardSprite to bigBackgroundSprite. Using built in drawPoly function this will only draw the rectangle as lines, I modifed the function to take an extra parameter for GLEnum mode(not in this code) and set it to GL_TRIANGLE_FAN to fill in the poly.

Hope this is helpful to someone else.