(Webgl2 / WebGPU support) A better outline shader than the one that already exists on the C3 addon stack exchange
Nice effect!
Thank you for the great effect, Skymen! It's very very useful. ✨
no work on Text
Not sure why people are saying it doesn't work on text. The text and spritefont objects can do an outline with bb code.
I tested this and bb codes like that don't work on spritefonts. Just text objects.
Omg...Thanks!
i.imgur.com/dlPdg0F.png
any ideas how can i set thickness of outline? (when i use stroke i receive only outline without inner color)
Given how fantastic the new individual corner control is in your RoundedSquareMask shader...
Any chance of seeing the same control here for individual controls for the each side of an object being outlined?
Like how border-top, border-right, border-bottom, and border-left work in CSS?
Your stuff is so helpful in bringing back CSS type styling to objects that don't inherently have access to it in C3
sadly this isn't as feasible because the way CSS does outlines and the way this shader does outlines is drastically different.
I've actually been thinking about making a brand new addon focused on taking CSS inspired styling and applying to a default square (so with outline, sizing, positionning and border), but this would require going a completely different route than using shaders.
That's fair. My own personal goal is to use something more reliable than the built in emboss effect, as I find it prety limiting. Where if one could control each edge of a rectange in terms of color and thickness of outline, I think that could have a tonne of applications and possibilities.
On a side note, any advice for someone to get started making their own fx plugins? I've been thinking I should start looking into it, but haven't found much on how to get started.
Hey, this fixes a LOT of issues for our game! We're using it to outline our text. Two questions:
1) Any way to have alpha for the outline it created? We're aiming to have our white text with 80% opacity for our outline.
2) Is there a limit for how high the precision step value can be for optimal performance? 50? 500? We can input 5000 with 16 samples and it still looks great.
Many thanks!
Hi, please don't use this to outline text, instead use the [outline] or [outlineback] bbcode with [linethickness] tag to control outline width. Here's the manual about it:
construct.net/en/make-games/manuals/construct-3/plugin-reference/text
About the precision step, it clamps to the outline width, so make it as close to the width value as possible as long as you're happy with the quality.
Anyway, I know the BBCode outline tags can cause issues at higher width values with some fonts, so really only use my effect if you are aware it has a MUCH higher GPU usage than using the BBCode tag, and you using the tag doesn't work. If the font causes issues, I also recommend trying another font to see if that works.
Thanks for the update! Unfortunately, your plugin is our only option, we recently posted this about BBCode outlines and Ashley confirmed it's an engine/browser limitation. Sprite fonts also have weird spacing and kerning with non monospaced fonts:
github.com/Scirra/Construct-bugs/issues/8318
Even with other fonts, BBCode outlines still doesn't work. We'll need to do some tests, but good to know to keep the precision step as close to the font size. Any other recommendations? Any support for Alpha, or we need to generate it behind an effect-free text layer and reduce the opacity?
skymen there is one issue in this effect if we rotate layout 90 or 270 degree by setting its angle then outline streches from one side. see this image
Hi, yeah this is an issue with C3's effect compositor. It doesn't provide a good way to get the size of one layout pixel unit across all scales and angles. I use an approximation that hopefully works in most use cases, but assumes that the render target and the layout are aligned which isn't true if the layout is rotated.
In fact my approximation only works at angles 0 and 180 and breaks on every other angle value, and there is no way to really fix this without also breaking the fact that the outline pixel size is tied to layout pixels.
If you want, you can modify the effect. In the code you should find a value called "texelSize" which is my approximation, and instead use C3's "pixelSize" value and it should hopefully stop stretching, and you can counter act the wrong pixel size value by using bigger width values
Such a problem, I added an outline to the 3d objects, everything works well, but when I render the game in HTML5, launch it from my phone and go to fullscreen, fps starts to drop terribly.Although when the game is not in full screen, everything works fine.How to solve the problem?
how i activate it
Is it just me or something changed with construct and now the outline is making the sprite invisible. (Full screen mode). It seems to work on native screen mode, which is 427x240
Edit: Fixed it. But still a strange bug.
I changed my setup a bit and forgot about it. It was perspective camera with FOV 5. I changed it back to 10 and it works again.