Hello all, sorry for my English is not good.
how do I let the user resolve 50 percent of the scratch image without releasing his finger and without laggy of the phone ?

If anyone needs to use abitofcode getpercentage function but with a rectangle: (To check if only a part of the texture was scratched off)

//
//  CCRenderTexture+Percentage.m
//  Digger
//
//  Created by on 12/09/2012.
//  Copyright 2012 __MyCompanyName__. All rights reserved.
//

#import "CCRenderTexture.h"
#import "CCRenderTexture+Percentage.h"

@implementation CCRenderTexture (Percentage)

-(float) getPercentageTransparent :(CGRect) rect
{
    NSAssert(pixelFormat_ == kCCTexture2DPixelFormat_RGBA8888,@"only RGBA8888 can be saved as image");

    int tx = rect.origin.x + rect.size.width;
    int ty = rect.origin.y + rect.size.height;

    int bitsPerPixel                = 4 * 8;
    int bytesPerPixel               = bitsPerPixel / 8;
    int bytesPerRow                 = bytesPerPixel * (tx - rect.origin.x);
    NSInteger myDataLength          = bytesPerRow * (ty - rect.origin.y);

    int numberOfPixels              = (tx - rect.origin.x) * (ty - rect.origin.y);
    float numberOfTransparent       = 0;

    GLubyte *buffer = malloc(sizeof(GLubyte)*myDataLength);

    if( ! (buffer) )
	{
        CCLOG(@"cocos2d: CCRenderTexture#getUIImageFromBuffer: not enough memory");
        free(buffer);
        return -1.0f;
    }

    [self begin];
    glReadPixels(rect.origin.x,rect.origin.y,(tx - rect.origin.x),(ty - rect.origin.y),GL_RGBA,GL_UNSIGNED_BYTE, buffer);
    [self end];

    int x,y;
    for(y = 0; y < (ty - rect.origin.y); y++)
	{
        // just want the last byte (alpha) for each pixel
        for(x = 0; x < (tx - rect.origin.x); x++)
		{
            GLubyte alpha = buffer[(y * 4 * (int)(tx - rect.origin.x) + ((x * 4) + 3))];
            if(alpha == 0)
			{
                numberOfTransparent++;
            }
        }
    }    

    free(buffer);

    return (numberOfTransparent/numberOfPixels)*100;
}
@end

hi,

can someone help me with ccBlendFunc ? because i have background image classic png with no transparency but higher image, which is scratched off is png with a few places with transparency. especialy edges. so ccBlendFunc\s from this thread are not good enough :/
can some help me ?
thanks

Can we have scratch in as scratch off?
Sorry for bad english.
Pls check the video.
Can any body have idea draw on charactor with white color can be done by masking?
or is it the right way,
is there any other idea we can work upon for to implement drawing on charactor "a" using cocos2d?
Help is greatly appreciated.

+1

I made the fragment shader way for a job, so I am unsure if I am allowed to share it for free.
But if you have any questions, just ask.

I'd love to see the fragment shader version.

do you know how to change it ?

thank you abitofcode :)

and what if i programing it for ipad and i do not want use images in whole size of ipad. i want use one image size of 400x400 and second for example the same 400x400 size. if i use your method for get percentage i need to scratch off whole screen of ipad, but i want to scratch off only 400x400 the picture for scratch. because the problem is that , when i scratch off whole image 400x400 the function get percentace get me only 25%, what is 25 % of ipad screen, but in my opinion it would be 100%. not just only 25%. hm . i dont know if i explaining right. hm. do you understand ?

thank you

@mayoxy Check out this post http://www.cocos2d-iphone.org/forum/topic/12557#post-156306

Careful of the recursion when you get to the end of the post ;)

how did you check how much percent of picture is scratch already? i see on the video that at the finish the label is showen that is scrach. how did you checking how many for example percentage is already scratched?

i'm not nearly as good at opengl as the people who make these posts but I am good at doing hacks to get what I want. What I would do is just make multiple scratch offs then just switch in code when you want. but maybe others have a better solution.

Yeah i though also about that option but this has to happen continuosly, meaning that all of the layers (in my case 4) should co-exist at the same time.

For having multiple burn layer I would recommend a custom vertex shader, firstly you mix the base with overlay 1 using alpha from rendertexture 1, then you mix this result with overlay 2 using alpha from rendertexture 2.

That sounds more suitable for my purpose but also more complicated. The best thing for me would be to generate a new Sprite with the combination of 2 Layers everytime touchEnded gets call, the workflow would be like this:

-> touchMoved erases part of the top layer -> touchEnded -> top layer and layer below get combined on a new Sprite. -> start again

What do you think about this approach? Could be reasonable and performant? Any code hints? I will try it tomorrow and come back to you here to share the infos.

I have a version running with gles20 and a special frag shader: http://www.youtube.com/watch?v=MWfihxUm-Q4

For burning slowly, why dont you just paint into the render texture automatically?

For having multiple burn layer I would recommend a custom vertex shader, firstly you mix the base with overlay 1 using alpha from rendertexture 1, then you mix this result with overlay 2 using alpha from rendertexture 2.

Then you only need to check which rendertexture to use when painting - easy solution would be two custom utilities, otherwise you needed some alphachecking for each pixel.

i'm not nearly as good at opengl as the people who make these posts but I am good at doing hacks to get what I want. What I would do is just make multiple scratch offs then just switch in code when you want. but maybe others have a better solution

Hi There!

First of all say that this post is great and have helped me a lot.

But now i am bringing a new challenge to the scenario... How about having multiple layers? Say you scratch the first layer so you see the one just underneath, now you tap on the one that was revealed and scratch it as well....

Do you have any hints about which considerations to take?

Hmm, seems that this was possible - I wasn't updating the texture properly. To my next problem - I've been trying to "slowly" reveal the image underneath, by say, burning into the alpha channel a little at a time. I've tried this by modifying the glColorMask, but unless the alpha value is 1, it doesn't work.


// Limit drawing to the alpha channel
glColorMask(0.0f, 0.0f, 0.0f, variableAlpha);


Has anyone achieved this using gles20 yet? My knowledge of OpenGL is pretty ropey at best and it doesn't seem like it should be too complicated! Any pointers would be gratefully received.

woohoo. thanx mate. I get it now when I made your changes and also I understood that I needed to change my source image position and my rendertexture position. thanks again for the class and for the help.

Your touchpoint is off, the video should clear it up. As you have moved the node the touch location in the world space needs converting to a location in the nodespace;

We'll use the background image to determine where the nodespace we're interested in is;
add the following to the .h file

#define BACK_IMAGE          5

and change this in the init method

// add the label as a child to this Layer
    [self addChild: back z:0 tag:BACK_IMAGE];

In the ccTouchesBegan and ccTouchesMoved methods add

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	UITouch *touch = [touches anyObject];
	if ([touch tapCount] >= 3) {
        [self reset];
	} else {
        CCRenderTexture *backImage = (CCRenderTexture*)[self getChildByTag:BACK_IMAGE]; 

		CGPoint location = [touch locationInView: [touch view]];
        location = [[CCDirector sharedDirector] convertToGL:location];
        location = [backImage convertToNodeSpace:location];        // <-- convert world location to node location
        revealSprite.position = CGPointMake(location.x, location.y);
	}
}

//Move the burn sprite
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CCRenderTexture *backImage = (CCRenderTexture*)[self getChildByTag:BACK_IMAGE];    

	UITouch *touch = [touches anyObject];
	CGPoint location = [touch locationInView: [touch view]];
    location = [[CCDirector sharedDirector] convertToGL:location];
    location = [backImage convertToNodeSpace:location];       // <-- convert world location to node location
	revealSprite.position = CGPointMake(location.x, location.y);
}

//
//  HelloWorldLayer.m
//  Scratch
//
//  Created by Christopher Wilson on 29/04/2012.
//  Copyright abitofcode ltd 2012. All rights reserved.
//

// Import the interfaces
#import "HelloWorldLayer.h"
#import "CCRenderTexture+Percentage.h"

// HelloWorldLayer implementation
@implementation HelloWorldLayer

+(CCScene *) scene
{
	// 'scene' is an autorelease object.
	CCScene *scene = [CCScene node];

	// 'layer' is an autorelease object.
	HelloWorldLayer *layer = [HelloWorldLayer node];

	// add layer as a child to scene
	[scene addChild: layer];

	// return the scene
	return scene;
}

-(void)reset
{
    // ask director the the window size
    CGSize size = [[CCDirector sharedDirector] winSize];

    CCRenderTexture *scratchableImage = (CCRenderTexture*)[self getChildByTag:SCRATCHABLE_IMAGE];    

    CCSprite *sourceImage = [CCSprite spriteWithFile:@"purpletracepart1.png"];
    sourceImage.position = ccp( size.width * 0.5f , size.height * 0.5f );

    [scratchableImage begin];
    [sourceImage visit];
    [scratchableImage end];

   // NSLog(@"Transparent: %f percent",[scratchableImage getPercentageTransparent]);
}

// on "init" you need to initialize your instance
-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init])) {

        positionbottomsquare = ccp(477/2, 320 - 415/2);

		// ask director the the window size
		CGSize size = [[CCDirector sharedDirector] winSize];

		// Create a background image
        CCSprite *back = [CCSprite spriteWithFile:@"purpletracepart1completeglow.png"];

        // position the label on the center of the screen
		back.position =  ccp( size.width * 0.5f , size.height * 0.5f );
		back.position = positionbottomsquare;

		// add the label as a child to this Layer
		[self addChild: back];

        // Scratchable layer
        CCRenderTexture *scratchableImage = [CCRenderTexture renderTextureWithWidth:size.width height:size.height];
       // CCRenderTexture *scratchableImage = [CCRenderTexture renderTextureWithWidth:back.contentSize.width height:back.contentSize.height];
        scratchableImage.position = ccp( size.width * 0.5f , size.height * 0.5f );
        scratchableImage.position = positionbottomsquare;
        [self addChild:scratchableImage z:1 tag:SCRATCHABLE_IMAGE];
        [[scratchableImage sprite] setBlendFunc: (ccBlendFunc) { GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA }];

        // Source image
        [self reset];

        /*
		// create and initialize a Label
		CCLabelTTF *label = [CCLabelTTF labelWithString:@"" fontName:@"ArialRoundedMTBold" fontSize:24];
        [label setString:[NSString stringWithFormat:@"Percentage transparent: %.0f",[scratchableImage getPercentageTransparent]]];
        [label setColor:ccc3(0,0,0)];
		label.position =  ccp( size.width /2 , size.height - label.contentSize.height );
        [self addChild:label z:2 tag:LABEL_TEXT];
        */

		//Set up the burn sprite that will "knock out" parts of the darkness layer depending on the
		//alpha value of the pixels in the image.
		revealSprite = [CCSprite spriteWithFile:@"plexxusmode.png"];
        revealSprite.position = ccp( -10000, 0);
		[revealSprite setBlendFunc: (ccBlendFunc) { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA }];
		[revealSprite retain];   

        [self schedule: @selector(tick:)];  

        self.isTouchEnabled = YES;
	}
	return self;
}

-(void) tick: (ccTime) dt
{
    CCRenderTexture *scratchableImage = (CCRenderTexture*)[self getChildByTag:SCRATCHABLE_IMAGE];

    // Update the render texture
    [scratchableImage begin];

    // Limit drawing to the alpha channel
    glColorMask(0.0f, 0.0f, 0.0f, 1.0f);

    // Draw
    [revealSprite visit];

    // Reset color mask
    glColorMask(1.0f, 1.0f, 1.0f, 1.0f);

    [scratchableImage end];
}

//Move the burn sprite unless user double taps - then we reset the darkness layer
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	UITouch *touch = [touches anyObject];
	if ([touch tapCount] >= 3) {
        [self reset];
	} else {
		CGPoint location = [touch locationInView: [touch view]];
        location = [[CCDirector sharedDirector] convertToGL:location];
		revealSprite.position = CGPointMake(location.x, location.y);
	}
}

//Move the burn sprite
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
	UITouch *touch = [touches anyObject];
	CGPoint location = [touch locationInView: [touch view]];
    location = [[CCDirector sharedDirector] convertToGL:location];
	revealSprite.position = CGPointMake(location.x, location.y);
}

-(void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    revealSprite.position = ccp( -10000, 0);    

   // CCRenderTexture *scratchableImage = (CCRenderTexture*)[self getChildByTag:SCRATCHABLE_IMAGE];
   // CCLabelTTF *label = (CCLabelTTF*) [self getChildByTag:LABEL_TEXT];
   // [label setString:[NSString stringWithFormat:@"Percentage transparent: %.0f",[scratchableImage getPercentageTransparent]]];
}

// on "dealloc" you need to release all your retained objects
- (void) dealloc
{
	// in case you have something to dealloc, do it in this method
	// in this particular example nothing needs to be released.
	// cocos2d will automatically release all the children (Label)

	// don't forget to call "super dealloc"
	[super dealloc];
}
@end

sorry. i didn't mean my touchpoint is off. i know my touch point is right because i have another sprite going to the correct touch point. the scratch point is off from the the touchpoint. just for testing though i basically took ur example and changed the back and source sprite and changed the position of the back sprite and the ccrendertexutre and the scratch is off.

If it's just your touch points that are off this may help http://bobueland.com/cocos2d/2011/the-magic-of-node-spaces/

thank you so much for this! i'm just having a little problem setting it up with a back and source image that are not the same size as your sample and not positioned in the screen center. any advice. Mine seems to work except the scratch points are off. The closest I got was by only changing the back image position and the ccrenduretexture position. so I'm trying to setup a different non full window sized back and source image at another position not as the screen center.

@varedis lol, it was one of those "I should be doing something else but that looks more interesting" type of problem :)

@abitofcode - I can't believe you beat me to the punch. I was trying to come up with this method just a few days ago, nice work

I've stuck up a sample project here -> http://abitofcode.com/2012/04/ccrendertexture-category-percentage-complete/

@s.eropunov & @dinabravo Something along these lines added to your CCRenderTexture.m

-(float)getPercentageTransparent
{
    NSAssert(pixelFormat_ == kCCTexture2DPixelFormat_RGBA8888,@"only RGBA8888 can be saved as image");

	CGSize s = [texture_ contentSizeInPixels];
	int tx = s.width;
	int ty = s.height;

	int bitsPerComponent			= 8;
    int bitsPerPixel                = 4 * 8;
    int bytesPerPixel               = bitsPerPixel / 8;
	int bytesPerRow					= bytesPerPixel * tx;
	NSInteger myDataLength			= bytesPerRow * ty;

    int numberOfPixels              = tx * ty;
    float numberOfTransparent       = 0;

	GLubyte *buffer	= malloc(sizeof(GLubyte)*myDataLength);

	if( ! (buffer) ) {
		CCLOG(@"cocos2d: CCRenderTexture#getUIImageFromBuffer: not enough memory");
        free(buffer);
		return -1.0f;
	}

	[self begin];
        glReadPixels(0,0,tx,ty,GL_RGBA,GL_UNSIGNED_BYTE, buffer);
	[self end];

    int x,y;
	for(y = 0; y < ty; y++) {
        // just want the last byte (alpha) for each pixel
		for(x = 0; x < tx; x++) {
            GLubyte alpha = buffer[(y * 4 * tx + ((x * 4)+3))];
            if(alpha == 0) {
                numberOfTransparent++;
            }
		}
	}    

    free(buffer);

    return (numberOfTransparent/numberOfPixels)*100;
}

Hi, I have the same problem as eropunov, I would like to know how to test if the image is scratched (at least 80% of it). getUIImageAsDataFromBuffer is not available anymore so I don't know how to read the render texture from a buffer.. Can anyone help with this?

Hi All sorry my English,
In me the question as it is possible to determine that I did rub over entire surface? In order to determine to make a logical end of the game.

Hi all,

I just tried this code which works perfectly.

There is an option I'd like to change, but can't find what parameters is responsible for that : so far, each time I touch the screen, the sprite is created on the screen to reveal the background. What I'd like is that the alpha of the sprite would be half (or more) lower, so that I'd need to "scratch" twice my screen in order to have the background revealed.

Is there an easy way to change something in the code aboce to have this effect ?