[Effect] Outline

Share your Construct 2 effect files

Post » Wed Feb 15, 2017 6:53 pm

If like in my case you not need diagonals(8) and only with horizontal-vertical(4) is enough here the .fx with the limitation.

Will be great some option in the parameter to set if you want diagonals or not, but well this is what i can do with my actual skills XD.

Code: Select all
/////////////////////////////////////////////////////////
// Outline effect
//
varying mediump vec2 vTex;
uniform lowp sampler2D samplerFront;

precision highp float;
uniform highp float pixelWidth;
uniform highp float pixelHeight;
uniform highp float red;
uniform highp float green;
uniform highp float blue;
uniform highp float width;
uniform highp float justoutline;

void main(void)
{
   vec4 front = texture2D(samplerFront, vTex);

   float dx = pixelWidth*width;
   float dy = pixelHeight*width;
    float diag = 0.7071;
   
   /* If you need diagonals
    float a0 = texture2D(samplerFront, vTex + vec2(-dx*diag, dy*diag)).a;
    float a1 = texture2D(samplerFront, vTex + vec2(dx*diag, -dy*diag)).a;
    float a2 = texture2D(samplerFront, vTex + vec2(-dx*diag, -dy*diag)).a;
    float a3 = texture2D(samplerFront, vTex + vec2(dx*diag, dy*diag)).a;
    */
    float a4 = texture2D(samplerFront, vTex + vec2(-dx, 0.0)).a;
    float a5 = texture2D(samplerFront, vTex + vec2(dx, 0.0)).a;
    float a6 = texture2D(samplerFront, vTex + vec2(0.0, dy)).a;
    float a7 = texture2D(samplerFront, vTex + vec2(0.0, -dy)).a;
   
    // If you need diagonals float ina=max(max(max(max(max(max(max(a0,a1),a2),a3),a4),a5),a6),a7)-front.a;
   
    float ina=max(max(max(a4,a5),a6),a7)-front.a;
   
   
    if(justoutline!=1.0)
    {
        float outa = ina + front.a*(1.0-ina);
        vec3 outrgb = (vec3(red/255.0, green/255.0, blue/255.0)*ina + front.rgb*front.a*(1.0-ina));
        gl_FragColor = vec4(outrgb, outa);
    }
    else if(ina>0.0)
    {
        gl_FragColor = vec4(vec3(red/255.0, green/255.0, blue/255.0)*ina, ina);
    }
}
B
24
S
10
G
3
Posts: 557
Reputation: 4,491

Post » Mon Feb 20, 2017 4:53 am

Heyyy! I've just been reading this topic after being interested in outlining things, more specifically text, and ended up learning a lot from you guys about coding effects. So yeah, thanks a bunch for everything, I'm loving the community (I'm technically new).

Salut!
B
4
S
1
Posts: 1
Reputation: 404

Post » Thu Feb 23, 2017 4:30 pm

This is extremely usefull, effect! Thanks, R0J0hound
Is it possible to make it scale proportionally to the image it is aplied to? For example when I change the resolution I notice that the outline remains the same width, so it looks larger if an image becomes smaller
B
33
S
5
G
3
Posts: 32
Reputation: 4,496

Post » Fri Mar 10, 2017 4:31 pm

Im happy to find this !!! THanks R0J0hound!!
B
11
S
3
Posts: 40
Reputation: 815

Post » Sun Mar 26, 2017 6:20 am

Please add again this FX
B
3
S
1
Posts: 1
Reputation: 277

Post » Sun Mar 26, 2017 5:38 pm

fixed
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507

Post » Thu Jun 22, 2017 11:02 am

I was using the Toon effect to add the outline, but when I scaled the sprite, the outline also scaled and looked weird as parts would be thicker than the 1px I wanted.

I then tried this plugin, but it basically does the exact same thing.

@R0J0hound, do you think you could get your plugin to work with scaled sprites, so that the outline width is consistent, no matter what scale the sprite has been resized to?
B
13
S
7
G
2
Posts: 65
Reputation: 2,307

Post » Thu Jun 22, 2017 5:20 pm

@SpyDaniel
Sorry, I'm not working on effects anymore so I won't be able to do that.
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507

Previous

Return to Effects

Who is online

Users browsing this forum: No registered users and 0 guests