Construct 3 icon

Construct 3

Documentation

Tiled Background

Published 23 Aug, 2017
514 words
~2-3 mins

The Tiled Background object can display an image in a repeating pattern, as shown below.

A Tiled Background objectA Tiled Background object

This pattern can be achieved with a single Tiled Background object, and it is much faster (and more convenient to edit) than using multiple Sprite objects arranged in a grid. Always prefer using Tiled Background objects wherever an image repeats.

Tiled Backgrounds cannot have a collision polygon. They always collide according to their bounding rectangle.

Tiled Backgrounds can have effects applied. For more information, see Effects.

If you wish to have a tile-based game where each tile can be different, consider using a Tilemap object instead.

Tiled Background properties

Image

Click the Edit link to edit the Tiled Background's image in the Animations Editor.

Initially visibile

Choose whether the object is shown (visible) or hidden (invisible) when the layout starts.

Origin

Choose the position of the origin of the object relative to its unrotated bounding rectangle.

Image offset X

Image offset Y

Offset the displayed Tiled Background image by a number of pixels on each axis.

Image scale X

Image scale Y

Stretch the displayed Tiled Background image by a percentage on each axis.

Image angle

Rotate the displayed Tiled Background image by a number of degrees, relative to the offset position.

Tiled Background conditions

For conditions in common to other objects, see Common conditions.

On image URL loaded

Triggered when Load image from URL finishes downloading the image and is ready to display it.

Tiled Background actions

For actions common to other objects, see Common actions.

Set image angle

Change the Image angle property, rotating the displayed Tiled Background image by a number of degrees.

Set image X offset

Set image Y offset

Change the Image offset X and Image offset Y properties, offsetting the displayed tiled background image.

Set image X scale

Set image Y scale

Change the Image scale X and Image scale Y properties, stretching the displayed tiled background image by a percentage on each axis.

Load image from URL

Load an image from a given URL. It is not shown until the image has finished downloading, and On image URL loaded triggers. Images loaded from different domains are subject to the same cross-domain restrictions as AJAX requests - for more information see the section on cross-domain in the AJAX object. Data URIs can also be passed as an image, e.g. from a canvas snapshot or camera image.

Tiled Background expressions

For expressions common to other objects, see common expressions.

ImageWidth

ImageHeight

The original dimensions of the tiled background's current image in pixels. Since tiled backgrounds can be extended over large areas causing the normal Width and Height expressions to return different values, these can be used to get the original size of the source image regardless of the object size.

ImageAngle

Return the Image angle property, in degrees.

ImageOffsetX

ImageOffsetY

Return the Image offset X and Image offset Y properties, in pixels.

ImageScaleX

ImageScaleY

Return the Image scale X and Image scale Y properties, as a percentage.