[Cocos2dx] 颜色混合BlendFunc

概念

“混合”是指两种颜色的叠加方式。在新图片将要渲染画到屏幕上的时候,将用在新图片中的红、绿、蓝和透明度信息,与屏幕上已经存在的图片颜色信息相融合。说的具体一点,就是把某一像素位置上原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果。
假设我们需要绘制这样一个场景:透过红色的玻璃去看绿色的物体,那么可以先绘制绿色的物体,再绘制红色玻璃。在绘制红色玻璃的时候,利用“混合”功能,把将要绘制上去的红色和原来的绿色进行混合,于是得到一种新的颜色,看上去就好像玻璃是半透明的。
新图片颜色被称作“源颜色”,而屏幕上已存在的图片颜色则被称作“目标颜色”。
OpenGL会把源颜色和目标颜色各自取出,并乘以一个系数(源颜色乘以的系数称为“源因子”,目标颜色乘以的系数称为“目标因子”),然后相加,这样就得到了新的颜色。

计算公式

假设:颜色信息的四个分量(红,绿,蓝,透明度)
  • “源颜色”  :(Rs, Gs, Bs, As)
  • “目标颜色”:(Rd, Gd, Bd, Ad)
  • “源因子”  :(Sr, Sg, Sb, Sa)
  • “目标因子”:(Dr, Dg, Db, Da)
那么混合产生的新颜色可以表示为:
    (Rs*Sr + Rd*Dr , Gs*Sg + Gd*Dg , Bs*Sb + Bd*Db , As*Sa + Ad*Da)
如果颜色的某一分量超过了1.0,则它会被自动截取为1.0,不需要考虑越界的问题。

混合因子

  • GL_ZERO:     表示使用0.0作为因子,实际上相当于不使用这种颜色参与混合运算。
  • GL_ONE:      表示使用1.0作为因子,实际上相当于完全的使用了这种颜色参与混合运算。
  • GL_SRC_ALPHA:表示使用源颜色的alpha值来作为因子。
  • GL_DST_ALPHA:表示使用目标颜色的alpha值来作为因子。
  • GL_ONE_MINUS_SRC_ALPHA:表示用1.0减去源颜色的alpha值来作为因子。
  • GL_ONE_MINUS_DST_ALPHA:表示用1.0减去目标颜色的alpha值来作为因子。

使用方法

Sprite精灵类中有一个设置混合方式的函数setBlendFunc(BlendFunc),另外混合方式的属性值是以BlendFunc结构体作为数据的,定义方式为:{ '源因子' , '目标因子' }
混合方式可用于精灵纹理图片颜色信息的混合与叠加
const BlendFunc BlendFunc::DISABLE                 = {GL_ONE, GL_ZERO};
const BlendFunc BlendFunc::ALPHA_PREMULTIPLIED     = {GL_ONE, GL_ONE_MINUS_SRC_ALPHA};
const BlendFunc BlendFunc::NORMAL                  = {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};


所谓源颜色和目标颜色,是跟绘制的顺序有关的。假如先绘制了一个红色的物体,再在其上绘制绿色的物体。则绿色是源颜色,红色是目标颜色。如果顺序反过来,则 红色就是源颜色,绿色才是目标颜色。在绘制时,应该注意顺序,使得绘制的源颜色与设置的源因子对应,目标颜色与设置的目标因子对应。不要被混乱的顺序搞晕。   

//目标图片,已存在于屏幕上
    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);
测试
可对下面的组合进行测试

(1){GL_ONE,GL_ZERO}:效果:重叠部分绿色盖住红色


(2){GL_ZERO,GL_ONE}:效果:绿色消失


(3){GL_ONE,GL_ONE}:效果:颜色融合


(4){GL_SRC_ALPHA,GL_ONE}:比较常用,源颜色的透明度影响融合颜色 。和上图一样?是因为“源颜色”的透明度为:1。

相关文章
相关标签/搜索