Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1)
2015-06-08 10:36
513 查看
Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1)
本文转载至深入理解Cocos2d-x 3.x:一步一步通过ClippingNode实现一个功能完善的跑马灯公告(1)
这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码,了解其实现原理。首先,先介绍一下ClippingNode,ClippingNode也叫裁剪节点,能将一些内容通过使用模板裁剪出来显示在界面上,可以实现一些很炫酷的效果。来看看今天要实现的效果
1、ClippingNode类分析
先来看看ClippingNode的声明文件 看看其中的public方法
接下来的getStencil和setStencil分别是获取和设置一个遮罩模板,裁剪物体方法就是通过这个遮罩模板的,遮罩模板只要是基于Node的对象都可以(非常重要)。
接下来的hasContent返回其是否有需要绘制的内容,如果没有绘制的内容则返回false,有则返回true。
getAlphaThreshold
和setAlphaThreshold分别是获取和设置一个像素的透明度值,取值范围从0-1,其中0表示都不绘制,1表示都绘制。0.5表示透明度在
0.5以上的都绘制,这个函数涉及到opengl的Alpha测试的相关概念,Alpha测试的作用通过一句话解释就是:所有像素的透明度值低于某个阀值
的统统抛弃,不绘制到屏幕上。
最后的isInverted和setInverted分别表示绘制的内容是模板内的还是模板外的,其效果如下:
2、简易跑马灯实现
上节简单介绍了一下ClippingNode的函数,这节就通过实现一个简易的跑马灯功能来直观的了解。首先介绍一下制作跑马灯的思路。
首先我们需要将跑马灯中的一部分超出的字裁剪掉,不让他显示在界面上。这就需要用到ClippingNode,现在先来做第一步。实现的代码如下:
现在我们就设计一个Action将跑马灯动起来,跑马灯一般需要先将文字左移,移动到文字看不见的时候再将文字移除或者隐藏,代码如下(为了简便,就直接设置隐藏了):
3、封装
现在我们从便捷性的角度考虑如何将跑马灯功能封装成一个函数供其他类调用。首先提取出函数的参数,分别是:显示区域,跑马灯文字,字体字号,跑马灯位置,跑马灯的父节点。下面是初步封装好的一套跑马灯函数的声明:
首先,我们简单的构建一下一个跑马灯类,如下
4、完善
看
上去,此前的步骤我们已经完成了一个跑马灯的功能,实际上这个类距离真正能使用还差那么一点点,因为传入跑马灯的消息的传入时机是不确定的,可能这一条消
息还没有播放完成下一条就要开始播放了。这样就需要实现一个播放等待队列,将需要播放的消息加入播放队列,然后跑马灯自动判断是否需要显示。下面是改进后
的类声明文件以及实现文件。
.h:
相关文章推荐
- Win10+VS2013+Cocos2d-x3.6+Eclipse项目打包发布详解
- Win10+vs2013+cocos2dx3.6环境变量的配置
- cocos-js项目结构
- Cocos2d-x 3.x:如何进行合理的内存分配(使用AutoreleasePool 来合理的管理内存)
- Cocos2d-x 3.2 智能指针
- Cocos2d-x 3.2:UI树
- Cocos2d-x的学习之旅(四)坐标系
- cocos2D-x 3.5 引擎解析之--节点(Node)
- cocos2d-x 贝塞尔曲线的简单运用(CCBezierTo,CCBezierBy)
- 解决cocos2d-x-3.1.1新androidproject
- cocos2d-x-3.6 引擎基础概念
- cocos2d-x改底层之动态改变UIListView中的某项在链表中的位置
- cocos2d-x改底层之获取UIListView的实际内容大小
- cocos2d触摸事件处理机制(2.x和3.x变化)
- cocos2dx-js 集成google play service和admob--------错误处理
- Cocos2d-x坐标系介绍
- cocos2dx 3.2 + vs2012 + win7 工具栏<本地Windows调试器>不见了
- Cocos2d-x 输出中文和版权符号的方法
- Cocos 随写
- 【我所理解的Cocos2d-x】第六章 精灵Sprite 读书笔记