How to write effects for Construct

16
skymen's avatar
skymen
  • 11 Aug, 2020
  • 723 words
  • ~3-5 mins
  • 3,837 visits
  • 6 favourites

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.

Subscribe

Get emailed when there are new posts!

  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Great tutorial!

    A couple other tips:

    - Use developer addon mode for faster testing (C3IDE has a built in webserver to support this.)

    - Use some kind of glsl syntax checker before you test your effect. I use: shdr.bkcore.com . I just cut and paste my *.fx code into the edit box and fix any syntax errors reported. When it says the compile is ok, I cut and paste the fx code back into C3IDE. Note that the render won't display anything because the C3 uniforms don't match the ones used in this editor.

  • Nice!!!

  • Thanks for making me famous and thanks for this resource :P

  • i do no