Cocos2d-x教程(11)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)
2014-09-22 17:05
1326 查看
源码下载地址:http://download.csdn.net/detail/u012945598/6702495
在我们第一次使用一款软件的时候,都会有一个新手引导的画面,画面上一般会有一个小手指指着一个地方,告诉你应该点这个区域,而这个区域是亮的,其它的部分是暗的;又或者是如下图所示的一种情况:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/2736cd36c667cd5f702cd2d7da453722)
注:素材均源自网络,若涉及版权问题~你丫去死吧! 请联系我!
看看这张图片,虽然它是个应用不是个游戏,但是效果类似,有一个黑色的透明度不是很高的东西遮住了下面,而在黑色层的上面又多了几个引导,此篇文章中笔者就带领大家来做这样一个效果。
这个效果十分简单,Cocos2d-x引擎已经为我们提供了现成的接口——CCLayerColor,我们可以利用这个类去创建一个带颜色的层。
新建一个项目,笔者命名为maskDemo,由于笔者不喜欢使用HelloWorld所以新建一个C++ File 命名maskScene,.h文件中代码如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/9b156441e63de43937673311333dd41f)
.m文件中代码如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/3b5fd51325b97fdcb5fd09e2368b86dd)
这时遮罩层已经添加到了屏幕上,我们看一下效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/af80a028bfb5c96865189766aa0e2b79)
如果单是要制作引导界面,我们就可以继续在这个蒙版上面继续添加图片或按钮等相关控件了,不过单是有一个黑色的蒙版可能效果还不够炫,那么我们可以在这个蒙版上面添加一些动作,比如我们之前介绍过的淡入淡出,还有色调变化,下面我们来加上这两个效果让我们的开场更炫一些。继续在.cpp文件的init函数中加入代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/87377e01ee754747355e421c06eef6cc)
此处是颜色渐变效果,看一下效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/4b26d4b7c26c705d281bdc62277dfb77)
这个方法是比较简单的,大家自己尝试一下吧。在下一篇文章中我们将讲述更加专业的新手引导界面制作方法,设置局部区域高亮的效果。
在我们第一次使用一款软件的时候,都会有一个新手引导的画面,画面上一般会有一个小手指指着一个地方,告诉你应该点这个区域,而这个区域是亮的,其它的部分是暗的;又或者是如下图所示的一种情况:
注:素材均源自网络,若涉及版权问题~你丫去死吧! 请联系我!
看看这张图片,虽然它是个应用不是个游戏,但是效果类似,有一个黑色的透明度不是很高的东西遮住了下面,而在黑色层的上面又多了几个引导,此篇文章中笔者就带领大家来做这样一个效果。
这个效果十分简单,Cocos2d-x引擎已经为我们提供了现成的接口——CCLayerColor,我们可以利用这个类去创建一个带颜色的层。
新建一个项目,笔者命名为maskDemo,由于笔者不喜欢使用HelloWorld所以新建一个C++ File 命名maskScene,.h文件中代码如下:
.m文件中代码如下:
这时遮罩层已经添加到了屏幕上,我们看一下效果图:
如果单是要制作引导界面,我们就可以继续在这个蒙版上面继续添加图片或按钮等相关控件了,不过单是有一个黑色的蒙版可能效果还不够炫,那么我们可以在这个蒙版上面添加一些动作,比如我们之前介绍过的淡入淡出,还有色调变化,下面我们来加上这两个效果让我们的开场更炫一些。继续在.cpp文件的init函数中加入代码:
此处是颜色渐变效果,看一下效果图:
这个方法是比较简单的,大家自己尝试一下吧。在下一篇文章中我们将讲述更加专业的新手引导界面制作方法,设置局部区域高亮的效果。
相关文章推荐
- Cocos2d-x教程(11)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上) (转)
- Cocos2d-x教程(11)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)
- Cocos2d-x教程第(11)讲-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)
- Cocos2d-x教程(12)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(中) (转)
- Cocos2d-x教程(12)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(中)
- Cocos2d-x教程(12)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(中)
- cocos2d-x利用ClipingNode做游戏遮罩制作新手引导
- 【iOS-Cocos2d游戏开发之二十】精灵的基础知识点总汇(位图操作/贴图更换/重排z轴等)以及利用CCSprite与CCLayerColor制作简单遮盖层!
- 【iOS-Cocos2d游戏开发之二十】精灵的基础知识点总汇(位图操作/贴图更换/重排z轴等)以及利用CCSprite与CCLayerColor制作简单遮盖层!
- cocos2d-x 3.X 制作新手引导的按下事件
- [置顶] Cocos2d-x使用Cocos Studio制作界面并应用---之游戏开发《赵云要格斗》(11)
- 使用Cocos2d-JS制作游戏新手引导(三)源码篇
- 使用cocos2d-js制作游戏新手引导(二)
- 使用Cocos2d-JS制作游戏新手引导(二)
- 使用cocos2d-x制作游戏新手引导技术难点
- Cocos2d-js制作游戏新手引导(二)
- 使用Cocos2d-JS制作游戏新手引导(一)
- 使用cocos2d-js制作游戏新手引导(一)
- 使用cocos2d-js制作游戏新手引导-源码篇(三)
- GRUB引导界面背景图片制作完整教程