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:

Adding an effect to a layer

In the scene editor, open the Layers Editor. Find the Base Layer, or another layer, and click on the button to edit effects:

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.

When a preview is running, you can see the changes you've made in real time by clicking on Apply changes to preview. Read more about Live Previews here.

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. Activate the display of parameter names:

In this example, the Dark 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:

Advanced effects usage

While most effects are intuitive enough to be used directly, some might require a bit more knowledge to understand what they do. This section explains these advanced effects.

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.

  1. Download the reference color map image below, or create your own.
  2. In an image editor (like Photoshop or GIMP), tweak the color balances of the reference color image map.
    • e.g. In an image editor, using the invert colors function on the reference map will also invert all of the colors of the objects on the layer that the Color Map effect is used.
  3. Save it as a new file, then use this resulting file as the color image map for the effect in GDevelop.

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

color-map-original-template.png (reference color map image):

Each example color map below relates to the images above with the same name. By shifting the original template's colors, it shifts the colors of all of the objects on that layer.

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 manner 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.

God rays

Cast rays of lights from the top of the screen. This won't work well if shown on top of the background color of the scene. Be sure to use an object acting as a background or a floor.

Kawase blur

This is a faster version than the tradition “Blur” effect. It's recommended that you use this one rather than the “Blur” effect.

Outline

Add an outline on all objects of the layer having the effect. This won't work well if shown on top of the background color of the scene. Be sure to use an object acting as a background or a floor.

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.