zoukankan      html  css  js  c++  java
  • 使用ClippingNode对精灵进行遮罩处理

      在制作一个消除游戏时,有这样一个情况:方块从顶部往下面掉落,在进入布局前,是不能显示的,不然影响视觉体验。那么,既然此方块已经被加入到渲染树了,那么怎么能让其在一部分中不显示,而在另一部分中显示呢?

      这就要用到遮罩处理了。在cocos2d-x中,提供了一个裁剪节点ClippingNode,可以实现一个裁剪效果,那么被裁剪掉的部分,就是等于被遮罩了。可能其效果更多,我未深刻研究,只是拿它用来处理上面的问题。官方对此类的介绍在:

      http://www.cocos2d-x.org/docs/manual/framework/native/v3/ClippingNode/zh

      下面记录使用ClippingNode完成遮罩功能的方法。

      1.新建一个ClippingNode,其继承自Node;

      2.为ClippingNode设置裁剪模板,裁剪模板也是一个Node,但并不会显示,其默认位置是ClippingNode的坐标原点;

      3.为ClippingNode添加子节点。

      ClippingNode的子节点只有在裁剪模板的范围内才会被显示,否则是被裁剪的,也就是被遮罩住了。可以这样理解,有一块大黑布,把ClippingNode里面的内容全部都遮住了,这时候,给大黑布开了一个有形状的孔,只要位于这个孔内部的内容,都会显示出来。这个孔就是模板。

      具体代码如下:

        //窗口大小
        auto winSize = Director::getInstance()->getWinSize();
    
        //创建一个裁剪节点
        auto clipper = ClippingNode::create();
        clipper->setPosition(winSize.width / 2, winSize.height / 2);
        addChild(clipper);
    
        //设置一个裁剪模板,此模板不会被绘制,只是用来遮罩的
        auto stencil = Sprite::create("HelloWorld.png");
        clipper->setStencil(stencil);
    
        //添加一个裁剪节点,不在裁剪模板范围内的将不显示
        auto test_sprite = Sprite::create("powered.png");
        test_sprite->setPosition(100, 100);
        clipper->addChild(test_sprite);

      显示效果:

      可以看到:

      1.裁剪模板是不会显示的,这里的红框是另外绘制的,用以表示裁剪模板的范围。

      2.ClippingNode的子节点并不会被完整渲染,只有位于裁剪模板内的内容,才会被渲染。

  • 相关阅读:
    软件工程实践总结
    Axios使用总结
    个人作业——软件测评
    结对第二次作业-疫情统计可视化实现
    结对第一次——疫情统计可视化(原型)
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    Springboot后端接口开发
    个人作业——软件工程实践总结&个人技术博客
    个人作业——软件评测
  • 原文地址:https://www.cnblogs.com/demon90s/p/4585535.html
Copyright © 2011-2022 走看看