Construct 3 icon

Construct 3

Documentation

Layers

Published 16 Aug, 2017
973 words
~4-6 mins

A layer is like a transparent sheet of glass that objects are painted on to. Layers can be used to show different groups of objects in front or behind each other, like the foreground and background. Layers belong to a layout and can be added, edited and removed in the Layers Bar. Layers can be scrolled at different rates for parallax effects, and also individually scaled and rotated, which makes them a powerful way to make interesting visual effects in games.

Layers are also important to add non-scrolling interfaces (or HUDs or UIs) to scrolling games. A layer with its parallax set to 0, 0 will not scroll at all, so any objects placed on this layer will always stay in the same place on-screen. Note that in this case, objects should be placed within the dashed rectangle that appears in the top-left of the Layout View.

A common arrangement for layers might be:

  • HUD (top layer - health bar, UI info etc.)
  • Foreground (objects appearing on top, e.g. explosions and effects)
  • Middleground (main game objects such as the player and enemies)
  • Background (bottom layer - the background)

Note that the Free edition is limited to using two layers only.

Layers can also have effects applied, which affects all content appearing on the layer.

Global layers

Sometimes many layouts in a project have the same content on a particular layer, such as for interface or HUD overlaid on to the game. Changing this content then becomes a chore since changes must be repeated on every layout. Global layers are aimed at solving this problem.

If a layer's Global property is enabled, then every layer in the project with the same name is overridden by that layer. The initial objects, as well as its properties, are used instead of the other layer's own content and properties. Then changes can be made once to the original global layer, and the changes will be applied project-wide.

The layer with the Global property enabled is the "master" layer. On other layers in the project with the same name, the Global property will be read-only and display Overridden to indicate it is being substituted by a different layer. The same layer's content will appear in the editor, and all edits will affect the master layer, no matter which layout it is being edited from.

Layer properties

The properties for a layer can be edited in the Properties Bar after clicking the layer in the Layers Bar. Note this also changes the active layer.

Name

The name of the layer, which can be used to refer to the layer in the event system.

Initially visible

Whether or not the layer is initially visible when previewing. This is different to the Visible in editor property which only affects the Layout View.

Use render cells

Optimise the rendering of this layer for extremely large layouts with a large number of static objects spread out across this layer. This is not normally necessary except for certain types of large game. If this is used incorrectly, it can actually make rendering less efficient, so make sure you can measure a performance improvement before using it. For more information, see the blog post How render cells work.

Scale rate

Change the rate at which the layer zooms if scaling is applied to the layer or layout, a bit like parallax but for zoom. A scale rate of 0 means the layer will always stay at 100% scale regardless of the scaling applied. A scale rate of 100 means it will scale normally.

Parallax

Change the rate at which the layer scrolls in the horizontal and vertical directions. A parallax rate of 100% x 100% means ordinary scrolling, 0% x 0% means it will never scroll (useful for UIs), 50% x 50% means scrolling half as fast, etc. Also useful for multi-layer parallaxing backgrounds.

Transparent

Make the layer have a transparent background. If enabled, the background color is not used.

Background color

The background color for the layer, if it is opaque (i.e. Transparent is disabled).

Opacity

Set the opacity (or semitransparency) of the layer, from 0% (invisible) to 100% (opaque).

Force own texture

Force the layer to always render to an intermediate texture rather than directly to the screen. This is useful for some kinds of effects. However it slows down rendering, so it should be disabled unless specifically needed.

Uses own texture

A read-only property indicating if the layer renders to an intermediate texture. This has a performance overhead. The Force own texture setting enables this, but some other properties also cause the layer to use its own texture, including changing the layer opacity from 100%, changing the blend mode, or adding effects.

Blend mode

Change the way the layer is blended with the background when it is rendered to the display. See the Blend modes example that comes with Construct 3 for a visual demonstration of each.

Effects

Add and edit effects that apply to the whole layer.

Visible in editor

Whether or not the layer is showing in the Layout View. Note this is different to the Initially visible property which only affects previewing. This setting can also be accessed via the Layers Bar.

Locked

Whether or not the layer is locked in the Layout View. Objects on locked layers cannot be selected. This setting can also be accessed via the Layers Bar.

Parallax in editor

If enabled, the Parallax property will also be applied in the Layout View, allowing you to preview what the effect will look like.

Global

See the section above on Global layers. If enabled it will override every other layer in the project with the same name with its own contents and properties. Overridden layers display this property read-only as Overridden. If disabled its contents and properties are unique to itself.