[Effect] Outline

SoldjahBoy

Here's an example. I did the outline by scaling the object instead of moving eight copies which seems to work better with round or square objects.

https://dl.dropboxusercontent.com/u/542 ... tline.capx

The picking is unavoidable. You could store a list of uid's of the objects in each group in an array so you could loop over the array and pick by uid. That would be faster than normal picking with a high number of instances. Utilizing pick nth instance and iid is another option instead of uid but things can change when instances are destroyed.

This can also be manipulated a lot depending on what you want to do. If only one outline is shown at a time you can have only one paster object.

I also fiddled with the idea of changing the group based on the object's z order and came up with this:

https://dl.dropboxusercontent.com/u/542 ... line2.capx

Your idea of the groups being always the same should work too. You just need to zsort the groups.

As far as performance, you probably can get a boost by just using the fx like in the first example, still the rendering perfomance will be a bit slower or at least it should be similar if each group was on it's own layer.

R0J0hound

Thanks very much mate, I will check those out later this afternoon once I've finished work. I'll let you know how I go with it, and what I end up doing

Cheers bud

~Sol

R0J0hound

Thank you for making this nice effect available :)

Sadly, I ran into a problem. After export, outline is all messed up. I'm using NW.JS v0.15.0 and Construct2 r227.

Outline in C2 NW.JS preview:

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/outline/in%20preview.jpg

Outline in NW.JS after exporting

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/outline/after%20exporting.jpg

I even made a plank project to see if I could reproduce this problem. Well, same problem occurred after export. Any idea what is causing this? Or how I can fix it?

-M-

Mithrill

That has been mentioned before I think. I think it's related to export in general, but I can't test on my machine since I can't use webgl. Best I can tell the pixelwidth/pixelheight variables that C2 provides to shaders is giving different values on export.

Try the same test you did with this effect on the pixelate effect since it also uses those variables. If the results are different then that would make a good bug report since it involves only vanilla C2. If the results are the same then the problem is with how I used the variables in this shader, but I don't see the issue.

R0J0hound

I made a test with the pixelate effect like you suggested. I even installed a fresh copy of C2. Again like you mentioned, to make test with a vanilla version. Then I only installed your outline effect. Results: pixelate effect is also broken after exporting to NW.JS. I also exported to html5 and effect is broken. In preview pixelate effect is working but after export, well, see yourself:

first state In preview:

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/pixelate/pixelate%20first%20state%20in%20preview.jpg

second state In preview:

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/pixelate/pixelate%20second%20state%20in%20preview.jpg

last state In preview:

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/pixelate/pixelate%20last%20state%20in%20preview.jpg

Below are the results after exporting:

First state:

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/pixelate/pixelate%20first%20state%20after%20export.jpg

Last state:

h*t*t*p*s://dl.dropboxusercontent.com/u/43020976/C2%20pics/pixelate/pixelate%20last%20state%20after%20export.jpg

Maybe I should post a bug report?

-M-

If the pixelate effect is getting broken on export then, yes report just that. Don't include the outline effect in the report, since third party stuff can't be in bug reports. If it gets fixed then the outline effect will likely be fixed as well.

How does it works? Wht's param1 and param2?

Thank you!

Ciao121

You unzip the file into the effects folder in C2's install directory and then it's as easy as using any other effect.

Hi R0J0hound,

looking at the xml make me understand how it works. Thanks!

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.

/////////////////////////////////////////////////////////
// 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);
    }
}[/code:169qwojw]

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!

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

Im happy to find this !!! THanks R0J0hound!!

Please add again this FX

fixed