Is there a NODE that can lighten its children with a given mask image?

cocos2d-x C++
#1

I need such kind of NODE to lighten its children, which works just like the CCClippingNode.

I think a shader and a alpha image are required. But how to write the shader and how to use the alpha image? Thanks.

#2

You can color/tint a Node: http://cocos2d-x.org/docs/programmers-guide/sprites/index.html#sprite-manipulation

You can also use a Shader: http://cocos2d-x.org/docs/programmers-guide/advanced_topics/index.html#shaders-and-materials

#3

Thanks for the answer.

  1. In my understanding, color/tint can only darken the sprite. If I want to make the sprite more brighter, I have to use shader.
  2. After reading the “Shaders and Materials”, I still have no idea how to achieve my goal. I’m not so familiar with the shader language and the mechanism behind it. An example may be more helpful for me.
#4

search these forums for plenty of examples. We will update the docs to make them more useful.

#5

There are several ways to achieve something like this, depending on your use case.
For a simple use case you could also overlay with a sprite which BlendFunc is set to BlendFunc::ADDITIVE.

How to use shaders with several textures, here is a small example, your case might be more complicated.

// define a fragment shader (you could also put this in a file and load it).
// Maybe you need a vertex shader too, but I'm using the default one
const char * yourFragShader = R"(
#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture;
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main(void)
{
    gl_FragColor =  v_fragmentColor * (texture2D(CC_Texture0, v_texCoord) + texture2D(u_texture,  gl_FragCoord.xy / 128.0));
}
)";

// load your texture (in this case it's a 128x128px repeating texture, 
// that will be statically overlayed, that's why I divided 
// gl_FragCoord by 128 in the fragment shader)
    auto texture = Director::getInstance()->getTextureCache()->addImage("texture.png");
    
    Texture2D::TexParams p;
    p.minFilter = GL_LINEAR;
    p.magFilter = GL_LINEAR;
    p.wrapS = GL_REPEAT;
    p.wrapT = GL_REPEAT;
    texture->setTexParameters(p);

// then create your GLProgram and GLProgramState:
    auto prog = GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, yourFragShader);
    auto progState = GLProgramState::create(prog);

// add the texture
    progState->setUniformTexture("u_texture", texture);

// and finally set the programState for your sprite    
    yourSprite->setGLProgramState(progState);
#6

I once had something like this to do, you need a shader :slight_smile: