Get raw image data

Hi,

We are having a game where the player has to erase a certain block to reveal the background. The game ends when the background is revealed successfully.

Constraints:
Some areas in the background are the same colour as the erasable block
Erasable block can be of an irregular shape

What we have tried till now
Draw transparent squares using cc.DrawNode() to give the impression of an eraser.

We are unable to make out when the user has erased everything from the erasable block. Especially for blocks of irregular shapes, I am unable to tell if the transparent square was placed in a transparent area in the block or in a coloured area. I hope the attached images help.

Background image:

Erasable block

Erasable block is superimposed on the background before the user erases the image. Note that certain areas in the erasable block are transparent and certain areas are the same colour as the background.

Any help would be appreciated. Thanks in advance.

You can try to combine RenderTexture and ClippingNode.

RenderTexture can let user draw their path on it and make it a cached texture, you can draw the Erasable block on it, then let user to erase it with a transparent texture, you may need to set blend func to make the transparent texture really erase the block.
Then this RenderTexture node can be used as a stencil of real background.

@pandamicro, thanks as always!

After some research yesterday, I did zero in on Render Texture. Already using Clipping node to clip the sprite using transparent squares but not sure how to find out of the node has been fully erased.

Here’s some of the code:

    //Create erasable sprite but don't add it to layer:
    
            this.sprite = cc.Sprite.create(erasableBlock); 
            this.sprite.setPosition(cc.p(350,151));
            this.sprite.setTag(this.ERASABLEBLOCK);
    //Create render texture
            this.myRenderTexture = cc.RenderTexture.create( this.sprite.getBoundingBox().getWidth(),
                this.sprite.getBoundingBo

x().getHeight());
                this.myRenderTexture.setPosition(this.sprite.getPosition());
                this.addChild(this.myRenderTexture,2);

       //Create clipping node
        this.erase = cc.DrawNode.create();
        this.clipper = cc.ClippingNode.create(this.myRenderTexture);
        this.clipper.setInverted(true);

            this.clipper.addChild(this.erase);
            this.addChild(this.clipper, 0, 100);

//Use this.erase to draw transparent squares wherever necessary
          this.erase.drawPoly(vertices, transparentColour,location.x,location.y)

Problems:

  1. Transparent squares don’t come up on the block.
  2. I don’t know how to find out if the Render texture has been completely erased. Should I use pixel count? Is there some other way.

I am using Cocos 2.2.2.

For you questions

  1. I don’t quite understand, can you share a screen caption of the effect ?
  2. Sorry I have no clue for now, once I do, I will share with you. If you ever come up with some solution, please share here also, thanks

I got (1) working.

For (2) I need some sort of a way to get the colour buffer data for a renderTexture type. Is there a way? I think I could have saved th render texture to a ccImage and then got the image data from there. Don’t think this is possible in Cocos HTML5 2.2.2: https://github.com/cocos2d/cocos2d-html5/issues/854

There are no samples for how to use cc.Image() in Cocos 2.2.2 actually. Is it even supported?

Thanks so much for your patience.