[Effect] Outline

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?

SpyDaniel

Sorry, I'm not working on effects anymore so I won't be able to do that.

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).

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".

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?

The bounding box is the area c2 uses for the effect. It does that as an optimization. The reason the outline of the box could be it’s sampling pixels outside that, which this effect does. Maybe it’s undefined behavior or maybe it’s something that can be handled. If it is it would be in the c2 renderer and not in shader.

The reason it draws darker or only happens when transparent could be multiple reasons. One, perhaps doing an outline only works when no transparent and the opacity should be applied later? This is something that maybe can be addressed at the runtime level? I could be wrong there since I have minimal understanding how effects and the c2 renderer work together.

You could perhaps work around the issues in this shader by utilizing the paster plugin to get more control of the rendering pipeline. This may not be feasible if the effect doesn’t draw right, since there are issues drawing effects with it. I haven’t tested it, but I digress.

Basically you make the objects not transparent and paste them to a paster object with the outline effect. Then you make the paster object semitransparent and paste that to another main paster... it sounds more complicated than it is.

The object is to have everything invisible and instead just draw to the paster.

So the solution is to either:

1. Fix the shader. No idea what a fix would be.

2. Use the paster object to do the rendering in a more manual controlled way. It may be tedious.

3. Modify the renderer? Least feasible of all. No idea what you’d change here if anything. Probably doing some investigations with straight webgl and shaders in straight JavaScript would be enlightening. Maybe a solution would be clearer after that.

Anyways cheers

Edit:

It occurred to me that you could try increasing the bounding box size (there’s a setting in the shader xml), then in the shader itself skip when processing pixels around the edge. It should be doable I think by dealing with the uv cords. I feel like I have to re-figure out how they work in shaders every time I use them so I’ll pass.

R0J0hound what's the usefulness of this effect? wouldn't be easily reproduced by adding an outline to the sprite it self ?

is there a gain on performance wise ?

Effects let you change the paremeters on the fly, and turned on or off on the fly, whereas an image is fixed. Also it’s simple to see that just drawing a sprite is faster than drawing a sprite with an effect since less is being done. The actual performance difference could be negligible. You’d have to test and see.

Edit:

It occurred to me that you could try increasing the bounding box size (there’s a setting in the shader xml), then in the shader itself skip when processing pixels around the edge. It should be doable I think by dealing with the uv cords. I feel like I have to re-figure out how they work in shaders every time I use them so I’ll pass.

Go figure, I increased the bounding box in the xml as you suggested and this seems to have resolved the glitch. Up to a point - the glitch will still manifest if I set the outline width to more than the bounding box (e.g. bounding box = 10, outline width = 11 --> 1 pixel glitch), but that is easy enough to work with. Unless this is somehow bad for performance I guess I could leave it at that. I haven't messed around with the fx file because I can't make head or tail of which line I should be editing, but as long as it's working I'm happy. Thanks for the help!

brandonP All I've got are personal examples so I guess it depends on your project. Anyway two ways in which this was useful to me was (1) it can be toggled and changed at runtime without needing to draw a whole new set of sprites with a different color/width outline and (2) using it with something like particles will let you color the edges of the particle effect without making each individual particle have a visible outline, which can result in some nice visual effects.

R0J0hound thank you for the clarification

The bounding box is the area c2 uses for the effect. It does that as an optimization. The reason the outline of the box could be it’s sampling pixels outside that, which this effect does. Maybe it’s undefined behavior or maybe it’s something that can be handled. If it is it would be in the c2 renderer and not in shader.

The reason it draws darker or only happens when transparent could be multiple reasons. One, perhaps doing an outline only works when no transparent and the opacity should be applied later? This is something that maybe can be addressed at the runtime level? I could be wrong there since I have minimal understanding how effects and the c2 renderer work together.

You could perhaps work around the issues in this shader by utilizing the paster plugin to get more control of the rendering pipeline. This may not be feasible if the effect doesn’t draw right, since there are issues drawing effects with it. I haven’t tested it, but I digress.

Basically you make the objects not transparent and paste them to a paster object with the outline effect. Then you make the paster object semitransparent and paste that to another main paster... it sounds more complicated than it is.

The object is to have everything invisible and instead just draw to the paster.

So the solution is to either:

1. Fix the shader. No idea what a fix would be.

2. Use the paster object to do the rendering in a more manual controlled way. It may be tedious.

3. Modify the renderer? Least feasible of all. No idea what you’d change here if anything. Probably doing some investigations with straight webgl and shaders in straight JavaScript would be enlightening. Maybe a solution would be clearer after that.

Anyways cheers

Edit:

It occurred to me that you could try increasing the bounding box size (there’s a setting in the shader xml), then in the shader itself skip when processing pixels around the edge. It should be doable I think by dealing with the uv cords. I feel like I have to re-figure out how they work in shaders every time I use them so I’ll pass.

How to make a stroke transparent? could you write to formulate this task?

Does this plugin work with Construct 3?

In general C2 plugins/effects/behaviors don’t work in C3 unless they are converted over. Which is typically listed in the original post.

Unsure whether hatsantos is a spambot or not as all 11 of their posts are identical.

Is there an updated download link for this somewhere? Construct forums were redesigned and now everything's ugly and confusing. I can't find the link to this anywhere.

yeah

i'd like a link too, i want to try the effect