cocos 刮刮卡 shader

Cocos 刮刮卡 shader 可以实现在图片或者精灵上进行刮开效果的特效。具体实现方法如下：

1. 用 cocos2d-x 创建一个新的项目。

2. 在项目中创建一个精灵，加载一张背景图片。

3. 创建一个 Shader 文件，命名为 ScratchCard.fsh。

4. 在 ScratchCard.fsh 中编写 shader 代码，实现刮开效果，代码如下：

varying vec2 v_texCoord;
uniform sampler2D CC_Texture0;
uniform sampler2D brushTexture;
uniform float u_threshold;

void main()
{
    vec4 color = texture2D(CC_Texture0, v_texCoord);

    vec4 brush = texture2D(brushTexture, v_texCoord);

    float luminance = dot(color.rgb, vec3(0.299, 0.587, 0.114));

    float mask = step(luminance, u_threshold);

    gl_FragColor = mix(color, vec4(0, 0, 0, 0), mask * brush.a);
}

5. 在 C++ 代码中加载 Shader 文件，将 Shader 绑定到精灵上。

auto shader = GLProgram::createWithFilenames("ScratchCard.vsh", "ScratchCard.fsh");

auto sprite = Sprite::create("background.png");
sprite->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
sprite->setGLProgram(shader);
this->addChild(sprite);

6. 创建一个 Brush 精灵，用于擦除操作。

auto brush = Sprite::create("brush.png");
brush->setVisible(false);
this->addChild(brush);

7. 在触摸事件中实现刮开效果，将 Brush 精灵的位置设置为触摸点的位置，并且将 Brush 精灵显示出来。

bool HelloWorld::onTouchBegan(Touch* touch, Event* event)
{
    brush->setPosition(touch->getLocation());
    brush->setVisible(true);
    return true;
}

void HelloWorld::onTouchMoved(Touch* touch, Event* event)
{
    brush->setPosition(touch->getLocation());
}

void HelloWorld::onTouchEnded(Touch* touch, Event* event)
{
    brush->setVisible(false);
}

8. 在每帧更新中将 Brush 精灵的位置传递给 Shader，用于在精灵上实现擦除效果。

void HelloWorld::update(float delta)
{
    auto shader = sprite->getGLProgram();
    shader->use();
    shader->setUniformTexture("brushTexture", brush->getTexture());
    shader->setUniformLocationWith1f(shader->getUniformLocation("u_threshold"), 0.7f);
    shader->setUniformLocationWith2f(shader->getUniformLocation("u_brushPosition"), brush->getPositionX(), brush->getPositionY());
}

这样就实现了 cocos 刮刮卡 shader 效果。