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