Creating Glowing Circle

cocos2d-x
1

I need to create something like this:

44e533d578d18d32.png640×640

And make it glowing with a repeatforever action with fading in/out.

Do you think is better to use a PNG with trasparency or it’s better to create it like a drawnode directly in opengl?
If you prefer to create it runtime, how do you achieve it? :wink:

2

Image with animated opacity would be the easiest way to go and possibly the cheapest (depending on texture size). But when you scale it, it will scale linearly.

It really depends what the use cases are, if you need fine control of the attenuation and intensity (a la 2d point light) then you may want to consider a custom shader and quad.

To do this in texture space you could create a quad with a uv rect of (x = -1, y = -1, w = 2, h = 2) and use fragment shader something like:

varying vec2 uv;
uinform vec3 attentuation;
uniform vec3 u_color;

void main(void)
{
    float distance = length(uv);
    float constantIntensity = attentuation.x;
    float linearIntensity = attentuation.y * distance;
    float quadraticIntensity = attentuation.z * distance * distance;
    float intensity = constantIntensity + linearIntensity + quadraticIntensity 
    
    gl_FragColor = vec4(u_color.rgb, intensity);
}

For a more in depth look at attenuation check this out https://developer.valvesoftware.com/wiki/Constant-Linear-Quadratic_Falloff

3

Thank you @almax27 :wink:

I’ll try to make a test with this “quad” and as you said the normal sprite is much more easier :stuck_out_tongue:

4

How did you use a shader with cocos?

5

Hey there are a number of approaches to applying shaders to your renderables in cocos2d-x. But it ultimately comes down to the classes GLProgram and GLProgramState.

A quick Google returns these:

http://www.roguish.com/blog/?p=746
http://www.cocos2d-x.org/wiki/User_Tutorial-Realistic_looking_animated_real-time_clouds
http://www.cocos2d-x.org/wiki/User_Tutorial-RenderTexture_Plus_Blur

1 Like