Layer Effects

You can add effects to the layers of your scene. These effects allow to quickly changes the atmosphere and rendering of your game. For example, here is the sepia effect added to the isometric-game example:

Multiple effects are bundled with GDevelop and in the future, you'll be able to install new ones from extensions.

Adding an effect to a layer

In the scene editor, open the Layers Editor.

Find the Base Layer, or another layer, and click on “Add Effect” button.

The next window is showing the effects currently applied on the layer - none of now. Click on “Add an effect”.

A new effect called “Effect” is created. This name will be useful later for modifying the parameters of the effect during the game.

Choose the type of the effect. Click on the selector and choose one.

The window now shows the parameters for the effect - these parameters depends on the effect type that was chosen.

You can let the default parameters or change them now. Values of parameters usually go from 0 (deactivated) to 1.

Try the game with the effect

Launch a preview to see the effect applied. The effect is applied on the whole layer, so all the objects on the layer will be part of the effect.

If you have multiple layers, you can add the same effect to all of your layers.

For example, if you have a Background layer, the base layer and a UI layer (showing the interface of the game), you might want to add effects to the Background layer and the base layer - but not to the UI one
The background color of the scene cannot have any effect applied. If you want to have an effect applied on it, use a Tiled Sprite (using an image with a single color, or some other background image) that you position behind the other objects, with the size of the game window.

Changing effect parameters during the game

Using events, you can manipulate the parameters during the game. It can be useful for different situations: a day-night cycle, a flashback effect, etc…

First, check out the name of the effect and the name of the parameter to change in the Layers Editor. For this, open the Layers Editor, then edit the effects of a layer. Note the name of the effect and the name of a parameter.

In this example, a night effect is called “Effect” and has two parameters “opacity” and “intensity”:

You can then add an event with an action called “Effect Parameter”:

  • Enter first the layer name (don't forget the quotes). For the base layer, enter an empty string ("").
  • Enter the name of the effect, for example "Effect".
  • Enter the name of the parameter, for example "opacity" or "intensity".
  • Finally, enter the new value to be set for this parameter.
All of these names are case sensitive. In particular the parameter names are lowercased. Be sure to double check the name of your effect and parameters.

Here is an example of an action to change the opacity of an effect called “Effect” on the base layer:

List of effects

This list is still being documented. Your help is welcome!

Advanced bloom

FIXME

Color map

Applies a color-map effect to an object or layer.

This works by modifying a reference “color image map” containing all possible colors. In an image editor (like Photoshop), tweak the color balances of this reference color image map. Save it as a new file and use this resulting file as the color image map for the effect in GDevelop.

Download this file and use it as the color map in GDevelop:

color-map-original-template.png : color-map-model-1.png : color-map-model-2.png : color-map-model-3.png :

Don't forget to make changes to the colors of this file using an image editor. Otherwise, no changes will be visible (as the original colors won't be changed).

CRT

Applies a CRT effect, simulating an old cathode-ray tube television.

Displacement

This effect uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.

You can download this example of a displacement map file and use it in GDevelop when setting up the effect:

You can use this effect to apply all manor of crazy warping effects. Currently the r (red) property of the texture is used to offset the x axis and the g (green) property of the texture is used to offset the y axis.

It uses the values of the displacement map to look up the correct pixels to output. This means it's not technically moving the original. Instead, it's starting at the output and asking "which pixel from the original goes here". For example, if a displacement map pixel has red = 1 and the filter scale is 20, this filter will output the pixel approximately 20 pixels to the right of the original.

Drop shadow

Add a shadow under your objects visibles on the layer.

Glow

FIXME

God rays

Cast rays of lights from the top of the screen.

Kawase blur

FIXME

Outline

Add an outline on all objects of the layer having the effect.

Pixelate

Applies a pixelate effect, making display objects appear 'blocky'.

For pixel-perfect or 8-bitgames, prefer changing the Scale mode options in your game properties instead of using this effect.

RGB split

Separate each components (red, green, blue) displayed on the screen with an offset:

Tilt shift

Add blur on top and bottom. Perfect to simulate tiny world or a camera focus effect.

Zoom blur

FIXME