Individual background tiling

  • 18 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 82.44 KB


3,017 visits, 6,952 views


Offsetting the tiles in every second row

Now the following is for advanced users. You sure may have noticed that the last screenshot does not look like the intro screenshot. I have offset every second column half-way up.

The following adjustments are now required.

Change the second for loop from "1 to 20" to "1 to 10".

In the Create object action change the loopVarX[]20 to loopVarX[]40.

Good, if you run the code now, you'll notice that every second row is blank.

Now, we'll simply add another loop as an additional sub-event under the "1 to 5" loop. You can basically copy the whole event and paste it underneath. Be sure that

a) in between the loops you have the reset of the loopVarX variable to 0

b) change the x- and y-coordinates of the wooden tile in the second loop to loopVarX[]40+20, loopVarY[]100-50*

Now that is what we wanted. Remember I asked you in the beginning to set the loop from 1 to 5 instead of 1 to 4? Change the loop from 1 to 4 and you'll notice that on the bottom part, you'll see that some tiles are missing. Every second column is composed of 5 rows.

Finally, I inserted an OK-Button to jump to the next Layout.

Complete event sheet:

Bathroom floor tiles

In Layout 2, I did the same thing with 21 x 21 tiles.

Differences here:

1. Tile size is 20 x 20 pixels, where the first and last rows/columns in the png file are transparent

- why? because I used here a tiled background made up of grey

- and why that? The Brightness parameter change would affect the color in between the tiles, so I wanted to have no difference here.

2. The origin point is at 10,10 - the center of the tile. Therefore we need the loops to go up to 21.

Event sheet:


  • Order by
Want to leave a comment? Login or Register an account!