Translations

Know another language? Translate this tutorial!

Stats

3.7K visitors
33.9K page views
1,398 translation visitors
7.9K translation page views

Generating a Random Tile Map

Favourite 71 favourites
Tutorial written by UnrealMediaOriginally published on 9th, August 2012 - 3 revisions

Overview

I’m going to demonstrate the method I use to generate random maps based on tiles. This is useful when you want to create levels for your game, but don’t want/don’t have the time to sit and create each level yourself.

I have attached a basic .capx file for learning purposes: Download .capx

Setting up the environment

Because I’m slightly pedantic about having a clean work environment, the first thing I do is create a new layer called ‘Tiles’ which will hold our tiles and rename ‘Layer 0’ to ‘Background’. I’m also going to change the layout and window dimensions to 800, 640.


Construct arrays

Construct2 arrays take a bit of playing around with to fully understand. The best way (I found) was to just jump straight in and try a few things with them. It’s a good idea to read up on these first, but I feel that to get a good understanding of anything, hands on experience is the way to go. If you haven’t already done so, please refer to this tutorial on the basics of arrays:

http://www.scirra.com/tutorials/307/arrays-for-beginners

The method we are going to look at in this tutorial involves using an array to hold the animation ID of each tile.

1) Create a new array called ‘Tile_Array’ on the ‘Tiles’ layer.
2) Open your events file and create the following event:

EVENT: System: On start of layout
ACTION: Tile_Array: Set size (25, 20, 1)

This makes our array 25 values long on the X-axis and 20 values high on the Y-axis and 1 value deep on the Z-axis. If you would like a visual representation of this, please refer to the guide I linked to earlier.

Once the array has been created, we need to set the value for each element. The way we do this is to loop through each X and Y element and generate a random number which will correlate to the animation frame of our tile set.

Add the following to your event sheet as a sub event of ‘On start of layout’:

EVENT: For each element: XY
ACTION: Tile_Array: Set at XY (Tile_Array.CurX, Tile_Array.CurY, Floor(Random(0, 5)))

This will go through each X element and assign a random number between 0 and 5 on the current element. I use the Floor() function for all of my random number generations. It’s a personal preference and isn’t compulsory, however, for the sake of this tutorial, I’d recommend using it.

We’re going to leave the events like that for now and move on to adding our tiles into the environment.


Adding the map tiles

Go back to your layout and add a new entity called ‘Map_Tiles’ to the ‘Tiles’ layer. I am going to use tiles from the Jungle Sprite pack that comes with a paid version of Construct. Open up the animations for the ‘Map_Tiles’ entity and right click inside the ‘Animation Frames’ panel. Select the ‘Import Sprite Strip’ option and locate the sprite sheet you would like you use. Input the correct dimensions of your sprite sheet and you should be able to see each tile loaded into an individual frame inside the ‘animation frames’ panel. In the properties for the ‘default’ animation, change the speed to 0 so that our tiles will stay static.
I am going to re-size my ‘Map_Tiles’ sprite down to 64 x 64 so I can create a more detail map. Close the animations window and drag the ‘Map_Tiles’ sprite off the visible layout.

Generating the tiles

Now that we have our array setup, and our tiles imported, it’s time to generate the tiles based on the array. Go back to your events sheet and add the following action under the For each XY element statement:

ACTION: System: Create object (Map_Tiles, “Tiles”, 32 + (Tile_Array.CurX 64), 32 + (Tile_Array.CurY 64))

Now, let me explain what’s going on here as this will change depending on the size of your tiles. The tiles I am using are 64 x 64. The origin point of each tile is in the middle of the sprite (32px from the edge). This isn’t a problem, but to get the tiles to line up in the top left corner of the screen, we must accommodate for the 32 extra pixels, which is why we add 32 at the start of both the X and the Y value. The Tile_Array.CurX and Tile_Array.CurY are used to get the current position in the array, so we can place the tiles in the order they sit within the array. Finally, the * 64 is the width of the tile, so that the following tile won’t overlap the one before it. Feel free to change these values later and see what happens when you generate your map.

Finally, we need to set the animation frame of each tile to the random number we generated. Simply add the following action under the previous ‘Create Object’ action.

ACTION: Map_Tiles: Set frame: Tile_Array.CurValue

That’s it! Now run your game and check out the sweet map it just generated for you. Hit the refresh button and you will see that the map is different.


As you can see the tiles I used don't exactly match up won't work as a generated map, however, the purpose of the tutorial still stands. Play around with some different tile sets and some more conditions. I use this method to create a randomized mine for a mining game I created. It works very well, and with some tweaking, I got it generating better items the further down the mine the player got. This is just one example of how this can be modified to suit a range of games.

Good luck with all your development!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

1
ZakChaos 2,738 rep

I've been thinking about this topic, and how to do it for the last week, ur tutorial answers alotta questions I had, really looking forward to checking it out when I get home from work.
Thanks again man!
-zakchaos

Thursday, August 09, 2012 at 5:57:20 PM
1
Yswellin 3,629 rep

If I wanted to make only one of the animation frames solid, and the others passable, how would I go about doing that? I think the solid behaviour will apply to all the frames.

My thinking is that if you wanted to make a maze, you'd have one tile for grass or whatever is passable, and one tile for rocks, which is impassable.

Sunday, September 23, 2012 at 6:23:19 PM
1
hypercross 2,488 rep

yes, i would like to see that too @Yswellin, so it's like the rocks are at RANDOM places and has the SOLID behavior, so u have to move around the rock to get through, maybe put some 0 on the array? or something in your equation? sorry if i confuse u all...

Sunday, October 07, 2012 at 8:09:54 AM
1
Casaubon 3,160 rep

Thank you very much, I tried this for 2 days by myself for my TBS pixelart game before checking your tut and always screwed up. For other newbs like myself some hint; the parameter lines for arrays like
ACTION: Tile_Array: Set at XY (Tile_Array.CurX, Tile_Array.CurY, Floor(Random(0, 5)))
need to be split in 2 different rows, defining X and Y separately... maybe it was different with a former construct version in the past.
Very straightforward tutorial, and much appreciated!

Friday, March 08, 2013 at 11:35:37 AM
1
Timshark 2,415 rep

Great Tutorial! Does anybody know how you could add another random value to the tiles on setup. E.g. A random tint or other effect. Or maybe rotation. Where do you do that on this setup...

Monday, April 08, 2013 at 1:50:21 PM
1
Lordshiva1948 38.7k rep

Thank you so much

Thursday, June 06, 2013 at 12:21:01 PM
3
jojoe 5,960 rep

"ACTION: System: Create object (Map_Tiles, “Tiles”, 32 (Tile_Array.CurX 64), 32 (Tile_Array.CurY 64))"

You forgot the * before the 64

@UnrealMedia ^^

Sunday, September 15, 2013 at 9:16:36 PM
1
ValhallaInfinite 979 rep

Thank you this was very helpfull

Friday, March 14, 2014 at 5:28:57 PM
0
Geywyd 364 rep

great tutorial but how do I put this in a 2D style game terraria?

Sunday, July 24, 2016 at 7:36:33 PM
0
antoineguedes 808 rep

Great tutorial!
Very well explained, and easy to reproduce.

Just a note, I think you forgot the * in following text: ACTION: System: Create object (Map_Tiles, “Tiles”, 32 (Tile_Array.CurX 64), 32 (Tile_Array.CurY 64))

I mean (Tile_Array.CurX * 64) and (Tile_Array.CurY * 64).

Tuesday, August 23, 2016 at 11:56:07 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.