CCMask for Cocos2D « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d 3rd party extensions

CCMask for Cocos2D

(65 posts) (25 voices)

Started 1 year ago by KingIsulgard
Latest reply from Gamer

Tags:

Aiham
Member

Thanks for the great class. Like a few other people here, I need the opposite type of mask, where only things inside the mask are displayed. I added a static method to CCMask which creates an inverse version of the mask sprite to be used with CCMask:

+ (CCSprite *) createNegativeMaskSprite:(CCSprite *)mask size:(CGSize)size {
	NSAssert(mask != nil, @"Invalid sprite for mask");

	// Size should be set to mask.contentSize, or something
	// larger if you need to cover more space
	CCRenderTexture *rt = [CCRenderTexture renderTextureWithWidth:size.width height:size.height];

	// Fill the area in black
	[rt beginWithClear:255.0f g:255.0f b:255.0f a:255.0f];

	// Cut out a piece of the black area in the shape of the mask
	glColorMask(0.0f, 0.0f, 0.0f, 1.0f);
	[mask setBlendFunc: (ccBlendFunc) { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA }];
	[mask visit];
	glColorMask(1.0f, 1.0f, 1.0f, 1.0f);

	[rt end];

	// Store the negative mask in a new sprite object
	CCSprite *new_mask = [CCSprite spriteWithTexture:rt.sprite.texture];

	// For some reason the mask ended up flipped so I just flipped it back.
	// It might have to do with the device orientation or some openGl options.
	// I only have one orientation in my game so I didn't bother looking into it.
	new_mask.flipY = YES;

	return new_mask;
}

Example usage:

CCSprite *mask = [CCsprite .. ];
mask.anchorPoint = mask.position = ccp(0, 0); // Place the mask in the bottom left of the black rectangle

CCSprite *negative_mask = [CCMask createNegativeMaskSprite:mask size:mask.contentSize];
negative_mask.position = ccp(30.f, 50.f); // Set the negative mask's position for use with CCMask

CCMask *myMask = [CCMask createMaskForObject:myLayer withMask:negative_mask];
[self addChild:myMask];
[myMask mask];

By modifiying the position of your mask sprite before creating the negative, you can effect where inside the black rectangle the mask will be created.

After creating the negative mask, the original can be discard and the negative treated as a standalone mask sprite.

Hope this helps someone.

Posted 4 months ago #

Vramin
Member

I think I've got the definitive version of this class (nice work) from this thread, but I wondered if someone had it in an archive somewhere so I can rest assured I didn't piece it together incorrectly. I didn't see it in the latest set of cocos2d extensions.

I'm using LevelHelper and attempting to mask the edges of all of the components in a minigame so they appear inside a window. As far as I can tell I need to apply the mask individually to every sprite that will be in that window. However, when I do this the zOrder of the sprites gets changed. I haven't gotten to dig into the source to how that is or isn't getting preserved as the mask is applied. Any tips would be appreciated.

Posted 4 months ago #
Vramin
Member

Actually I never did get it working right, and it looks like it would be a pain to actually make it work with LevelHelper. I'd really like to just mask an entire layer, but I haven't found a way to do that yet, at least not with 1.0. I finally just did my mask in Illustrator and called it done. If I need to mask individual sprites one of these days I'll know what to do, though.

Posted 4 months ago #
slycrel
Member

You may want to have a look at this thread, there might be an alternative for you here: http://www.cocos2d-iphone.org/forum/topic/28329

Posted 4 months ago #

Gamer
Member

Hi,

I have used this masking code but i am getting black screen on the top right corner on the iphone simulator while i am running this code. can any one tell me where i am doing wrong and game also getting very slow FPS getting decrease upto 7/5, below is my code :

#import "cocos2d.h"

@interface CCMask : CCSprite {
    // Some screen information
    CGSize size;
    CGPoint screenMid;

    // The given sprites
    CCSprite *maskSprite;
    CCSprite *objectSprite;

    // RenderTextures use for masking
    CCRenderTexture *maskNegative;
    CCRenderTexture *masked;
}

// Initialize a masked object based on an object sprite and a mask sprite
+ (id) createMaskForObject: (CCSprite *) object withMask: (CCSprite *) mask;

// Redraw the masked image
- (void) redrawMasked;

// When dynamic masking is active, you have the ability to change the masked object or the mask itself
- (void) setObject: (CCSprite *) object;
- (void) setMask: (CCSprite *) mask;

// Return the masked object as a sprite
- (CCSprite *) getMaskedSprite;

@end

.m class

#import "CCMask.h"

@interface CCMask(Private)

- (id) initWithObject: (CCSprite *) object mask: (CCSprite *) mask;
- (void) resetObject;
- (void) mask;

@end

@implementation CCMask

+ (id) createMaskForObject: (CCSprite *) object withMask: (CCSprite *) mask {
	return [[[self alloc] initWithObject: object mask: mask] autorelease];
}

- (id) initWithObject: (CCSprite *) object mask: (CCSprite *) mask {
	NSAssert(object != nil, @"Invalid sprite for object");
    NSAssert(mask != nil, @"Invalid sprite for mask");

	if((self = [super init])) {
		[self setObject: object];
		[self setMask: mask];

        // Get window size, we want masking over entire screen don't we?
		size = [[CCDirector sharedDirector] winSize];

        // Create point with middle of screen
        screenMid = ccp(size.width * 0.5f, size.height * 0.5f);

        // Create the rendureTextures to create cut outs
        maskNegative = [CCRenderTexture renderTextureWithWidth: size.width height: size.height];
        masked = [CCRenderTexture renderTextureWithWidth: size.width height: size.height];

        // Set render textures at middle of screen
        maskNegative.position = screenMid;
        masked.position = screenMid;

        // Set correct alpha channel for textures
        [[maskNegative sprite] setBlendFunc: (ccBlendFunc) { GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA }];
        [[masked sprite] setBlendFunc: (ccBlendFunc) { GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA }];

        // Load object into RenderTextures
        [self resetObject];

        // Mask the object
        [self mask];

        // Add the masked object to the screen
        [self addChild: masked];
	}

	return self;
}

- (void) resetObject {
    // Clear textures first
    [maskNegative clear:0 g:0 b:0 a:1.0];
    [masked clear:0 g:0 b:0 a:1.0];

    // Begin action for cut out
    [maskNegative begin];

    // Load sprite
    [objectSprite visit];

    // End loading sprites
    [maskNegative end];

    // Begin action for masked
    [masked begin];

    // Load sprite
    [objectSprite visit];

    // End loading sprites
    [masked end];
}

- (void) redrawMasked {
    // Put object back on the screen
    [self resetObject];

    // Cut out the parts we don't want to see
    [self mask];
}

- (void) mask {
    // 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.
    [maskSprite setBlendFunc: (ccBlendFunc) { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA }];
    [maskSprite retain];

    // Start cutting out the parts we want to show
    [maskNegative begin];

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

    // Draw
    [maskSprite visit];

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

    [maskNegative end];

    [self addChild: maskNegative];

    // Create a temporary mask of the left cut out
    CCSprite *maskCut = maskNegative.sprite;
    maskCut.position = screenMid;

    // 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.
    [maskCut setBlendFunc: (ccBlendFunc) { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA }];
    [maskCut retain];

    [masked begin];

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

    // Draw
    [maskCut visit];

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

    [masked end];
}

- (void) setObject: (CCSprite *) object {
    objectSprite = object;
}

- (void) setMask: (CCSprite *) mask {
    maskSprite = mask;
}

- (CCSprite *) getMaskedSprite {
    return masked.sprite;
}

- (void) dealloc {
    [super dealloc];
    [maskSprite release];
}

@end

CCMask for Cocos2D

Reply