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:
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!