Cocos 颜色混合BlendFunc

1、概念

    “混合”是指两种颜色的叠加方式。在新图片将要渲染画到屏幕上的时候,将用在新图片中的红、绿、蓝和透明度信息,与屏幕上已经存在的图片颜色信息相融合。

    说的具体一点,就是把某一像素位置上原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果。

    新图片颜色被称作“源颜色”,而屏幕上已存在的图片颜色则被称作“目标颜色”

    OpenGL会把源颜色和目标颜色各自取出,并乘以一个系数(源颜色乘以的系数称为“源因子”,目标颜色乘以的系数称为“目标因子”),然后相加,这样就得到了新的颜色。

2、计算公式

    假设:颜色信息的四个分量(红,绿,蓝,透明度)

        (1)“源颜色”  :(Rs, Gs, Bs, As)

        (2)“目标颜色”:(Rd, Gd, Bd, Ad)

        (3)“源因子”  :(Sr, Sg, Sb, Sa)

        (4)“目标因子”:(Dr, Dg, Db, Da)

    那么混合产生的新颜色可以表示为:

        (Rs*Sr + Rd*Dr , Gs*Sg + Gd*Dg , Bs*Sb + Bd*Db , As*Sa + Ad*Da)

    如果颜色的某一分量超过了1.0,则它会被自动截取为1.0,不需要考虑越界的问题。 

3、混合因子

混合方式解释因子值
GL_ZERO全部不用(0 , 0 , 0 , 0)
GL_ONE全部使用(1 , 1 , 1 , 1)
GL_SRC_COLOR使用源颜色(Rs , Gs , Bs , As)
GL_DST_COLOR使用目标颜色(Rd , Gd , Bd , Ad)
GL_ONE_MINUS_SRC_COLOR减去源颜色(1-Rs , 1-Gs , 1-Bs , 1-As)
GL_ONE_MINUS_DST_COLOR减去目标颜色(1-Rd , 1-Gd , 1-Bd , 1-Ad)
GL_SRC_ALPHA使用源颜色的透明度(As , As , As , As)
GL_DST_ALPHA使用目标颜色的透明度(Ad , Ad , Ad , Ad)
GL_ONE_MINUS_SRC_ALPHA减去源颜色的透明度(1-As , 1-As , 1-As , 1-As)
GL_ONE_MINUS_DST_ALPHA减去目标颜色的透明度(1-Ad , 1-Ad , 1-Ad , 1-Ad)

4、使用方法

    Sprite精灵类中有一个设置混合方式的函数setBlendFunc(BlendFunc),另外混合方式的属性值是以BlendFunc结构体作为数据的,定义方式为:{ '源因子' , '目标因子' }

    混合方式可用于精灵纹理图片颜色信息的混合与叠加。

    4.1、混合方式创建

//
	//{ '源因子' , '目标因子' }
	BlendFunc cbl = { GL_SRC_ALPHA , GL_ONE };
//

    4.2、静态常量(常用混合方式)

//
	const BlendFunc BlendFunc::DISABLE                 = {GL_ONE, GL_ZERO};
	const BlendFunc BlendFunc::ALPHA_PREMULTIPLIED     = {GL_ONE, GL_ONE_MINUS_SRC_ALPHA};
	const BlendFunc BlendFunc::ALPHA_NON_PREMULTIPLIED = {GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA};
	const BlendFunc BlendFunc::ADDITIVE                = {GL_SRC_ALPHA, GL_ONE};
//

4.3、混合方式举例

//
//目标图片,已存在于屏幕上
	Sprite* sp1 = Sprite::create("red.jpg");
	sp1->setPosition(mysize/3);
	this->addChild(sp1);

//源图片,新图片
	Sprite* sp2 = Sprite::create("green.jpg");
	sp2->setPosition(mysize/3.0*2.0);
	this->addChild(sp2);

//混合方式,新图片渲染时的混合方式
	//{ 源因子 , 混合因子 }
	BlendFunc cbl = { GL_SRC_ALPHA , GL_ONE };
	sp2->setBlendFunc(cbl);
//

 4.4、如下图所示

wKiom1QEtyCBx1jcAABsFgqcVJg055.jpg

5、混合方式举例

    (1){ GL_ONE , GL_ZERO }

wKioL1QEuTajzwqsAAAomR0Cwdc453.jpg

 (2){ GL_ZERO, GL_ONE }

wKiom1QEuWngO6qrAAAYU-tyrVw791.jpg

(3){ GL_ONE, GL_ONE }

wKioL1QEufegzzOLAAAsUt4gCjU945.jpg

(4){ GL_SRC_ALPHA , GL_ONE } (比较常用)

  和上图一样?是因为“源颜色”的透明度为:1。

wKiom1QEuk2Bi8jeAAAsXXQ5FXQ245.jpg

 

 

### Cocos Creator 与 Unity 的混合开发 在现代的游戏开发中,跨平台工具的结合使用已经成为一种趋势。Cocos Creator 和 Unity 是两款主流的游戏引擎,它们各自具有独特的优势。通过合理的规划和技术手段,可以实现两者的混合开发。 #### 工程架构设计 为了实现 Cocos Creator 和 Unity 的混合开发,通常采用分层的设计方法。Unity 可以用于处理复杂的 3D 场景、物理模拟以及高性能计算部分,而 Cocos Creator 则专注于轻量级 UI 展示和高效的 2D 渲染[^1]。这种分工能够充分发挥两个引擎的特点。 #### 数据互通方案 数据交换是混合开发的核心之一。可以通过 JSON 文件或者二进制文件来存储共享的数据结构。例如,在 Unity 中创建好场景之后,将必要的配置参数导出为 JSON 格式的字符串,再由 Cocos Creator 加载并解析该文件完成初始化工作[^3]。 以下是具体实现的一个例子: ```javascript // 在 Cocos Creator 中加载从 Unity 导出的数据 cc.Class({ extends: cc.Component, properties: { jsonDataPath: 'assets/data/fishArray.json', // 假设这是来自 Unity 的路径 }, onLoad () { let self = this; cc.loader.loadRes(this.jsonDataPath, function (err, res) { if (!err){ var data = JSON.parse(res.text); console.log('Fish Array Data:', data); // 使用数据更新界面或其他逻辑... } }); }, }); ``` 对于更复杂的情况,还可以考虑利用 WebSocket 技术实现实时通信功能,让两者能够在运行过程中动态交互信息[^4]。 #### 资源管理策略 由于两种引擎使用的资源格式可能不同步,因此需要制定统一的标准来进行转换操作。比如纹理贴图可以直接沿用 PNG/JPG 等常见格式;而对于模型资产,则建议先在第三方建模软件里调整完毕后再分别导入到各自的项目当中去[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值