使用Cocos2d-x裁剪精灵

2017-5-23 12:13:7
收藏：0
阅读：115
评论：1

我无法对简单的精灵进行裁剪。我使用的是Cocos2d-x 3.1rc0。以下是代码:

这遵循与以下问题相同的模式:

以下是描述问题的图像:

enter image description here

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

顺便说一下，depthFormat设置为GL_DEPTH24_STENCIL8_OES。因此，那不是问题。

另外，为什么模板的绘制从中间开始而不是左下角？我设置了剪辑器和形状的anchorPoint，但无法移动它。困惑。

这是我的AppController.mm代码:

点赞
用户455791
用户455791

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

    local size = cc.Director:getInstance():getVisibleSize()
    local origin = cc.Director:getInstance():getVisibleOrigin()
    local empty = cc.Sprite:createWithSpriteFrame(cc.SpriteFrameCache:getInstance():getSpriteFrame(_frameName))
    -- 将进度条框架完全放入视野中。
    local bbox = empty:getBoundingBox()
    empty:setPosition(bbox.width/2, bbox.height/2)

    -- 框架的背景层（一个漂亮的透明背景）
    local bg = createSpriteWithOffset(_bgName, bbox)
    -- 填充进度条的层
    local fill = createSpriteWithOffset(_fillName, bbox)
    -- 显示在进度条上的文本纹理
    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) -- 左上角调整

    -- 模板（掩蔽层）
    local mask = cc.c4b(0, 0, 0, 1)
    -- 需要显示的填充像素数
    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

这是最终结果的图片。

enter image description here

诀窍在于如何创建模板。

始终记住，你的绘图从0,0开始；这很有意义，对吧？同时，有几点需要注意：最好在渲染纹理之后缩放_rendered_纹理，而不是在渲染图像之前缩放纹理。如果你在渲染之前将纹理缩小到一定程度，渲染的质量会很低。最后，我发现将图形渲染在0,0位置要容易得多，而不是在渲染之后将元素定位到你想要的位置。这使得定位最终结果变得更加容易。

2014-07-04 04:51:10

作者:

用户455791

用户455791
推荐文章