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로 설정 : 심지어 시도하고이 사람의 코드를 구현하기까지했다. 그래서 그게 문제가 아니에요.

또한 왜 스텐실의 드로잉은 맨 아래 왼쪽이 아닌 가운데에서 시작합니까? 깎기와 모양의 앵커 포인트를 설정하고 움직일 수 없습니다. 혼란스러워.

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

여기 내 솔루션입니다 :

여기 내 AppController.mm 코드입니다. 이 코드를 사용하여 진행률 표시 줄을 채 웁니다.

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으로 렌더링하는 것이 훨씬 쉽습니다. 최종 결과를 훨씬 쉽게 배치 할 수 있습니다.