Level Up Your Visuals with Filters & Effects

GameMaker Studio v2.3.6 brings some exciting, major additions to your favourite game engine, such as a new, streamlined Start Page, Template Projects, and the topic of this tech blog: Filters & Effects! In this blog we will explore this new functionality, learn how to use it in the IDE and through GML, and look at some attractive visual effects you can implement within a minute to make your game prettier!

Feature Overview

In the Room Editor, you can click on  in the Layers panel to add a new "Filter/Effect" (or "FX") Layer. This will allow you to select any one of the filters/effects provided with GMS2 and apply them to the contents of your room:

The following Filters/Effects are present in GMS 2.3.6:

• Colourise: This changes everything to appear with a single hue, with an adjustable intensity value
• Large Blur: This blurs the image using a specified noise texture, allowing you to change the blur radius to increase or decrease the blur effect
• Edge Detect: This enables an edge detection shader for the rendered content, with an adjustable threshold value
• Desaturate: This reduces the saturation of the rendered content by the specified intensity value
• Posterise: This applies a posterisation effect to the rendered content, allowing you to change the max colour levels for each hue
• Screen Shake: This makes the rendered content shake to simulate a camera shake effect, allowing you to adjust the Magnitude (how much it shakes), the Shake Speed (how fast it shakes) and the noise texture that controls the movement
• Pixelate: This makes the rendered content look pixelated, allowing you to change the size of each pixel; this gives the rendered content a low resolution look
• Colour Tint: This applies a colour tint to the rendered content

Now because rooms have a "layer order", i.e. your layer can be above or below other layers in the list, an FX layer will only apply its filter to layers that are below it:

Selecting a filter in an FX layer will show you its properties that you can edit to change how it looks; for example, the "Screen Shake" effect allows you to change its Magnitude, Shake Speed and apply a texture for the shaking movement:

GML Usage

Here's the real power of FX layers: you can set up and manage Filters/Effects in real time through GML code to display filters dynamically and achieve the results you want!

You can use the following functions, among many others, to manage Filters/Effects through GML:

• fx_create(): Use this to create a new Filter/Effect (or FX) struct
• fx_get_parameters(): Use this to get a struct containing all the parameters for the filter/effect
• fx_set_parameters(): Use this to apply a modified parameter struct back to your filter/effect
• layer_set_fx(): Use this to apply a new FX struct to an existing layer
• layer_get_fx(): Use this to retrieve an FX struct from an existing layer that has one applied to it

Read this manual page to learn about the various functions that have been provided for working with Filters & Effects.

Do keep in mind that currently the compiler will only load those filters/effects that have been added through the IDE. For example, if you have not placed the "Large Blur" filter in any of your rooms but try to load it in GML using fx_create(), it will not work -- you will first need to add it to a layer in any of your rooms so the compiler knows to load it.

Visual Effects

Fog

This is the scene that we'll be working with:

It looks nice, but it would be better to have depth so you can see what's in the foreground and what's in the background. Let's add a new Filter/Effect layer and implement fog!

You can get a fog effect by using the "Colourise" filter, selecting a blue-ish colour (adjust it to your liking) and using a lower intensity value.

Of course, you will need to ensure that it's placed at the correct level in your Layer Order so that it only affects what's behind the player and the foreground.

Depth of Field

Making high quality games is all about having blurs! Well, it isn't, but it surely does contribute!

You can add a new FX layer for this, select the "Large Blur" filter and adjust the radius to your liking:

You can always add multiple levels of depth by adding various blur layers at different places in the Layer Order.

Dynamic Screen Shake

This is essentially screen shake that you can control at will through code -- that is what you will most likely want anyway, as no one wants to see a perpetual screen shake effect till the game ends.

At the top of your Layer Order, add a new FX layer and apply the "Screen Shake" filter to it. Set the Magnitude and Shake Speed to 0 as we'll be controlling these through code.

Add this code to the Create event of your controller/manager object (or create one) to save some variables we'll require:

shake_fx = layer_get_fx("ShakeLayer");
shake_magnitude = 0;
shake_speed = 1;

• shake_fx stores the FX struct for our shake layer, which we can modify to change how the filter looks.
• shake_magnitude is the intensity of our shake and it starts off at 0 so that there is no shake initially.
• shake_speed is the speed of our shake; while we won't be changing it for this example and it will remain at 1, it may be good to modify it as well along with the magnitude when needed.

Now in the Step event, we'll add code to apply these values to the shake FX and make sure that the magnitude falls down to 0 whenever it's higher than it:

// Apply shake
fx_set_parameter(shake_fx, "g_Magnitude", shake_magnitude);
fx_set_parameter(shake_fx, "g_ShakeSpeed", shake_speed);

// Fall to 0
if (shake_magnitude > 0)
{
	shake_magnitude -= 0.2;
}

The first part applies our magnitude and speed variables to the parameters in the FX struct, and the second part makes the magnitude fall toward 0 when it's higher than it.

Now in the same event, we'll add some code to test our screen shake:

// Test
if (keyboard_check_pressed(ord("1")))
{
	shake_magnitude = 2;
}
else if (keyboard_check_pressed(ord("2")))
{
	shake_magnitude = 6;
}
else if (keyboard_check_pressed(ord("3")))
{
	shake_magnitude = 20;
}

This sets the magnitude value directly when we press a key so we can test it easily, however for your actual game mechanics, you may want to create a new function that sets the magnitude value, and then call that function whenever you need a shake (such as a collision event, a hit condition, etc.).

Now run the game, press the test keys and you will see your Dynamic Screen Shake in action!

There is much more you can do, with all of the filters and effects provided with GMS 2.3.6 and the accompanying GML functions! As always, read the manual!

We're looking forward to seeing your content! Share with us on Twitter using the hashtag #GameMakerStudio2 and drop a tweet to @itsmatharoo for any technical questions.

Happy GameMaking!