[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
30
S
12
G
3
Posts: 685
Reputation: 5,112

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
37
S
6
G
3
Posts: 32
Reputation: 4,696

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
101
S
39
G
134
Posts: 5,588
Reputation: 85,514

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
15
S
8
G
2
Posts: 68
Reputation: 2,465

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
101
S
39
G
134
Posts: 5,588
Reputation: 85,514

Post » Wed Dec 20, 2017 8:58 am

Hey all, I'm wondering if anyone's encountered the following issue and if there's a way to resolve it. I was using this effect on some objects and noticed that there's some visual artifacts when two objects, both using the outline effect and both with transparency, overlap. This doesn't seem to affect transparent objects which do not have the outline effect applied to them.

In the image below you can see 3 identical sprites overlapping, only difference being that one has a red outline, one has a green one, and one doesn't have the outline effect applied (they are all at opacity = 50, so not sure why the outlined ones look so much darker).
Image

Can also upload a .capx, tho it's pretty barebones to start with.


Edit: small detail, not sure if it helps at all and not 100% sure how to explain it. The glitch seems to encompass a box that is always big enough to encompass the sprite's bounding box. For example in this pic you can see that the round sprite is rotated 45 degrees, making its bounding box stand on end, and slightly expanding the "glitch box".
Image
B
65
S
25
G
19
Posts: 307
Reputation: 14,041

Post » Fri Dec 22, 2017 11:13 pm

Minor update, it appears that this glitch manifests when overlapping any transparent object with a WebGL effect applied. So to recap

When object with outline + transparency is overlapping an object with WebGL effect + transparency = there's an additional square outline that encompasses the first object

The glitch does NOT manifest when:
There are no WebGL effects applied to the second object
One of the objects is not transparent (both need to have opacity <100 for glitch to appear)

Sorry to double post at such short notice but I've been playing around with this a lot and got some cool visuals out of it, but with this glitch it doesn't look too swell the more complicated things get. Would be a shame to have to get rid of it all.

@R0J0hound I know you don't do WebGL anymore, but any insight as to what the cause might be?
B
65
S
25
G
19
Posts: 307
Reputation: 14,041

PreviousNext

Return to Effects

Who is online

Users browsing this forum: No registered users and 2 guests