使用 Cocos2d-x 剪辑精灵

Question

我不能剪辑一个简单的精灵。我正在使用 Cocos2d-x 3.1rc0。这是代码。

local sprite = cc.Sprite:create("red-box.png")
local shape = cc.DrawNode:create()
shape:drawPolygon({cc.p(0, 0), cc.p(0, 100), cc.p(100, 100), cc.p(100, 0), cc.p(0, 0)}, 5, cc.c4b(0, 0, 0, 1), 0, cc.c4b(0, 0, 0, 1))
local clipper = cc.ClippingNode:create(shape)
clipper:setContentSize(sprite:getContentSize())
clipper:setScale(0.25)
clipper:setGlobalZOrder(20)
clipper:setPosition(10, 10)
clipper:setInverted(true)
clipper:addChild(sprite)
gameLayer:addChild(clipper)

这与问题中使用的模式相同：

• Opposite of glscissor in Cocos2D?
• Cocos2d-x - how to set part of CCLayer transparent?
• http://www.onemoresoftwareblog.com/2013/12/cocos2d-x-ccclippingnode-triple-c.html（提供了一个很好的例子）

这是描述问题的图片：

我尝试了各种不同的组合，例如设置 clipper:setAlphaThreshold(0)。我什至尝试实现这个人的代码：

• Cocos2d iPhone CCClippingNode doesn't do the clip

顺便说一下，depthFormat 设置为 GL_DEPTH24_STENCIL8_OES。所以这不是问题。

另外，为什么模具的绘制是从中间开始而不是从左下角开始？我设置了理发器的锚点和形状，但无法移动。困惑。

这是我的 AppController.mm 代码：​​

window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]];
CCEAGLView *eaglView = [CCEAGLView viewWithFrame: [window bounds]
                                 pixelFormat: kEAGLColorFormatRGBA8
                                 depthFormat: GL_DEPTH24_STENCIL8_OES
                          preserveBackbuffer: NO
                                  sharegroup: nil
                               multiSampling: NO
                             numberOfSamples: 0 ];

[eaglView setMultipleTouchEnabled:YES];
// Use RootViewController manage CCEAGLView
viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil];
viewController.wantsFullScreenLayout = YES;
viewController.view = eaglView;

// Set RootViewController to window
if ( [[UIDevice currentDevice].systemVersion floatValue] < 6.0)
{
    // warning: addSubView doesn't work on iOS6
    [window addSubview: viewController.view];
}
else
{
    // use this method on ios6
    [window setRootViewController:viewController];
}

[window makeKeyAndVisible];

[[UIApplication sharedApplication] setStatusBarHidden: YES];

// IMPORTANT: Setting the GLView should be done after creating the RootViewController
cocos2d::GLView *glview = cocos2d::GLView::createWithEAGLView(eaglView);
cocos2d::Director::getInstance()->setOpenGLView(glview);

cocos2d::Application::getInstance()->run();
return YES;

Answer 1

这是我的解决方案。我使用此代码填充进度条。

    local size = cc.Director:getInstance():getVisibleSize()
    local origin = cc.Director:getInstance():getVisibleOrigin()
    local empty = cc.Sprite:createWithSpriteFrame(cc.SpriteFrameCache:getInstance():getSpriteFrame(_frameName))
    -- Put the frame of the progress bar completely in view. 
    local bbox = empty:getBoundingBox()
    empty:setPosition(bbox.width/2, bbox.height/2)

    -- Background layer of frame (a nice transparent background)
    local bg = createSpriteWithOffset(_bgName, bbox)
    -- The layer that will fill the progress bar
    local fill = createSpriteWithOffset(_fillName, bbox)
    -- Text texture displayed over the progress bar
    local text = cc.Sprite:createWithSpriteFrame(cc.SpriteFrameCache:getInstance():getSpriteFrame(_textName))
    local tbbox = text:getBoundingBox()
    text:setPosition(tbbox.width+70+bbox.x, (tbbox.height*0.5)+bbox.y+bbox.height) -- Left adjust on top

    -- Stencil (masking layer)
    local mask = cc.c4b(0, 0, 0, 1)
    -- Number of fill pixels to show.
    local fillAmt = bbox.width * percent
    local polygon = {cc.p(0, 0), cc.p(0, bbox.height), cc.p(fillAmt, bbox.height), cc.p(fillAmt, 0), cc.p(0, 0)}
    local stencil = cc.DrawNode:create()
    stencil:drawPolygon(polygon, 5, mask, 0, mask)
    local clipper = cc.ClippingNode:create(stencil)
    local paper = cc.ClippingNode:create(stencil)
    paper:addChild(fill)
    paper:addChild(clipper)

    local render = cc.RenderTexture:create(bbox.width, bbox.height+(tbbox.height*0.5), cc.TEXTURE2_D_PIXEL_FORMAT_RGB_A8888, gl.DEPTH24_STENCIL8_OES)
    render:begin()
    render:addChild(bg)
    render:addChild(paper)
    render:addChild(empty)
    render:addChild(text)
    bg:visit()
    paper:visit()
    empty:visit()
    text:visit()
    render:endToLua()
    local sprite = cc.Sprite:createWithTexture(render:getSprite():getTexture())
    sprite:setFlippedY(true)
    return sprite

这是最终结果的图片。

诀窍在于如何创建模板。

请始终牢记，您的绘图从 0,0 开始；这有道理吗？另外，一些指示；最好缩放 渲染的 纹理，而不是在渲染图像之前缩放正在渲染的纹理。如果在渲染之前将纹理按比例缩小，则渲染质量会很低。最后，我发现在 0,0 处渲染图形要容易得多，而不是在渲染发生后将元素定位到您希望它们所在的位置。它使定位最终结果变得更加容易。