裁剪效果的实现(ClippingNode)

(1)首先要创建模板的精灵:

创建模板是用来遮掩或者显示当前模板的范围的。

Sprite* spritemb = Sprite::create("messageBoard.png");

(2)然后使用刚才创建的模板精灵来创建模板,并将spritemb使用addChild()添加到模板中:

Node* stencil = Node::create();
stencil->addChild(spritemb);

(3)创建ClippingNode,同时使用模板:

ClippingNode* cn = ClippingNode::create(stencil);

(4)为ClippingNode设置一些属性

//设置使用模板来隐藏或者显示指定区域
cn->setInverted(false);

//设置Alpha阀值
cn->setAlphaThreshold(0.05f);

//设置位置、锚点
cn->setAnchorPoint(Vec2(0, 0));
cn->setPosition(Vec2(0, 0));

(5)为ClippingNode添加底板(底板是需要被遮掩的精灵)

cn->addChild(batch);

(6)讲ClippingNode添加到场景

this->addChild(cn);
时间: 2024-10-28 14:56:15

裁剪效果的实现(ClippingNode)的相关文章

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CSS 部分 左侧的裁剪操作区域可以分为三层. 最底层的图片半透明效果:中间层的图片只显示制定区域,其他部分隐藏:最上层为拖拽控制层.最低层和中间层使用同一张图片,利用CSS属性clip控制中间层只显示一部分. 三个层都使用 absolute 绝对定位.下面是 HTML 和 CSS 代码. 1 <div i

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

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

节点裁剪 ClippingNode

有时候我们需要一张圆形的图片,可是美术提供的是一个矩形的资源图片,怎么办?让美术再做一张圆形的?即使这样能暂时解决问题,无疑增加了开销,何况有时候你可能需要显示一张图片里的不同部分,不可能每种情况都让美术都做一次修改吧,这时候 cocos2d-x 里提供的节点裁剪技术就派上用场了. 节点裁剪 原理 cocos2d-x 提供 CCClippingNode 类的可以用来对节点进行裁剪,可以根据一个模板切割节点图片,生成任何形状(取决于模板)的节点显示. CCClippingNode 是 CCNode

cocos2dx 3.2 裁剪节点 ClippingNode

效果1: 效果2: 代码: // //[1].背景图片 Sprite* bg = Sprite::create("HelloWorld.png"); bg->setPosition(visibleSize / 2); this->addChild(bg, -1); //[2].创建主题文字 : gameTitle Sprite* gameTitle = Sprite::create("game_title.png"); //获取尺寸大小 Size cli

cocos2dx 实现跑马灯效果和文字效果

目标:实现下面2种文字效果 1. 2. 方法:   利用ClippingNode实现上图所示效果. 1效果:给ClippingNode添加裁剪裁剪内容,即红色文字,然后设置裁剪模板.然后让模板来回移动即可实现如图效果.直接贴代码: Label* txt = Label::create("this is a clippingNode Test...this is a clippingNode Test...","Arial",30); txt->setColor

Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1)

Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1) 本文转载至深入理解Cocos2d-x 3.x:一步一步通过ClippingNode实现一个功能完善的跑马灯公告(1) 这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码,了解其实现原理. 首先,先介绍一下ClippingNode,ClippingNode也叫裁剪节点,能将一些内容通过使用模板裁剪出来显示在界面上,可以实现一些

使用ClippingNode对精灵进行遮罩处理

在制作一个消除游戏时,有这样一个情况:方块从顶部往下面掉落,在进入布局前,是不能显示的,不然影响视觉体验.那么,既然此方块已经被加入到渲染树了,那么怎么能让其在一部分中不显示,而在另一部分中显示呢? 这就要用到遮罩处理了.在cocos2d-x中,提供了一个裁剪节点ClippingNode,可以实现一个裁剪效果,那么被裁剪掉的部分,就是等于被遮罩了.可能其效果更多,我未深刻研究,只是拿它用来处理上面的问题.官方对此类的介绍在: http://www.cocos2d-x.org/docs/manua

【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告(1)

这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码,了解其实现原理. 首先,先介绍一下ClippingNode,ClippingNode也叫裁剪节点,能将一些内容通过使用模板裁剪出来显示在界面上,可以实现一些很炫酷的效果.来看看今天要实现的效果 1.ClippingNode类分析 先来看看ClippingNode的声明文件 看看其中的public方法 class CC_DLL ClippingNode : publ

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu