cocos2dx3.0 遮罩技术, ClippingNode 和 DrawNode

最新推荐文章于 2021-10-09 09:59:50 发布

人生如游戏---

最新推荐文章于 2021-10-09 09:59:50 发布

阅读量2.6k

点赞数

分类专栏： Cocos2D-x 文章标签： cocos2d-x 遮罩 ClippingNode DrawNode

本文链接：https://blog.csdn.net/samrtian/article/details/38843549

版权

Cocos2D-x 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

先来说一下DrawNode类,这个是画图类,可以画各种几何形状.

auto s = Director::getInstance()->getWinSize();
    
    auto draw = DrawNode::create();
    addChild(draw, 10);
    
    // Draw 10 circles
//    画同心圆
    for( int i=0; i < 10; i++)
    {
        draw->drawDot(Point(s.width/2, s.height/2), 10*(10-i), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 1));
    }
    
    // Draw polygons
//    画大三角形
    Point points[] = { Point(s.height/4,0), Point(s.width,s.height/5), Point(s.width/3*2,s.height) };
    draw->drawPolygon(points, sizeof(points)/sizeof(points[0]), Color4F(1,0,0,0.5), 4, Color4F(0,0,1,1));
    
    // star poly (triggers buggs)
//    画多边形
    {
        const float o=80;
        const float w=20;
        const float h=50;
        Point star[] = {
            Point(o+w,o-h), Point(o+w*2, o),                        // lower spike
            Point(o + w*2 + h, o+w ), Point(o + w*2, o+w*2),        // right spike
//                          {o +w, o+w*2+h}, {o,o+w*2},                 // top spike
//                          {o -h, o+w}, {o,o},                         // left spike
        };
        
        draw->drawPolygon(star, sizeof(star)/sizeof(star[0]), Color4F(1,0,0,0.0), 1, Color4F(0,0,1,1));
    }
    
    // star poly (doesn't trigger bug... order is important un tesselation is supported.
    //画星
    {
        const float o=180;
        const float w=20;
        const float h=50;
        Point star[] = {
            Point(o,o), Point(o+w,o-h), Point(o+w*2, o),        // lower spike
            Point(o + w*2 + h, o+w ), Point(o + w*2, o+w*2),    // right spike
            Point(o +w, o+w*2+h), Point(o,o+w*2),               // top spike
            Point(o -h, o+w),                                     // left spike
        };
        
        draw->drawPolygon(star, sizeof(star)/sizeof(star[0]), Color4F(1,0,0,0.5), 1, Color4F(0,0,1,1));
    }
    
    
    // Draw segment
//    画直线，可加粗
    draw->drawSegment(Point(20,s.height), Point(20,s.height/2), 10, Color4F(0, 1, 0, 1));
    
    draw->drawSegment(Point(10,s.height/2), Point(s.width/2, s.height/2), 40, Color4F(1, 0, 1, 0.5));
    
    // Draw triangle
//    画三角形
    draw->drawTriangle(Point(10, 10), Point(70, 30), Point(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
    
    // Draw some beziers
    //    画二次方程的贝塞尔曲线
    draw->drawQuadraticBezier(Point(s.width - 150, s.height - 150), Point(s.width - 70, s.height - 10), Point(s.width - 10, s.height - 10), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
    //    画三次方程的贝塞尔曲线
    draw->drawCubicBezier(Point(s.width - 250, 40), Point(s.width - 70, 100), Point(s.width - 30, 250), Point(s.width - 10, s.height - 50), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

ClippingNode类是裁剪类下边以代码演示一下就更清楚了.

void ShadeLayer::addSprite(cocos2d::Sprite *sprite)
{
    CCLOG("%s", __FUNCTION__);
    if ( sprite->getTag() == 10 )
    {
        auto shape = DrawNode::create(); //画个跟sprite一样大小的形状
        Vec2 vec[] = {Vec2(sprite->getBoundingBox().getMinX(), sprite->getBoundingBox().getMaxY()),
            Vec2(sprite->getBoundingBox().getMaxX(), sprite->getBoundingBox().getMaxY()),
            Vec2(sprite->getBoundingBox().getMaxX(), sprite->getBoundingBox().getMinY()),
            Vec2(sprite->getBoundingBox().getMinX(), sprite->getBoundingBox().getMinY())};
        shape->drawPolygon(vec, 4, Color4F(1, 0, 0, 0), 2, Color4F(0, 0, 1, 1));
        
        ClippingNode *clipping = ClippingNode::create();
        clipping->setStencil( shape );  //遮罩的形状
        clipping->setInverted( true );  //为真 遮罩下什么都不显示, 为假 只有在遮罩下才显示东西.
        clipping->addChild(sprite, 1);  //只有在clipping节点下的东西才有遮罩效果
        
        addChild( clipping );
    }else
        addChild( sprite );
}