Today, I saw this:
I know man... 😞
In fact, I thought the exact same thing last year when I tried to make a shader. After days of figuring things out, I had finally made my own effect.
I know how hard it is to get into it, especially with the total lack of learning resources.
I can't promise to change that: I am far from having a good enough level in shaders to pretend to write tutorials about it. What I can do however is provide a starting point.
First, GLSL
What a lot of people might not realise is that effects in Construct are written in a language named GLSL. It's a shaders language that is used way beyond the scope of Construct shaders. It's used for WebGL effects, and even in native OpenGL shaders.
So, if you want to get into writing shaders, you will absolutely need to understand how to write GLSL.
Thankfully, the web already has tons of resources for this, and the biggest one is a sandbox website named Shadertoy. This website will allow you to experiment very quickly with GLSL, and look at really impressive open source work done by other people in the community.
One really great resources to start learning is this set of tutorials written by a user named vug:
shadertoy.com/view/Md23DV
I highly recommend going through every tutorial featured in this toy. It goes over a lot of really basic stuff.
Now, Construct?
Writing shaders for Construct is a bit different than writing them on shadertoy. You won't have access to the same variables, and you'll need to adapt some of your code for it to work in the engine too.
Good news is the Construct Team provided us with documentation.
Bad news is it's almost entirely contained in a single page!
construct.net/en/make-games/manuals/addon-sdk/guide/configuring-effects
Read it carefully. Pin it. Go back to it regularly. Especially the Useful shader calculations part!
Take this
Until someone decides to write an in-depth guide about shaders, you'll be mostly alone in this. So you'll need all the help you can find.
C3IDE
if you're making effects for C3, you can start to try writing it using C3IDE which will take care of some of the work for you (adding parameters, generating the language JSON, hosting a web server, exporting the c3addon etc) : github.com/armandoalonso/c3IDE
SDK Example files
Another resource available are the SDK example files provided by the Construct Team to know how to structure an effect addon.
Here is the C3 one: construct.net/en/make-games/manuals/addon-sdk
And here is the C2 one: construct.net/en/construct-2/manuals/construct-2-javascript-sdk/sdk-documentation/c2addon-packages
The community
The last, and probably most useful resource is the community. Tons of people made effects for C2 and C3. Download some of them, and read through their code.
The Addon Exchange page is a great place to find some effects.
Some older C2 effects can also be found on the forums, and most of them have been kept track of by Kyatric on this very extensive list: construct.net/en/forum/extending-construct-2/effects-31/webgl-effects-list-51897
chrisbrobs shared a massive collection of GLSL examples to look into construct.net/en/forum/extending-construct-2/effects-31/effects-glsl-fragment-shader-119990
R0J0hound made a big post back in the days to explain some more stuff about making C2 effects construct.net/en/forum/extending-construct-2/effects-31/documentation-built-in-85192
And there is always Shadertoy and other shader communities on the web that also have tons of available examples to mess with.
Now what?
A really good thing to try doing to understand how effects work in C2 and C3 is to try and port effects from one to the other (Assuming you own both engines that is).
That will force you to understand some quirks of both rendering processes. (Note that the effect might render differently when the spritesheet gets regenerated if you haven't taken it into account in your effect, so don't forget to try with different spritesheet sizes if your effect is consistent)
I'd also recommend you read through Ashley's blog posts about how the effects renderer works in Contruct
How the Construct 2 WebGL renderer works
Construct's effect compositor: Part 1
Construct's effect compositor: Part 2
I will be 100% honest though: The really fun part only arrives when you managed to get through the hours of understanding how to operate GLSL properly and the added hours of how to apply it to Construct. But trust me, once you're done and you have an effect finished, it will be glorious.