Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:interface:scene-editor:layer-effects [2019/12/25 21:51]
bouh
gdevelop5:interface:scene-editor:layer-effects [2020/04/05 19:23] (current)
4ian [Layer Effects]
Line 5: Line 5:
 {{ :​gdevelop5:​interface:​scene-editor:​isometric-game-sepia.png?​nolink |}} {{ :​gdevelop5:​interface:​scene-editor:​isometric-game-sepia.png?​nolink |}}
  
-<​note>​Multiple effects are bundled with GDevelop and in the future, you'll be able to install new ones from extensions.</​note>​ 
  
 ## Adding an effect to a layer ## Adding an effect to a layer
Line 62: Line 61:
 {{ :​gdevelop5:​interface:​scene-editor:​action-change-opacity-effect.png?​nolink |}} {{ :​gdevelop5:​interface:​scene-editor:​action-change-opacity-effect.png?​nolink |}}
  
-## Resources +## List of effects
-Original map file for **Color map effect**, Color map are like LUT, you can change colors ​of pixels by modifing a reference color image containing each colours. You need edit the original file with for see changement in GDevelop 5.+
  
-{{:​gdevelop5:​interface:​scene-editor:​colormap-template-16.png?direct |}}+<note important>​This list is still being documentedYour help is welcome!</​note>​
  
 +####  Advanced bloom
  
 +FIXME
 +
 +####  Color map
 +
 +Applies a color-map effect to an object or layer. ​
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​71485828-745d9080-2813-11ea-915d-4dcfc9f67201.png?​nolink |}}
 +
 +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 : {{ :​gdevelop5:​interface:​scene-editor:​color-map-original-template.png?​direct |}}
 +color-map-model-1.png : {{ :​gdevelop5:​interface:​scene-editor:​color-map-model-1.png?​direct |}}
 +color-map-model-2.png : {{ :​gdevelop5:​interface:​scene-editor:​color-map-model-2.png?​direct |}}
 +color-map-model-3.png : {{ :​gdevelop5:​interface:​scene-editor:​color-map-model-3.png?​direct |}}
 +
 +
 +
 +
 +<​note>​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).</​note>​
 +
 +####  CRT
 +
 +Applies a CRT effect, simulating an old cathode-ray tube television.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​crt-effect.png?​nolink |}}
 +
 +####  Displacement
 +
 +This effect uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​displacement-effect.png?​nolink |}}
 +
 +You can download **this example of a displacement map file** and use it in GDevelop when setting up the effect:
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​displacement_map.png?​direct |}}
 +
 +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.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​drop-shadow-effect.png?​nolink |}}
 +
 +####  Glow
 +
 +FIXME
 +
 +####  God rays
 +
 +Cast rays of lights from the top of the screen.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​godray-effect.gif?​nolink |}}
 +
 +####  Kawase blur
 +
 +FIXME
 +
 +####  Outline
 +
 +Add an outline on all objects of the layer having the effect.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​outline-effect.png?​nolink |}}
 +
 +####  Pixelate
 +
 +Applies a pixelate effect, making display objects appear '​blocky'​.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​pixelate-effect.png?​nolink |}}
 +
 +<​note>​For pixel-perfect or 8-bitgames, prefer changing the **Scale mode** options in your [[gdevelop5:​interface:​project-manager:​properties|game properties]] instead of using this effect.</​note>​
 +
 +####  RGB split
 +
 +Separate each components (red, green, blue) displayed on the screen with an offset:
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​rgb-effect.png?​nolink |}}
 +
 +####  Tilt shift
 +
 +Add blur on top and bottom. Perfect to simulate tiny world or a camera focus effect.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​tilt-shift-effect.png?​nolink |}}
 +
 +####  Zoom blur
 +
 +FIXME