Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Studio Chat / outline shader

Years of Service
User Offline
Joined: 12th Nov 2016
Posted: 14th Jun 2020 20:48
I purchased the 3D shader kit and I'm thinking you can convert some of those to 2D??? Maybe alter the vertex shader somewhat?? I surprised I haven't seen an outline 2D shader on the forum yet that works with AppGameKit and after experimentation and a few GLSL classes, I don't know what I doing still because there is a gray area between AppGameKit and GLSL that I'm not making the connection about.. thoughts anyone?
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 14th Jun 2020 22:15 Edited at: 14th Jun 2020 22:30
I've only written one 2D shader (this one) but it was by converting a Unity Shader Graph YouTube tutorial.
There's one for an outline shader here, so if you don't get an answer soon, I might have a go at this tomorrow. It looks easy enough.
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 15th Jun 2020 18:37 Edited at: 15th Jun 2020 18:44
There are two methods i know of which are working fine for a 2D outline effect.
Ther first one being basically cloning the texture scaling it up a bit and positioning it with a slight offset around the sprites center.
This method is used in the video Scraggle suggested, and does the job fine as long as the sprite isn't to complex or the outline being to thick.
Resulting in gaps between the "cloned" texture. one can counter this with more clones/samples, but it'll get slow and messy.
In the image below you can see the error for a too large outline.

(don't be confused about the Dropshadow title its the same method)

The other method is to color all nighbouring pixels as long as the alpha value isn't zero being fully transparent but ignoring the original sprite pixels.
I thinks this is the superior method but also gets slow as the outline size increases ofcourse.

But actually the first method is probably just fine most of the time.

Also one could convert the fullscreen Edgedetection shader to 2D using the derivative of neighbouring color shanges instead of the 3D Depth


Login to view attachments

Login to post a reply

Server time is: 2020-08-04 04:23:52
Your offset time is: 2020-08-04 04:23:52