Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘

        欢迎加入Cocos2d-x 交流群:193411763

        转载时请注明原文出处 http://blog.csdn.net/u012945598


        源码请到 http://download.csdn.net/download/u012945598/6637329 下载


   

        Cocos2d-x 3.x版本需修改文件中部分内容,请参考:http://blog.csdn.net/u012945598/article/details/38340845

        玩过捕鱼达人的朋友都知道捕鱼达人记录金币的是一个类似于老虎机表盘的东西,当你打中鱼获得了金币后金币数量会滚动,我们今天将要使用OpenGL提供的遮罩效果来实现一个简单的表盘滚动功能。

        首先新建一个项目,笔者命名为Test,将HelloWorld中的背景替换为下图:

    Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘_第1张图片

        可以看到,实际上表盘只是一张图片,而上面所滚动的数字我们需要用十个CCLabel来实现。新建一个类命名为ScrollLabel,

.h文件中代码如下:

Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘_第2张图片

正常情况下,我们仅在draw函数中设置绘图效果,但此处为了能成功遮挡所有子节点的无效绘图,所以使用visit函数设置遮罩效果。visit方法是递归调用的,并且visit方法通过调用draw来实现绘图。再来看一下.cpp文件中的代码:

Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘_第3张图片

图中调用setNumber函数时,输入参数为4,则项目运行后,数字会从9滚动到4的位置。

在HelloWorld中引入ScrollLabel的头文件,创建ScrollLabel类的对象,并在init()方法中加入下列代码:


此时我们还没有实现visit函数,让我们来看一下运行效果Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘_第4张图片

我们看到了0-9十个数字都显示在了屏幕上,现在我们利用遮罩层,只让表盘的框格部分显示到屏幕上,重载visit函数,代码如下:

Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘_第5张图片

完成上述操作后运行项目,效果图如下:

Cocos2d-x教程(8)-遮罩层实现捕鱼达人滚动数字表盘_第6张图片

这就是遮罩层的应用。

你可能感兴趣的:(Cocos2d-x教程,Cocos2d-x,基础教程)