Tiled Background

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

A 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.

Wrap horizontal

Wrap vertical

Choose how the image repeats on each axis. Mirrored repeat alternately mirrors/flips the image for each repeat. Clamp to edge can be used to prevent wrapping on one axis, for example to wrap an image vertically only, choose Clamp to edge for Wrap horizontal. This is useful to avoid unwanted artefacts due to wrapping on the other axis.

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

On image URL failed to load

Triggered when Load image from URL finishes downloading the image and is ready to display it, or if the load fails.

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.