Hi, I’m new to cocos2d and I’m trying to make a menu. I created a MenuItemImage here:
mSetting = MenuItemImage::create("setting.png", "setting_selected.png");
Now I’m looking for a way to add glowing effect to the border of it in stead of a boring static setting_selected.png image.
(for example: the light-blue glowing border of the menu image here , check at 1:00 https://youtu.be/PJSlvhDbB4I?t=1m).
Your attention and help is very much appreciated 
I’m lost and really need a solution for this. If you don’t have time to guide me step by step, please leave a keyword so that I know where to start with. Thanks a lot.
I don’t know of an easy way to do this, so probably a custom shader can be a solution.
Do you mean I have to custom the shader in engine? If so, is there any specific tutorial showing how to do similar task out there? Most of them just show me how to use the engine not custom it.
I have another idea that using a sprite with square shape, which exactly fits the menu item to make it looks like the border of it. Then make it animate (changing color) to show glowing effects likes how they do in the video. Is that possible and easier to do the job?
its fine using another sprite imo.
But if you want shaders… @stevetranby has written some really good ones.
you can check em out.
I don’t know of any tutorial on how to change the shader, but there are examples in cpp-tests.
What are your questions?
My repo is sort of half-baked in the sense that I never went back and cleaned things up and I think one or two of the original ObjC cocos2d-iPhone examples are not ported yet.
ExampleBase shows how the shaders are attached, uniforms updated, and how to create GLProgramState from shader files.
And as Boby mentions, there are other examples in cpp-tests project that comes with the engine zip/source.
Hi @b12345, thanks for your attached fragment shader. However, It’s a little hard to understand for me since variables’s name don’t self-explain much. It would be great if you could explain to me what do these variables do ? :
u_ctime;
u_gtime;
u_radius;
u_color;
accum;
and CC_Texture0 (I can’t find definition of this, what is this for? )
Here is the fragment shader in your glowshader.zip:
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform float u_ctime;
uniform float u_gtime;
uniform float u_radius;
uniform vec4 u_color;
void main()
{
float radius = 2.0;
vec4 accum = vec4(0.0);
vec4 normal = vec4(0.0);
//normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));
normal = texture2D(CC_Texture0, v_texCoord);
for(float i = 1.0; i <= radius; i += 1.0)
{
accum += texture2D(CC_Texture0, vec2(v_texCoord.x - 0.01 * i, v_texCoord.y - 0.01 * i));
accum += texture2D(CC_Texture0, vec2(v_texCoord.x + 0.01 * i, v_texCoord.y - 0.01 * i));
accum += texture2D(CC_Texture0, vec2(v_texCoord.x + 0.01 * i, v_texCoord.y + 0.01 * i));
accum += texture2D(CC_Texture0, vec2(v_texCoord.x - 0.01 * i, v_texCoord.y + 0.01 * i));
}
accum.rgb = u_color.rgb * u_color.a * accum.a * 0.95;
float opacity = ((1.0 - normal.a) / radius) * (sin(CC_Time[1])/5.0 / u_gtime);
normal = (accum * opacity) + (normal * normal.a);
gl_FragColor = v_fragmentColor * normal;
}@sinhviencodon there are a handful of shader uniforms that are attached directly by cocos2d-x itself.
Here’s a previous answer I gave on the subject:
[Solved] Passing a Variable to a Shader .
(personal note to @slackmoehrle: I wish the forum didn’t embed links to other topics without providing a link to open the referenced forum. It’s one of the two reasons I add a " ." to the end of all my links. The other reason is when there’s multiple links embeds can get a bit unwieldy :D)
Hmm. Let me play with some settings.