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
- 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.
- 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.
- 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.
- Return the Image angle property, in degrees.
- Return the Image offset X and Image offset Y properties, in pixels.
- Return the Image scale X and Image scale Y properties, as a percentage.