2

So here's the code I found: RippleSprite.cpp

void RippleEffectSprite::update(float delta) { //called per frame
updateRippleParams();
// TODO: improve
float rippleSpeed = 0.25f;
float maxRippleDistance = 1;
m_rippleDistance += rippleSpeed * delta;
m_rippleRange = (1 - m_rippleDistance / maxRippleDistance) * 0.02f;

if (m_rippleDistance > maxRippleDistance) {
    updateRippleParams();
    unscheduleUpdate(); //stop updating
    }
}

void RippleEffectSprite::updateRippleParams() {
getGLProgramState()->setUniformFloat("u_rippleDistance", m_rippleDistance);
getGLProgramState()->setUniformFloat("u_rippleRange", m_rippleRange);
}

Fragment Shader

varying vec4 v_fragmentColor; 
varying vec2 v_texCoord;

uniform float u_rippleDistance;
uniform float u_rippleRange;

float waveHeight(vec2 p) {
    float ampFactor = 2;
    float distFactor = 2;
    float dist = length(p);
    float delta = abs(u_rippleDistance - dist);
    if (delta <= u_rippleRange) {
        return cos((u_rippleDistance - dist) * distFactor) * (u_rippleRange - delta) * ampFactor;
    }
    else {
        return 0;
    }
}

void main() {
    vec2 p = v_texCoord - vec2(0.5, 0.5);
    vec2 normal = normalize(p);
    // offset texcoord along dist direction
    vec2 v_texCoord2 = v_texCoord + normal * waveHeight(p);

    gl_FragColor = texture2D(CC_Texture0, v_texCoord2) * v_fragmentColor;
}

Now i'll try my best to describe it in English, when run this creates a small circle (well not really circle, more like oval) at the middle of the Sprite, then it slowly expands outward, the textures below get distorted a bit, like a wave. I've been reading stuff about Shaders for a week now and I understand how they work, but i don't understand this algorithm, can anyone explain to me how it created a oval and made it 'evenly',slowly expand?

here's the link of the tutorial: http://www.cocos.com/doc/tutorial/show?id=2121

genpfault
  • 51,148
  • 11
  • 85
  • 139

0 Answers0