ClippingNode实现新手引导高亮裁切
ClippingNode的使用
概述
ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。
ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。
ClippingNode 原理:
ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。如何理解ClippingNode的遮罩?看下图的例子吧。
所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底板上的东西又不会妨碍Layer上的东西,即模板在底板之外的空间对于Layer来说是透明的。
ClippingNode 常用方法
create
可以使用
static ClippingNode* create();
方法创建一个ClippingNode对象。如下:auto clipper = ClippingNode::create();
也可以使用
static ClippingNode* create(Node *stencil);
方法创建;在创建的时候指定裁剪模板auto stencil = Sprite::create("CloseNormal.png");//模板节点
clipper = ClippingNode::create(stencil);setStencil 可以使用
void setStencil(Node *stencil);
方法设置“裁剪模板”节点。 如下:clipper->setStencil(stencil);//设置裁剪模板
setInverted
可以使用
void setInverted(bool inverted);
方法,设置是显示被裁剪的部分,还是显示裁剪。true 显示剩余部分。false显示被剪掉部分。 如下:clipper->setInverted(true);//设置底板可见,显示剩余部分
setAlphaThreshold
可以使用
void setAlphaThreshold(GLfloat alphaThreshold);
,设置alpha阈值, 只有模板(stencil)的alpha像素大于alpha阈值(alphaThreshold)时内容才会被绘制。 alpha阈值(threshold)范围应是0到1之间的浮点数。 alpha阈值(threshold)默认为1。 如下:clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
ClippingNode示例
auto bg = LayerColor::create(Color4B(255, 255, 255,255));
this->addChild(bg, -1);//1
auto stencil = Sprite::create("CloseNormal.png");
stencil->setScale(2);//2
auto clipper = ClippingNode::create();
clipper->setStencil(stencil);//设置裁剪模板 //3
clipper->setInverted(true);//设置底板可见
clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
this->addChild(clipper);//4
auto content = Sprite::create("HelloWorld.png");//被裁剪的内容
clipper->addChild(content);//5
clipper->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
- 添加了一个白色的LayerColor作为背景层。
- 创建一个精灵,作为裁剪模板,并放大2倍
- 创建ClippingNode节点,并设置裁剪模板
- 设置裁剪显示,Alpha阈值,并将裁剪节点加到层中
- 设置被裁剪的内容
运行效果如图:
将 clipper->setInverted(true);
改为 clipper->setInverted(false);
运行效果如图:
- 资源图片
http://www.2cto.com/kf/201207/144656.html
战争迷雾效果:
http://bbs.9ria.com/thread-157487-1-1.html
http://www.benmutou.com/archives/455
ClippingNode实现新手引导高亮裁切的更多相关文章
- cocos2dx混合模式应用———制作新手引导高亮区域 (2.2.0)
cocos2dx混合模式应用———制作新手引导高亮区域 转自:http://www.cnblogs.com/mrblue/p/3455775.html 首先,效果预览一下 高亮区域的图片: 示例代码: ...
- cocos2dx混合模式应用———制作新手引导高亮区域
先看下效果 制造这个椭圆高亮区域所使用原图是 附上代码 bool HelloWorld::init() { ////////////////////////////// // 1. super ini ...
- [Quick-x]制作新手引导高亮区域方法之二:裁剪模式
demo下载:https://github.com/chenquanjun/Quick-x-HighlightArea 2.裁剪模式 (1)创建裁剪对象 , , ) --非高亮区域颜色 local b ...
- [Quick-x]制作新手引导高亮区域方法之一:混合模式
demo下载:https://github.com/chenquanjun/Quick-x-HighlightArea 1.混合模式 (1)首先创建一个全屏的CCRenderTexture实例 这里使 ...
- cocos2dx 3.0 用ClippingNode做游戏的新手引导
转自:http://blog.csdn.net/star530/article/details/20851263 本篇介绍的是用ClippingNode 做游戏的新手引导,额,或者说是做新手引导的一种 ...
- Unity3D新手引导开发手记
最近开始接手新手引导的开发,记录下这块相关的心得 首先客户端是Unity,在接手前,前面的同学已经初步完成了新手引导框架的搭建,这套框架比较简单,有优点也有缺点,稍后一一点评 我们的新手引导是由一个个 ...
- NGUI 新手引导
现在我们的游戏已到了开发后期,这个时候需要做新手引导这一块(恶心的新手引导,真想说游戏行业究竟哪个2B最先想出来要引导的???代码搞的到处都是,改了一次又改!) 吐槽过后进入正题:主要还是UI相关的操 ...
- cocos2d-x之蒙板,局部高亮可点,CCRenderTexture
转自:http://www.2cto.com/kf/201207/144656.html 蒙板,局部高亮可点的用处大多是在新手引导的时候,引导玩家一步一步的走游戏的操作流程. 之前写了一个cocos2 ...
- Cocos2d-x教程第(11)讲-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)
欢迎转载,转载时请注明原文出处:http://blog.csdn.net/u012945598/article/details/17280019 源码下载地址:http://download.csdn ...
随机推荐
- C# 常用数据库连接字符串【转】
一:C# 连接SQL数据库 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myP ...
- CentOs5.8下安装Oracle12C
12C安装向导: http://docs.oracle.com/database/121/LTDQI/toc.htm 12C下载地址: http://www.oracle.com/technetwor ...
- 示例Oracle 10.2.0.1.0升级到10.2.0.4.0一例
1.查看当前系统版本 [oracle@std Disk1]$ sqlplus '/as sysdba' SQL*Plus: Release - Production on Thu Jan :: Cop ...
- python 语料处理(从文件夹中读取文件夹中文件,分词,去停用词,去单个字)
# -*- coding:utf8 -*- import os import jieba def splitSentence(inputFile): fin = open(inputFile, 'r' ...
- Java数据库连接池
转载过来的,最近在做一个小网站,准备使用这种方法. Java jdbc数据库连接池总结! 1. 引言 近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及, ...
- sax解析原理与案例
package itcast.sax; import java.io.IOException; import javax.xml.parsers.ParserConfigurationExceptio ...
- iostat监控磁盘io
1.安装#yum install sysstat 2.启动#/etc/init.d/sysstat start 3.自启动#checkfig sysstat 4.基本使用#iostat -k 2每两秒 ...
- Elasticsearch学习笔记(一)
批量建索引: curl -s -XPOST 'localhost:9200/_bulk' --data-binary @documents.json 查看索引mappingmyindex/_mappi ...
- Celery,Tornado,Supervisor构建和谐的分布式系统
Celery 分布式的任务队列 与rabbitmq消息队列的区别与联系: rabbitmq 调度的是消息,而Celery调度的是任务. Celery调度任务时,需要传递参数信息,传输载体可以选择rab ...
- IIS不能对网站添加默认文档(由于权限不足而无法写入配置文件)
IIS7以上版本配置网站时需要手动配置网站目录的文件夹权限 增加"IIS_IUSER"用户的修改权限 但增加后仍然提示“ 由于权限不足无法写入配置文件” 通常是Web.config ...