[COCOS2DX] Color Mixed Blendfunc

Concept

< span style="color:#FF0000;">“Mixed” refers to the superposition of two colors. When the new picture is about to be rendered and drawn on the screen, the red, green, blue and transparency information used in the new picture will be merged with the color information of the picture that already exists on the screen. To be more specific, it is to mix the original color at a certain pixel position with the color to be painted in a certain way to achieve a special effect.
Suppose we need to draw such a scene: to see a green object through the red glass, then we can draw the green object first, and then draw the red glass. When drawing red glass, use the “mix” function to mix the red to be drawn with the original green, so that a new color is obtained, which looks as if the glass is translucent.
The color of the new image is called the “source color”, and the color of the image that already exists on the screen is called the “target color” .
OpenGL will extract the source color and target color separately, and multiply them by a coefficient (the coefficient multiplied by the source color is called the “source factor “, the coefficient that the target color is multiplied by is called the “target factor”), and then added together to get the new color.

Calculation formula

Assumption: the four components of color information (red, green, blue, transparency)

• “source color “: (Rs, Gs, Bs, As)
• “Target color”: (Rd, Gd, Bd, Ad)< /span>
• “Source Factor”: (Sr, Sg, Sb, Sa)
• “Target Factor”: (Dr, Dg, Db, Da)

Then the new color produced by mixing can be expressed as:
(Rs*Sr + Rd*Dr, Gs*Sg + Gd*Dg, Bs*Sb + Bd *Db, As*Sa + Ad*Da)
If a certain component of the color exceeds 1.0, it will be automatically truncated to 1.0, and there is no need to consider the problem of out-of-bounds.

Mixing factor

• GL_ZERO: means using 0.0 as a factor, which is actually equivalent to Do not use this color to participate in the mixing operation.
• GL_ONE: Indicates that 1.0 is used as a factor, which is actually equivalent to completely using this color to participate in the mixing operation.
• GL_SRC_ALPHA: Indicates that the alpha value of the source color is used as a factor.
• GL_DST_ALPHA: Indicates that the alpha value of the target color is used as a factor.
• GL_ONE_MINUS_SRC_ALPHA: Means 1.0 minus the alpha value of the source color as a factor.
• GL_ONE_MINUS_DST_ALPHA: Means 1.0 minus the alpha value of the target color as a factor.

How to use

In the Sprite sprite class, there is a function setBlendFunc(BlendFunc) to set the blend mode, and the attribute value of the blend mode is the BlendFunc structure As data, the definition method is: {‘source factor’,’target factor’ }.
The blending method can be used to blend and superimpose the color information of the sprite texture image.

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_prerc>, BlendFunc , src="/wp-content/uploads/images/mobile/cocos2dx/1626793159766.net/2018050213561485" alt="" >
 

 
The so-called source color and target color are related to the drawing order. Suppose that a red object is drawn first, and then a green object is drawn on it. Then green is the source color and red is the target color. If the order is reversed, red is the source color and green is the target color. When drawing, you should pay attention to the order, so that the drawn source color corresponds to the set source factor, and the target color corresponds to the set target factor. Don't be confused by the chaotic sequence. 
 
//Target image, already exists on the screen
 Sprite* sp1 = Sprite::create(“red.jpg”);
 sp1->setPosition(mysize/3) ;
 this->addChild(sp1);
//Source picture, new picture
 Sprite* sp2 = Sprite::create("green.jpg");
 sp2- >setPosition(mysize/3.0*2.0);
 this->addChild(sp2);
//mixing method, the mixing method when new pictures are rendered
 //{source factor, blending factor }
 BlendFunc cbl = {GL_SRC_ALPHA, GL_ONE };
 sp2->setBlendFunc(cbl);
Test
The following combinations can be tested 
(1) {GL_ONE, GL_ZERO}: Effect: The overlapped part is covered by green and red


(2) {GL_ZERO, GL_ONE}: Effect: Green disappears


 (3) {GL_ONE, GL_ONE}: Effect: color fusion


(4) {GL_SRC_ALPHA, GL_ONE}: More commonly used, the transparency of the source color affects the fusion color. Same as the picture above? It is because the transparency of the "source color" is: 1.