使用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的子节点并不会被完整渲染,只有位于裁剪模板内的内容,才会被渲染。

时间: 2024-07-30 09:18:50

使用ClippingNode对精灵进行遮罩处理的相关文章

cocos2d-x 精灵遮罩

转自:http://bbs.9ria.com/thread-220210-1-4.html 首先得理解一些东西. 1.理解颜色混合.精灵有个成员函数:setBlendFunc().这个函数以一个ccBlendFunc类型的变量为參数.这个ccBlendFunc是个结构体.这个结构体中有两个变量:src 和 dest. 举个样例: 代码: ccBlendFunc  spriteBlend; spriteBlend.src = GL_ONE; spriteBlend.dst = GL_ZERO; p

ClippingNode的使用

概述 ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示. ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中. ClippingNode 原理: ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术.如何理解ClippingNode的遮罩?看下图的例子吧. 所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底

Cocos2d-x3.1中ClippingNode的使用实例

1.ClippingNode说明 ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术,如何理解ClippingNode的遮罩?看下图的例子吧. 所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底板上 的东西又不会妨碍Layer上的东西,即模板在底板之外的空间对于Layer来说是透明的.假如有个精灵在模板之外的底板上运动,我们 是看不到它的.除非它进入模板的区域,我们才能看到它. 2.ClippingNode源码 #i

(17)ClippingNode的使用

概述 ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示. ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中. ClippingNode 原理: ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术.如何理解ClippingNode的遮罩?看下图的例子吧. 所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底

ClippingNode实现新手引导高亮裁切

ClippingNode的使用 概述 ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示. ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中. ClippingNode 原理: ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术.如何理解ClippingNode的遮罩?看下图的例子吧. 所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则

cocos2dx[3.2](19)——裁剪节点ClippingNode

[唠叨] 学习cocos2dx 3.2确实比较吃力,因为网上关于最新版的v3.2的资料十分稀少,或者是讲解的确实不是很详细.大部分人都是根据官方文档照样画瓢,而对于有些比较抽象的概念及函数都是照着官方文档来讲解的.这样的结果,导致有些东西令我确实非常费解. 没有办法,只好自己来总结cocos2dx3.2,然后将个人的学习感悟分享给大家. PS:当然有些大牛写的文章还是很不错的. 有时候我们需要显示一张图片的部分区域,比如文字遮罩.图片遮罩... 本节要讲的ClippingNode的功能效果大致就

【Cocos2dx 3.3 Lua】剪裁结点ClippingNode

参考资料: http://shahdza.blog.51cto.com/2410787/1561937 http://blog.csdn.net/jackystudio/article/details/17160973 [ClippingNode] 1.原理 ClippingNode(裁剪节点)可以用来对节点进行裁剪.ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中. 主要是根据一个模板(Stencil)切割图片的节点,生成任何形状的节点显示.

ClippingNode做游戏的新手指导

auto stencil=Sprite::create("arrow.png"); stencil->setPosition(btn_right->getPosition()); btn_right = Button::create("arrow.png"); 游戏开发中,很多游戏都会出现新手指导,让玩家熟悉游戏的操作流程. 那做为苦逼的我们,如何实现新手指导?(虽然很苦逼,有时却很快乐-) (1)背景置灰.图标高亮 (2)屏蔽其他图标的点击事件 1.

Atitit 游戏的原理与概论attilax总结

1. 游戏历史2 1.1.1. 盘点PC游戏史上最重要的50款游戏2 1.1.2. 回味人类文明进程 五款经典的历史游戏2 2. 游戏类型(主要分为6类:动作.冒险.模拟.角色扮演.休闲和其他)2 3. <游戏设计的100个原理>((美)迪斯潘...)2 4. <游戏>((美)加维...)[3 5. 游戏开发工程师修炼之道3 6. 基础概念 (导演,场景,层,以及精灵,调度器scheduler)3 7. 人机交互(事件分发机制 Event Dispatcher4 8. 主要功能(流