Question

如何剪辑/裁剪/掩码或只在Cocos2D中设置CCSprite的帧？

类似于：设置UIView的框架，剪切子视图= TRUE

我的CCSprite 主精灵添加了多个子精灵。我只希望可见面具部分主精灵精灵。有没有办法剪辑或使用CCSprite的掩码？

我可以剪切背景和顶层，只留下那个可见区域，但这是唯一的方法吗？！

这是一个示例图片，展示了我正在努力实现的目标： alt text http://dnamique.com/maskSprite.jpg

Answer 1

我最终使用了GL_SCISSOR。

在MainSprite中的

我强制要求：

- (void) visit
{
    if (!self.visible) {
        return;
    }
    glEnable(GL_SCISSOR_TEST);
    glScissor(x, y, width, height);   
    [super visit];
    glDisable(GL_SCISSOR_TEST);
}

这将剪切或屏蔽指定区域。

唯一棘手的一点是，在横向模式下，Cocos2D在屏幕的左下角有0,0，而OpenGL在右下角有，因为它不考虑屏幕的方向。

换句话说，对于OpenGL，请考虑使用旋转的纵向屏幕。

Answer 2

我编写了一个ClippingNode类，它正是这样做的。您可以将其他节点（精灵，标签等）添加到ClippingNode，它们只会在ClippingNode指定的区域中绘制。它还需要考虑设备轮换。

在内部，它使用GL_SCISSOR_TEST，就像在巴赫的回答中一样。

http://www.learn-cocos2d.com/2011/01/cocos2d-gem-clippingnode/

Answer 3

我尝试过使用Steffen Itterheim的ClippingNode，但无法以足够强大的方式开展工作足够的时尚满足我的需求。

信不信由你，下面的代码工作得很好，代码应该完整。它处理设备方向更改，anchorPoint，位置，比例（scaleX，scaleY）。对于cocos2d v2，您可能只需要注释掉glPushMatrix和glPopMatrix调用..

要使用，只需设置position和contentSize属性，并将要剪切的子/子项添加到此ClippingNode实例。 contentSize属性用于定义剪切区域的尺寸。

example of usage:
ClippingNode *clipNode = [[ClippingNode alloc] init];
clipNode.anchorPoint = ccp(0.5f, 0);
clipNode.position = ccp(100, 25);
clipNode.contentSize = CGSizeMake(120, 120);

// add clipNode to your node hierarchy.
[parentNode addChild:clipNode];

// add one or more children to your clipNode:
[clipNode addChild:child1];

// ClippingNode.h
// CC0 - (public domain. Use in anyway you see fit.)
// No warranty of any kind is expressed or implied.
//
// by UChin Kim.
//
// the caller can simply set the regular cocos2d
// properties: position and contentSize to define the clipping region implicitly (i.e. the
// position and contentSize of the ClippingNode is the clipping region to be used).
// as an added bonus, position seems to work as expected (relative to parent node, instead of
// requiring absolute positioning).
//
// also, anchorPoint and scale properties seem to work as expected as well..
// no special code is neeed to handle device orientation changes correctly..
//
// To visually see exactly what is being clipped, set the following #define
// #define SHOW_CLIPPED_REGION_IN_LIGHT_RED 1
//

#import "cocos2d.h"

@interface ClippingNode : CCNode

@end

//
// ClippingNode.m
//
#import "ClippingNode.h"

@implementation ClippingNode

-(void) visit
{
CGPoint worldOrg = [self convertToWorldSpace:ccp(0, 0)];
CGPoint dest = [self convertToWorldSpace:ccp(self.contentSize.width, self.contentSize.height)];
CGPoint dims = ccpSub(dest, worldOrg);

glPushMatrix();
glEnable(GL_SCISSOR_TEST);

glScissor(worldOrg.x, worldOrg.y, dims.x, dims.y);

#if SHOW_CLIPPED_REGION_IN_LIGHT_RED
glColor4ub(64, 0, 0, 128);
ccDrawSolidRect(ccp(0, 0), ccp(1024, 1024));
#endif

[super visit];

glDisable(GL_SCISSOR_TEST);
glPopMatrix();
}

@end

Cocos2d iPhone - 雪碧剪辑/面具/框架

3 个答案: