Question

I want to highlight an area with a rect masking a dark background image.
mask texture is:

render result is:

but it is not what I want. I need it to be like this (ps photo):

The background texture is fullscreen size dark color photo.

mask texture is 40pixel size. so, I want move it to get different shape when render.
major code:

CCSprite *textureSprite=[CCSprite spriteWithFile:@"bg_blank_alpha.png"];
CCSprite *maskSprite=[CCSprite spriteWithFile:@"bg_box_futher.png"];
CCRenderTexture * rt = [CCRenderTexture renderTextureWithWidth:textureSprite.contentSizeInPixels.width height:textureSprite.contentSizeInPixels.height];
textureSprite.position = ccp(textureSprite.contentSize.width/2, textureSprite.contentSize.height/2);
[maskSprite setBlendFunc:(ccBlendFunc){GL_SRC_COLOR, GL_ZERO}];
[textureSprite setBlendFunc:(ccBlendFunc){GL_ONE_MINUS_DST_ALPHA, GL_ZERO}];
[rt begin];
maskSprite.position=ccp(160, 240);
[maskSprite visit]; 
maskSprite.position=ccp(200, 240);
[maskSprite visit];       
[textureSprite visit];    
[rt end];

CCSprite *retval = [CCSprite spriteWithTexture:rt.sprite.texture];
retval.flipY = YES;
[self addChild:retval];
retval.position=ccp(160,240);

Answer 1

I don’t understand all the constraints you have, but perhaps this will help.

From what I can understand, the problem is happening where the blurry areas overlap. So, you should avoid having the blurry areas overlap. If only want to render sprites, then you can divide up your single sprite into different sections:

+-+----+-+ 
|a|  b |c|
+-+----+-+
| |    | |
|d|  e |f|
| |    | |
| |    | |
+-+----+-+ 
|g|  h |i|
+-+----+-+ 

Then render each section only when necessary.

+-+----+----+-+ 
|a|  b |  b |c|
+-+----+----+-+
| |    |    | |
|d|  e |  e |f|
| |    |    | |
| |    |    | |
+-+----+----+-+ 
|g|  h |  h |i|
+-+----+----+-+ 

Hope this makes sense and helps.