cocos2d 顏色混合 ccBlendFunc 使用方法

 本節參考:http://goldlion.blog.51cto.com/4127613/767801


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、混合方式創建

1
2
3
4
//
    //{ '源因子' , '目標因子' }
    BlendFunc cbl = { GL_SRC_ALPHA , GL_ONE };
//


    4.2、靜態常量(常用混合方式)

1
2
3
4
5
6
//
    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、混合方式舉例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//
//目標圖片,已存在於屏幕上
    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



本文出自 “夏天的風” 博客,請務必保留此出處http://shahdza.blog.51cto.com/2410787/1547633

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章