Blur effects for the game

Cocos Creator
#1

Hello,
I just want to make few node and prefab blur. There are foreground and background and in background there is few nodes which should be made blur when a button is clicked.

#2

As far as I know, you will have to write down a Shader. Unfortunately, I dont know how to do that so ping me if you succeed :slight_smile:

1 Like
#3

Anyone who knows about Shader (Shader on blur effects)?

#4

HI,
I think You can change the node`s sprite frame when the button clicked

#5

can you help me with code please.
If node is
this.node
then what would be the code to change it?

#6

Define this property in your script and assign whatever image you want to use as a blur sprite frame through the editor

 @property(cc.SpriteFrame)
 spriteImg:cc.SpriteFrame=null

After that when the button clicked, use spriteImg as new sprite frame for the node,
this.node.getComponent(cc.Sprite).spriteFrame=this.spriteImg

1 Like
#7

@UnGamer I think this one will work for you:

#ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord;
uniform float widthStep;
uniform float heightStep;
uniform float strength;
const float blurRadius = 2.0;
const float blurPixels = (blurRadius * 2.0 + 1.0) * (blurRadius * 2.0 + 1.0);
void main()
{
    vec3 sumColor = vec3(0.0, 0.0, 0.0);
    for(float fy = -blurRadius; fy <= blurRadius; ++fy)
    {
        for(float fx = -blurRadius; fx <= blurRadius; ++fx)
        {
            vec2 coord = vec2(fx * widthStep, fy * heightStep);
            sumColor += texture2D(CC_Texture0, v_texCoord + coord).rgb;
        }
    }
    gl_FragColor = vec4(mix(texture2D(CC_Texture0, v_texCoord).rgb, sumColor / blurPixels, strength), 1.0);
}

This is a Shader code for Cocos Creator. I took this code from here:

1 Like
#8

Iā€™m beginner in cocos creator so Iā€™m not sure where to modify the shader. In assets I created effect by right click on mouse ā†’ create ā†’ Effect and pasted your code in there and named it blurEffect. Then I created materials by right click on mouse ā†’ create ā†’ Material and tried to add blurEffect in effect section but once I click apply it shows Missing Effect. I think I have not copied it properly so can you guide me with the process and screenshots of how you used the codes would be helpful.

#9

Thanks for replying. But I want to blur the node (cc.Node).

#10

@UnGamer what version of Creator are you using? Can you provide a demo that reproduces the problem?

#11

version is 2.4.3

#12

This one worked for me:

CCProgram vs %{
precision highp float;

#include
#include

in vec3 a_position;
in vec4 a_color;
out vec4 v_color;

in vec2 a_uv0;
out vec2 v_uv0;

void main () {
vec4 pos = vec4(a_position, 1);
pos = cc_matViewProj * pos;
v_uv0 = a_uv0;
v_color = a_color;

gl_Position = pos;

}
}%

CCProgram fs %{
precision highp float;

#define REPEAT 5.
uniform sampler2D texture;
uniform NUM {
float num;
}

in vec2 v_uv0;
in vec4 v_color;

vec4 draw(vec2 uv) {
return v_color * texture2D(texture,uv).rgba;
}
float grid(float var, float size) {
return floor(var*size)/size;
}
float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
void main() {
vec4 blurred = vec4(0.);
for (float i = 0.; i < REPEAT; i++) {
vec2 q = vec2(cos(degrees((i/REPEAT)*360.)),sin(degrees((i/REPEAT)360.))) * (rand(vec2(i,v_uv0.x+v_uv0.y))+num);
vec2 uv2 = v_uv0+(qnum);
blurred += draw(uv2)/2.;
q = vec2(cos(degrees((i/REPEAT)*360.)),sin(degrees((i/REPEAT)360.))) * (rand(vec2(i+2.,v_uv0.x+v_uv0.y+24.))+num);
uv2 = v_uv0+(qnum);
blurred += draw(uv2)/2.;
}
blurred /= REPEAT;
gl_FragColor = vec4(blurred);
}
}%

I took code from here:

2 Likes
#13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.