cocos2dx基础篇(30)——颜色布景层CCLayerColor

【唠叨】

在游戏开发的过程中,突然想更改一下CCLayer图层的背景颜色,可是却怎么也找不到设置背景色的属性。于是搜索了一番,发现原来还有一个颜色布景层CCLayerColor。

本节将介绍一下:颜色布景层CCLayerColor,以及它的一个子类渐变色布景层CCLayerGradient。

【扩展阅读】

颜色混合模式:http://shahdza.blog.51cto.com/2410787/1547633



【CCLayerColor】

颜色布景层CCLayerColor有两个父类:CCLayerRGBACCBlendProtocol。相信有前面知识的积累,学到这也知道这两个类大致是干嘛的了。一个是颜色类,另一个是颜色混合协议。

所以CCLayerColor主要是在CCLayer类的基础上,扩展了三个属性:

(1)修改图层背景颜色,RGB颜色。

(2)修改图层透明度。

(3)颜色混合模式。

此外,CCLayerColor也继承于CCNode类。所以也可以进行放缩、旋转、执行动作等操作。

 值得注意的是:CCLayerColor也是CCLayer类,所以它也忽略锚点设置锚点始终为(0,0)

1、创建方式

CCLayerColor总共有三种创建方式,若不规定背景颜色、透明度,及尺寸大小,那么默认创建的与CCLayer效果类似。即:无背景色、不透明、尺寸大小为窗口大小。

三种创建方式如下:

//
	static CCLayerColor* create();
	static CCLayerColor* create(const ccColor4B& color, float width, float height);
	static CCLayerColor* create(const ccColor4B& color);
//

2、属性设置

修改图层尺寸大小,设置背景颜色、透明度,设置混合模式。

//
	//更改图层尺寸大小
	void changeWidth(float w);
	void changeHeight(float h);
	void changeWidthAndHeight(float w ,float h);

	//设置背景颜色、透明度
	virtual void setColor(const ccColor3B &color);
	virtual void setOpacity(GLubyte opacity);

	//设置混合模式
	void setBlendFunc(ccBlendFunc);
	ccBlendFunc getBlendFunc();
//

3、使用方法举例

在CCLayer图层上,添加一个背景图片。然后再添加一个红色的颜色布景层CCLayerColor。

//
//获取屏幕尺寸
	CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();

//添加一个背景图片,作为参照
	CCSprite* bg = CCSprite::create("HelloWorld.png");
	bg->setPosition(mysize/2);
	this->addChild(bg);

//添加一个CCLayerColor
	//红色,透明度100。其中255为不透明
	ccColor4B color4B = ccc4(255, 0, 0, 100);
	CCLayerColor* layerColor = CCLayerColor::create(color4B, 300, 300);
	layerColor->setPosition(mysize/2 - ccp(150,150) );
	this->addChild(layerColor);

//设置颜色混合方式
	ccBlendFunc cbl = { GL_SRC_ALPHA, GL_ONE };
	layerColor->setBlendFunc(cbl);
//

4、运行结果

(1)颜色ccc4(255, 0, 0, 255);不设置混合模式。

(2)颜色ccc4(255, 0, 0, 100);不设置混合模式。

(3)颜色ccc4(255, 0, 0, 255);设置混合模式{ GL_SRC_ALPHA, GL_ONE }。

(4)颜色ccc4(255, 0, 0, 100);设置混合模式{ GL_SRC_ALPHA, GL_ONE }。

    

    



【CCLayerGradient】

渐变色布景层CCLayerGradient继承于颜色布景层CCLayerColor,除了父类的三个扩展方法外,渐变色布景层还可以设置颜色渐变效果。

扩展的属性主要以下三个:

(1)起始和结束颜色。

(2)起始和结束透明度。

(3)渐变方向。

 值得注意的是:CCLayerGradient也会忽略锚点设置锚点始终为(0,0)

1、创建方式

CCLayerGradient总共有三种创建方式,若不规定起始颜色、结束颜色、及渐变方向,那么默认创建的与CCLayer效果类似。即:起始/结束颜色均无颜色(黑色)、不透明、渐变方向从上到下。

注意:创建的图层大小为窗口大小,若要修改尺寸大小,可以通过父类的方法来设置。

三种创建方式如下:

//
	//与CCLayer效果类似
	static CCLayerGradient* create();

	//颜色在start和end之间渐变。默认渐变方向:从上到下
	static CCLayerGradient* create(const ccColor4B& start, const ccColor4B& end);

	//颜色在start和end之间渐变。渐变方向为向量v
	static CCLayerGradient* create(const ccColor4B& start, const ccColor4B& end, const CCPoint& v);
//

2、属性设置

起始/结束颜色、起始/结束透明度、渐变方向、压缩色差。

//
	CC_PROPERTY_PASS_BY_REF(ccColor3B, m_startColor, StartColor) //set/get起始颜色
	CC_PROPERTY_PASS_BY_REF(ccColor3B, m_endColor, EndColor)     //set/get结束颜色
	CC_PROPERTY(GLubyte, m_cStartOpacity, StartOpacity)          //set/get起始透明度
	CC_PROPERTY(GLubyte, m_cEndOpacity, EndOpacity)              //set/get结束透明度
	CC_PROPERTY_PASS_BY_REF(CCPoint, m_AlongVector, Vector)      //set/get渐变方向

	//是否在 规范/非规范 的载体上压缩插值,以便显示所有颜色的梯度
	//默认为true
	virtual void setCompressedInterpolation(bool bCompressedInterpolation);
	virtual bool isCompressedInterpolation();
//

3、使用方法举例

在CCLayer图层上,添加一个背景图片。然后再添加一个渐变色布景层CCLayerGradient。

//
//获取屏幕尺寸
	CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();

//添加一个背景图片,作为参照
	CCSprite* bg = CCSprite::create("HelloWorld.png");
	bg->setPosition(mysize/2);
	this->addChild(bg);

//添加一个CCLayerGradient
	ccColor4B c1 = ccc4(255, 0, 0, 255); //红色,不透明
	ccColor4B c2 = ccc4(0, 255, 0, 100); //绿色,半透明
	CCLayerGradient* layerGradient = CCLayerGradient::create(c1,c2);
	this->addChild(layerGradient,1,1);

//设置渐变方向
	layerGradient->setVector( ccp(0, -1) );

//是否压缩色差
	layerGradient->setCompressedInterpolation(true);
//

4、运行结果

(1)渐变方向ccp(1,0)  ;压缩色差。

(2)渐变方向ccp(1,0)  ;不压缩色差。

(3)渐变方向ccp(0,-1) ;压缩色差。

(4)渐变方向ccp(0,-1) ;不压缩色差。

(5)渐变方向ccp(-1,-1);压缩色差。

(6)渐变方向ccp(-1,-1);不压缩色差。

这几幅图的区别在哪呀?大家来找找茬吧。

    

    

    

时间: 2024-10-17 06:15:25

cocos2dx基础篇(30)——颜色布景层CCLayerColor的相关文章

cocos2dx基础篇(7)——菜单按钮CCMenu、CCMenuItem

[本节内容] 菜单按钮在游戏中是经常被用到的,比如主菜单界面的菜单选项,暂停游戏时的菜单选项等等.cocos2dx引擎同样为我们提供了CCMenu菜单的功能,并包含了一些简单的菜单项CCMenuItem.且菜单项附带触碰按钮时,自动放大的效果. 温馨提示:本节内容比较多,需要大家慢慢分析,不要急于求成. 本节组织结构如下: 一.介绍CCMenu. 二.介绍CCMenuItem,及其具体的六个子类. 三.代码实战. [一.菜单CCMenu] 菜单CCMenu是专门用来承载菜单按钮的CCLayer图

cocos2dx基础篇(13)——按钮控件CCControlButton

[引言] 按钮类CCControlButton继承于控件类CCControl. 控件类CCControl主要向子类提供了一系列的控件触发事件.当子控件触发相关的事件后,就会执行相关的控件事件回调函数.这与之前讲的CCMenu中的菜单按钮回调是类似的. 控件类CCControl主要有三个子类: (1)开关控件CCControlSwitch (2)滑块控件CCControlSlider (3)按钮控件CCControlButton 本节讲的是其子类其中之一:按钮类CCControlButton. [

cocos2dx基础篇(12)——点九图CCScale9Sprite

[引言] 本来是想学学控件类CCControl的另一个子类按钮控件CCControlButton的.但是发现里面有一个参数牵扯到CCScale9Sprite这个类.看到CCScale9Sprite,很容易联想到精灵类CCSprite.两者又有什么区别呢?因此我就去网上收了一些有关CCScale9Sprite的资料来学习. [参考文献] [1] http://blog.csdn.net/nynyvkhhiiii/article/details/12782249 [2] http://www.cnb

cocos2dx基础篇(8)——定时器更新schedule、update

[本节内容] 定时器在大部分游戏中是不可或缺的,即每隔一段时间,就要执行相应的刷新体函数,以更新游戏的画面.时间.进度.敌人的指令等等. cocos2dx为我们提供了定时器schedule相关的操作.其操作函数的定义在CCNode中,所以基本上大多数的引擎类都可以设置定时器,如CCLayer.CCSprite.CCMenu等. 定时器更新的方式分为三类: (1)默认定时器:scheduleUpdate(); (2)自定义定时器:schedule(); (3)一次性定时器:scheduleOnce

cocos2dx基础篇(4)——浅析cocos2dx引擎目录

通过前面几节的学习,相信大家都已经配置好了VS+cocos2dx2.2.3的环境,并且成功运行了官方的案例HelloWorld. 一.窥探文件目录 要想学好cocos2dx,首先就需要对引擎目录下的各个文件有所了解.接下来,就让我们先来分析一下cocos2dx2.2.3引擎的文件目录吧. 从目录中我们主要了解一下一下几个文件: cocos2dx:cocos2d-x引擎的核心部分,存放了引擎的大部分源文件. CocosDenshion:声音模块相关源文件. Debug.win32:在Windows

cocos2dx基础篇(5)——浅析几个常见类

目录 入口类main.cpp 主要控制类AppDelegate.cpp 节点类CCNode 导演类CCDirector 场景类CCScene 层次类CCLayer 精灵类CCSprite 大小类CCSize 坐标CCPoint 矩形类CCRect 数组类CCArray 入口类main.cpp 这是应用程序的入口类,用于创建cocos2dx的AppDelegate实例.窗口大小.以及运行程序. 主要代码如下:     // create the application instance     A

cocos2dx基础篇(10)——开关按钮CCControlSwitch

[本节内容] 开关类CCControlSwitch继承于控件类CCControl. 控件类CCControl主要向子类提供了一系列的控件触发事件.当子控件触发相关的事件后,就会执行相关的控件事件回调函数.这与之前讲的CCMenu中的菜单按钮回调是类似的. 控件类CCControl主要有三个子类: (1)开关控件CCControlSwitch (2)滑块控件CCControlSlider (3)按钮控件CCControlButton 本节讲的是其子类其中之一:开关类CCControlSwitch.

cocos2dx基础篇(14)——文本框之一CCTextFieldTTF

[引言] 前面我们讲了精灵贴图.标签.菜单.按钮.感觉似乎少了点什么?UI控件里是不是应该还有一个很重要的控件--文本框.在手机网游中,启动游戏,过了开场动画后,基本上显示的第一个界面应该就是游戏的登录界面了吧.输入用户名.密码什么的,这些都是需要借助文本框来实现输入的.点击文本,弹出虚拟键盘,输入账号密码,点击登录. cocos2dx引擎为我们提供了两类文本框的控件: (1)CCTextFieldTTF(基于CCLabelTTF) (2)CCEditBox(基于CCControlButton)

【转载】cocos2dx基础篇(16)——滚动视图CCScrollView

[唠叨] 本节要讲讲滚动视图CCScrollView,相信玩过手游的同学们应该对它不会陌生吧. 例如:愤怒的小鸟的游戏场景里大大的地图,手机的屏幕肯定无法完全显示的,所以需要通过触摸滚动才能显示大地图的其他区域:排行榜中上下滑动来查看其他玩家的排名:以及手机上主界面左右滑动来切换界面等等. 如下图为屏幕滚动,切换手机的界面. [致谢] http://blog.csdn.net/paea_gulang/article/details/10283601 [Demo下载] https://github