Tiled backgrounds in Construct 3
In addition to the normal sprite object in Construct 3, the engine also offers a tiled background object that is used for repeating pattern backgrounds. This is very useful if you want your game to be something that can be scrolled endlessly, or you want to fill large areas without using a large image.
Just like a ceramic or flooring tile, it’s important that the tile you use creates a desired pattern on the area you fill it with.
We’ve created this brick wall tile for you to learn how it works! It’s an example of a seamless tile, which repeats without an obvious seam between the individual tiles:
For this example, you can go ahead and download the file. Let’s open Construct 3 and add it as a Tiled Background-object next!
Step 1: Adding a Tiled Background-object
Right-click the empty field on your layout and select Insert New Object > Tiled Background. Crosshairs appear – click anywhere on your layout.
You are shown the Construct 3 tiled backgrounds editor, which works very similarly to the animations editor. If you want, you can draw your tiled background tile yourself – but we recommend clicking the Folder-icon to import your downloaded image.
Close the animations editor. You have now created a Tiled Background-object!
Step 2: Put the object in place and scale it
One option is to move your background by dragging and dropping, and to scale your background, by dragging on the corners.
However, you can do this with more precision from your Properties-panel.
For a background that covers the whole HD-landscape, you can try these Size and Position-settings (found under ‘Common’):
Learn more about tiled backgrounds in the official Construct 3 manual here:
https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/tiled-background
Do you have multiple tiles you wish to use many times? Then you can read about tile maps:
https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/tilemap
In our next tutorial, we’ll take a look at the text object in Construct 3:
Return to Tutorial 3 starting page: https://playableconcepts.aalto.fi/tutorials/tutorial-3/