Cocos2d iPhone - 精灵剪裁/蒙版/框架答案

【问题标题】：Cocos2d iPhone - Sprite cliping/mask/frameCocos2d iPhone - 精灵剪裁/蒙版/框架
【发布时间】：2011-03-11 19:15:38
【问题描述】：

如何在 Cocos2D 中剪辑/裁剪/遮罩或仅设置 CCSprite 的框架？

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

我的 CCSprite Main Sprite 添加了多个 Child Sprite。我只希望 Main Sprite Sprite 的 Mask 部分可见。有没有办法为 CCSprite 剪辑或使用蒙版？

我可以剪掉背景和上面的图层，只留下可见区域，但这是唯一的方法吗？！

这是一个示例图片，展示了我想要实现的目标：
_{（来源：dnamique.com）}

【问题讨论】：

标签： cocos2d-iphone

【解决方案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，假设您有一个旋转的纵向屏幕。

【讨论】：

另一个警告 - 剪辑区域与精灵无关，它是基于世界的。因此，无论您如何转换精灵，它都将保持在原位。如果您需要移动蒙版，则必须手动移动/缩放它以及精灵。
是的，你是对的。起初我没有意识到这一点。现在我将 x 和 y 设为相对于我的视图位置，所以它们总是一起移动。
@jtalarico，你知道在转换时从哪里获得精灵变换吗：CCDirector::sharedDirector()->pushScene( CCTransitionSlideInL::create( 10.0f, pScene ) ); 谢谢！

【解决方案2】：

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

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

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

【讨论】：

如何处理旋转的裁剪节点？

【解决方案3】：

我尝试使用 Steffen Itterheim 的 ClippingNode，但无法在足够强大的环境中工作足够时尚满足我的需求。

信不信由你，下面的代码运行良好，应该是完整的代码。它处理设备方向变化、锚点、位置、比例（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

【讨论】：