Individual background tiling

  • 17 favourites

Intro

Look at the following screenshots to understand what we want to achieve.

Instead of creating a whole tile background in an image editing program and loading the background into Construct 2, the tiles are small and will be positioned via a For-Loop into the corresponding layout. Additionally, we'll randomize their brightness, to give a more realistic feel.

We'll be using the following two tiles:

Bathroom_tile.png

Wood_tile.png

Setting it up

In the project properties, I used a window size of 400, 400.

Load the wood sprite, name it "WoodSprite" and set the origin point to 0, 0.

Create two global variables loopVarX and loopVarY.

Furthermore, every time the layout is loaded, these have to be reset, so we need to add the following event:

System -> On start of layout with these actions

System -> Set loopVarX to 0

System -> Set loopVarY to 0

Now we need two loops

- to position the wooden tile in horizontal direction

- to position the wooden tile in vertical direction

The tile size of the wooden tile is 20x100. So we need 4 rows (=100 tile height x 4 = 400 pixels) and 20 columns (20 tile width x 20 = 400 pixels), thus covering our window size.

Yes, I am assuming we're not moving anywhere - if this is the case in your game, you need to calculate the correct loop amount in both directions

Let's add a new event:

System -> For -> 1 to 5 with no action at all

Note: I'll explain later why 1 to 5 and not 1 to 4!

Add a new sub-event under this loop:

System -> For -> 1 to 20 with the following action

System -> Create object -> WoodSprite on layer 0 at loopVarx[]20, loopVarY[]100

Since the loop is only counting, we need another action to count in x direction:

System -> Add 1 to loopVarX

Good, now we managed to make one row of wooden tiles. The loopVarX variable has to be reset to 0 for the next row and the loopVarY variable incremented by one.

Add a new blank sub-event (for the 1 to 5 loop!)

Insert the following actions:

System -> Set loopVarX to 0

System -> Add 1 to loopVarY

That's it! Run your layout and see what happens.

Uhm, not very fascinating.

Go back to the layout, click on the wooden tile and give it an effect "Brightness".

Before you re-run the layout, insert the following action the 1 to 20 loop:

WoodSprite -> Set effect "Brightness" parameter 0 to random(10)+90

Awesome, looks much better now - the tiles are visually different! Still, let's make them better...