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 17:17]
4ian
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 72: Line 71:
 ####  Color map ####  Color map
  
-Applies a color-map effect to an object or layer. ​You can change colors of pixels by modifing a reference "color image map" containing each colours. To try the filter, **download this file and use it as the color map** in GDevelop when setting up the effect:+Applies a color-map effect to an object or layer. ​
  
-{{:​gdevelop5:​interface:​scene-editor:​colormap-template-16.png?direct |}}+{{ :​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
  
 Applies a CRT effect, simulating an old cathode-ray tube television. Applies a CRT effect, simulating an old cathode-ray tube television.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​crt-effect.png?​nolink |}}
  
 ####  Displacement ####  Displacement
  
 This effect uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. 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: 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 |}}+{{ :​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. 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.
Line 96: Line 113:
  
 Add a shadow under your objects visibles on the layer. Add a shadow under your objects visibles on the layer.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​drop-shadow-effect.png?​nolink |}}
  
 ####  Glow ####  Glow
Line 104: Line 123:
  
 Cast rays of lights from the top of the screen. Cast rays of lights from the top of the screen.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​godray-effect.gif?​nolink |}}
  
 ####  Kawase blur ####  Kawase blur
Line 112: Line 133:
  
 Add an outline on all objects of the layer having the effect. Add an outline on all objects of the layer having the effect.
 +
 +{{ :​gdevelop5:​interface:​scene-editor:​outline-effect.png?​nolink |}}
  
 ####  Pixelate ####  Pixelate
  
 Applies a pixelate effect, making display objects appear '​blocky'​. 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>​ <​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>​
Line 121: Line 146:
 ####  RGB split ####  RGB split
  
-Separate each components (red, green, blue) displayed on the screen 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 to simulate tiny world or a camera focus effect. 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 FIXME