Effects

Effects change the visual appearance of objects. They can be added with the Effects dialog. Effects can also be added to layers and layouts, although effects which blend with the background cannot be used on layouts. Effects are also sometimes referred to as shaders or WebGL shader effects, since this refers to the underlying technology that makes the effects possible. Below is an example of the Water effect on an image.

Example of an effect on an image in Construct 2.

Construct 2 provides a library of over 70 stock effects. Adding effects also displays them in the Layout View if WebGL is enabled in project properties. (If WebGL is disabled for a project, the layout view will display as if WebGL is not supported, not showing any effects.) A number of examples of effects are provided in Construct 2's Examples folder.

Multiple effects can be applied to a single object, layer or layout. In this case the effects are chained. The result of the first effect is processed by the second effect, then the result of that is processed by the third effect, and so on.

Support

Effects require WebGL support in order to display. See the Technology section on Canvas renderers for more information about WebGL. In short, not all platforms or computers support WebGL. Effects cannot display on these platforms. To ensure your project still appears correctly when WebGL is not supported, see the section on Fallbacks.

Whether or not effects are supported can also be tested with the Effects are supported system condition.

Blend mode

The Blend mode property works on all platforms, since it is also supported by the Canvas 2D renderer. It is only effects that require WebGL support and fallbacks to be set up.

The Blend mode provides a simple set of pre-defined ways to blend the object with the background. For an example of how blend modes work, see the Blend modes.capx example in Construct 2's examples folder.

Various blend modes available in Construct 2.

If multiple effects are used, the blend mode is applied only to the last effect. For example with three effects, the effect chain is processed normally, and the blend mode is only used to blend the result of the third effect with the background.

Fallbacks

If WebGL is not supported, you can specify what to do using the Fallback property in the Effects category in the Properties Bar.

Effect properties, including the Fallback setting

The Fallback property does not appear if no effects are added, because there is no need to worry about any effects not being supported.

By default the Fallback property changes the Blend mode to Normal if effects are not supported. (Remember the Blend mode property always works on all platforms and computers.) This will result in the object looking as if it had no effects added at all when WebGL is not supported.

The other fallback options allow you to change the Blend mode property to something else. For example when using the Screen effect, a similar result can be achieved by using the Additive blend mode, so Fallback could be set to Set 'Additive' blend. If WebGL is supported, the object will display with its Screen effect. If WebGL is not supported, it will not run the Screen effect but then also switch to Additive blend mode, so the object always blends reasonably with the background.

Finally, the fallback allows you to set the object to be destroyed (or the layer to be hidden). This can be used for optional objects with solely cosmetic effect, so if the effects cannot run the content will simply not be displayed at all.

Testing

Be sure to test with WebGL both enabled and disabled in project properties to ensure your fallbacks work properly and the content always displays reasonably. You cannot assume all your users will have WebGL support, even if they use a browser which supports WebGL, because old hardware or out of date drivers may result in WebGL being disabled. Proper testing is a best practice.

Changing effects at runtime

Objects supporting effects provide common actions to enable or disable effects, or set an effect parameter. This allows you to switch effects or adjust effect parameters at runtime, allowing for greater possibilities and creative uses. To enable or disable layout or layer effects, or change their parameters, use the relevant system actions.

Performance

Using too many effects can cause poor performance, especially on mobile devices. Try to only use effects when it is important to the appearance of the game.

Creating many instances of an object using effects can be very inefficient, since the effect must be processed repeatedly for small areas. If many instances need to use an effect, often it is more efficient to place all the instances on their own layer, and apply the effect to that layer instead. This can improve performance whilst producing the same visual appearance.

Never use effects to process a static effect on an object. For example, do not use the 'Grayscale' effect to make an object always appear grayscale. Instead apply the grayscale effect in an image editor and import a grayscale image to the object, without using any effects. This has the same visual result, and avoids performance-degrading effect processing. Effects like 'Grayscale' should only be used for transitions or making objects only occasionally appear grayscale.

For more information, see the manual section on performance tips.

Tags: