Using multiple render effects!

Dave

Posted this in response to a question from @Tratax - Thought it would be best to also post it here as it's not well documented enough in the tutorials.

When you want to use multiple render effects in a program, there are two main ways to go about it.

In case you weren't aware - it's very easy to start using awesome effects in Fuze and apply them to any of your programs. Here's an example using just a single effect:

gw = gwidth()
gh = gheight()

// First we must create a blank image "canvas" upon which to draw. This is necessary to use the effect filters.
img = createImage( gw, gh, false, image_rgba ) // ( width, height, antialiasing, imageType ) // image_rgba provides transparency, allowing layering

loop
    setDrawTarget( img )
    clear()
    // this is where we will calculate/draw everything for our game/screen

    setDrawTarget( frameBuffer ) // once done and you want to actually draw to the screen, we set the draw target to the framebuffer
    clear()
    renderEffect( img, frameBuffer, fx_crt, [180, 3, 0.01] ) // render the 'img' Image to the framebuffer with a crt effect, using the parameters in the square brackets

    update()
repeat

I urge everyone to give this a try for some really cool effects. Go crazy with the numbers! For the crt shader, the first number in the square brackets is the number of scanlines - try a low number here for interesting effects.

Now, for multiple effects, as I mentioned earlier, there are a couple of ways to go about it. One is to daisy chain the effects together, which you would set up as follows:

gw = gwidth()
gh = gheight()

// first, you'll need separate draw target images for each effect
img = createImage( gw, gh, false, image_rgba )
img_2 = createImage( gw, gh, false, image_rgba )
img_3 = createImage( gw, gh, false, image_rgba )

loop
    setDrawTarget( img )
    clear()
    // all the things you want to draw

    setDrawTarget( frameBuffer)
    clear()
    
    // render the first image to the second with an effect:
    renderEffect( img, img_2, fx_crt, [ 180, 2, 0.01 ] ) // for example
    // now render the second image to the third with another effect
    renderEffect( img_2, img_3, fx_outline, [ 0.1, 0, 0, 0, 1, 1, 1 ] )
    // finally, render the third image to the frame buffer, with another effect if you want!
    renderEffect( img_3, frameBuffer, fx_posterize, [ 1 ] )
    update()
repeat

So that's the daisy-chaining. You can do this with as many or as few effects as desired.

The second way to go about it is to render each effect separately, to different draw targets, then draw them all at once to the frame buffer, effectively "overlaying" the images. This would allow you to have a blur effect for example only applied to a portion of an image, with a crt filter applied to the rest.

img = createImage( gw, gh, false, image_rgba ) // The rgba part is especially important here as the transparency is necessary to overlay the images.
img_2 =  createImage( gw, gh, false, image_rgba )
img_3 =  createImage( gw, gh, false, image_rgba )

loop
    setDrawTarget( img )
    clear()
    // all the stuff for this image

   setDrawTarget( img_2 )
   clear()
   // all the stuff for this image
    
   setDrawTarget( frameBuffer )
   renderEffect( img,     frameBuffer, fx_crt, [ 8, 3, 0.001 ] ) // render first image to frameBuffer with a crt shader
   renderEffect( img_2,   frameBuffer, fx_blur, [ 1/50, 1/50, 1, 1 ] ) // render second image to frameBuffer with a blur effect

    update()
repeat

Of course, all the examples there just use arbitrary values for the purposes of providing a working example. Try lots of things and share your results!