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/26 14:24]
bouh Add list of effects
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 61: Line 60:
  
 {{ :​gdevelop5:​interface:​scene-editor:​action-change-opacity-effect.png?​nolink |}} {{ :​gdevelop5:​interface:​scene-editor:​action-change-opacity-effect.png?​nolink |}}
 +
 ## List of effects ## List of effects
  
-<note important>​This list is in WIP</​note>​+<note important>​This list is still being documented. Your help is welcome!</​note>​
  
 ####  Advanced bloom ####  Advanced bloom
 +
 +FIXME
 +
 ####  Color map ####  Color map
-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 |}}+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 ####  CRT
-Perfect for simulate ​old catodic ​television.+ 
 +Applies a CRT effect, simulating an old cathode-ray tube television. 
 + 
 +{{ :​gdevelop5:​interface:​scene-editor:​crt-effect.png?​nolink |}}
  
 ####  Displacement ####  Displacement
-Displacement is a effect how deform the layer with another image, this image is black and white only. 
-You can download this example of displacement map file. 
  
-{{:​gdevelop5:​interface:​scene-editor:​displacement_map.png?​direct |}}+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 ####  Drop shadow
-Add shadow under your objects ​visible ​on layer.+ 
 +Add shadow under your objects ​visibles ​on the layer. 
 + 
 +{{ :​gdevelop5:​interface:​scene-editor:​drop-shadow-effect.png?​nolink |}}
  
 ####  Glow ####  Glow
 +
 +FIXME
 +
 ####  God rays ####  God rays
-Add rays of light from top of layer.+ 
 +Cast rays of lights ​from the top of the screen. 
 + 
 +{{ :​gdevelop5:​interface:​scene-editor:​godray-effect.gif?​nolink |}}
  
 ####  Kawase blur ####  Kawase blur
 +
 +FIXME
 +
 ####  Outline ####  Outline
-Add outline on all object on layer.+ 
 +Add an outline on all objects of the layer having the effect. 
 + 
 +{{ :​gdevelop5:​interface:​scene-editor:​outline-effect.png?nolink |}} 
 ####  Pixelate ####  Pixelate
-Pixelize the layer.  + 
-For pixel game prefer ​change ​the **Scale mode** options in your [[gdevelop5:​interface:​project-manager:​properties|game properties]].+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 ####  RGB split
-Separate each colors ​with an offset.+ 
 +Separate each components (red, green, blue) displayed on the screen ​with an offset
 + 
 +{{ :​gdevelop5:​interface:​scene-editor:​rgb-effect.png?nolink |}}
  
 ####  Tilt shift ####  Tilt shift
-Add blur on top and bottom. Perfect ​for simulate tiny world or miniature.+ 
 +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 ####  Zoom blur
  
 +FIXME