(Webgl2 / WebGPU support) A better outline shader than the one that already exists on the C3 addon stack exchange
This effect fixes the outline spikes, and makes it easier to add the outline (no bbcode before text). It also works for regular sprites
Man you're the goat
I would still recommend using the bbcode outline when possible because it is a billion times faster than my shader for text
I noticed. It's not a big deal since the bulk of the texts are in the game menus, which don't need to maximize performance, while the ones in-game are much less, and i can use the bbcode there to keep it light
Nice effect!
Thank you for the great effect, Skymen! It's very very useful. ✨
no work on Text
Amazing, thank you!
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)
Is there a way to have the outline not extend beyond the character? Instead, have it scale inner, rather than outer?
Hi, this would not be an outline, but an inset shadow or glow. This outline doesnt support this.
Not a problem, I managed to make a plugin that allowed it. Thanks!
The effect hasn't been working well for me. It's adding the outline to some parts of the border of the object instead of just the sprite, and the part of the border it chooses changes depending on if it's in full screen or not, it's bugged out and I don't know how to fix this.
Hi, this is likely due to a spritesheet bleeding issue which is unrelated to the shader.
Make sure to add 1px of empty space around all of your sprites to prevent spritesheet bleeding (clicking the crop button does this for that exact reason)
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?