How to use Shader in Cocos2d-x (P2)

Tram Ho

In this section I will continue to give some formulas to effect the image with shader. You can read part 1 here

E04: Grayscale

Here are a few other simple examples:

Full Code file .vsh:

Full code file .fsh:

The properties and types of variables I have explained in part 1, you can return to your previous post for reference.

For example, this is merely an additional color mixing formula:

E05: Chromatic


Chromatic Aberration on the lens is a phenomenon where white light after passing through the lens is distorted, turning into a light beam with a distribution of red to purple.

If you read the definition and you understand it, then it’s okay, because me too =))). According to my opinion, this effect is distorted, I often see these effects in horror games.

Full Code file .vsh:

Full code file .fsh:

Here I will perform 2 steps.

B1 : I will create a distorted image from the old image (can be based on sin , cos , or offset adjustment the image are ok).

Note, if you have not visualized the distorted picture with the above formula, you can adjust the following code: texture2D(CC_Texture0, uv + vec2(wave*sin(1.0*t + uv.y*5.0), 0.0)); ---->> texture2D(CC_Texture0, vec2(wave*sin(1.0*t + uv.y*5.0), 0.0));

B2 : I mixed the original photo and the distorted picture.

B3 : Ta-ta, we got the Chromatic effect, T__T.

The examples I gave here are just basic so not as shown above, to do as above, I need to add 1 more NoiseTexture.

I will guide you to use more textures to create many other effects later, for now, I’m just going to the most basic mixing parts in this article.


Testing more ways of distortion.

Try different combinations of color recipes.

E06: Shadow

Note that you can’t cast a shadow on the outside of the sprite, so make sure it has enough empty area in the image for whatever effect you want to add.

Here the shadowOffset variable is used to adjust the deviation of the shadow, you can try changing the value of this variable to test offline. Now I will say the idea of ​​this effect. You notice the following func:

Here I will get 2 param is 2 colors: over is the color of the image and the under is the color of the ball.

  • If the image at this location is colored (ie alpha = 1), it will return the color of the current image.
  • If the image in this position has no color over = (0, 0, 0, 0) then it will return the color of the shadow (here is under).

Okay, so I’ll summarize the idea of ​​this func as follows:

B1 ) we will rely on the alpha of the image and rely on shadowOffset to create a shadow layer.

B2 ) we will consider: if this position of the image is colored, it will return color.

If this position has no color (alpha = 0) and the area is in a shadow area, then the shadow is returned.

If not in both, returns no color. (because both over and under are 0 colors, the expression over + (1.0 - over.a)*under also returns 0 colors).


Try drawing a layer of color instead of the shadow below.

I would like to pause this section here ,, we’ll return to another effect in the next section

Share the news now

Source : Viblo