Table of Contents
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.
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.
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.
Here is an example of an action to change the opacity of an effect called “Effect” on the base layer:
Advanced effects usage
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.
- Download the reference color map image below, or create your own.
- 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.
- 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):
color-map-model-1.png :
color-map-model-2.png :
color-map-model-3.png :
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'.
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.