在 Cocos2D 中的多边形中切割异形孔

Question

假设使用 CCDrawNode 创建一个填充多边形：

CCDrawNode *polygon = [CCDrawNode node];

CGPoint points[4];
points[0] = ccp(-20.0, -20.0);
points[1] = ccp(20.0, -20.0);
points[2] = ccp(20.0, 20.0);
points[3] = ccp(-20.0, 20.0);

[polygon drawPolyWithVerts:points count:4 fillColor:[CCColor blackColor] borderWidth:0.0 borderColor:[CCColor clearColor]];
[self addChild:polygon];

如何在其中切出异形孔，以达到类似的效果？

http://i.imgur.com/45qetR1.png

孔洞会以各种配置动态生成，因此不能选择准备一组预制纹理。

我没有运气尝试使用 CCDrawNode 将孔创建为多边形并应用混合功能：

CCDrawNode *circle = [CCDrawNode node];
[circle drawDot:ccp(0.0, 0.0) radius:10.0 color:[CCColor whiteColor]];
[circle setBlendFunc:(ccBlendFunc){GL_ONE_MINUS_DST_ALPHA, GL_ONE_MINUS_SRC_ALPHA}];
[self addChild:circle];

或

...
[polygon setBlendFunc:(ccBlendFunc){GL_ONE_MINUS_DST_ALPHA, GL_ONE_MINUS_SRC_ALPHA}];
[polygon drawDot:ccp(0.0, 0.0) radius:10.0 color:[CCColor whiteColor]];
[self addChild:polygon];

我相信我尝试了所有混合模式的组合，但没有找到合适的。

我显然做错了什么，因为这看起来可以使用混合模式来实现。还是我必须覆盖draw 方法并应用一些OpenGL ES 代码？我尝试使用 OpenGL，但最终什么也没做。另外，我不确定将 OpenGL ES (2.0+) 与 Cocos2D 混合的首选方式是什么，至于我知道我应该避免在“即时模式”下这样做。

但如果这不是正确的做法，我想知道您的建议。

顺便说一句——CCDrawNode 似乎不支持开箱即用的opacity 属性。有没有办法启用它？它只是以 100% 的不透明度呈现其内容，而不管属性的值如何。

我在 iOS 7.1 上使用 Cocos2D 3.0。

Answer 1

您应该查看CCClippingNode 类。这是一个例子：

// Square-shaped hole
CCDrawNode *square = [CCDrawNode node];
CGPoint squarePoints[4] = {ccp(-20.0, -20.0), ccp(20.0, -20.0), ccp(20.0, 20.0), ccp(-20.0, 20.0)};
[square drawPolyWithVerts:squarePoints count:4 fillColor:[CCColor blackColor] borderWidth:0.0 borderColor:[CCColor clearColor]];
square.position = ccp(0.0, 0.0);

// Triangle-shaped hole
CCDrawNode *triangle = [CCDrawNode node];
CGPoint trianglePoints[3] = {ccp(-10.0, 25.0), ccp(10.0, 25.0), ccp(0.0, 25.0 + 10.0 * sqrt(3.0))};
[triangle drawPolyWithVerts:trianglePoints count:3 fillColor:[CCColor blackColor] borderWidth:0.0 borderColor:[CCColor clearColor]];
triangle.position = ccp(0.0, 0.0);

// Prepare your stencil
CCNode *stencil = [CCNode node];
[stencil addChild:square];
[stencil addChild:triangle];

// Create a clipping node with the prepared stencil
CCClippingNode *clippingNode = [CCClippingNode clippingNodeWithStencil:stencil];

// Setting the clipping mode to inverted will result in the clipping node drawing its contents everywhere BUT the stencil's non-transparent areas
clippingNode.inverted = YES;

// Create your polygon
CCDrawNode *polygon = [CCDrawNode node];
CGPoint polygonPoints[4] = {ccp(-50.0, -50.0), ccp(40.0, -40.0), ccp(50.0, 50.0), ccp(-40.0, 40.0)};
[polygon drawPolyWithVerts:polygonPoints count:4 fillColor:[CCColor blackColor] borderWidth:0.0 borderColor:[CCColor clearColor]];
polygon.position = ccp(0.0, 0.0);
[clippingNode addChild:polygon];

// Now the clipping node should contain your polygon with shaped-holes in it

如果我没记错的话，使用 CCDrawNode 创建的实心圆在模板中效果不佳，因此您可能需要创建自己的圆绘图类或使用纹理。