Adding a layer
Okay, now we want to add some more objects. However, we're going to keep accidentally selecting the tiled background unless we lock it, making it unselectable. Let's use the layering system to do this.
Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. For example, in this game, we want everything to display above the tiled background, so we can make another layer on top for our other objects.
To manage layers, click the Layers tab, which usually is next to the Project bar:
You should see Layer 0 in the list (Construct 2 counts starting from zero, since it works better like that in programming). Click the pencil icon and rename it to Background, since it's our background layer. Now click the green 'add' icon to add a new layer for our other objects. Let's call that one Main. Finally, if you click the little padlock icon next to Background, it will become locked. That means you won't be able to select anything on it. That's quite convenient for our tiled background, which is easy to accidentally select and won't need to be touched again. However, if you need to make changes, you can just click the padlock again to unlock.
The checkboxes also allow you to hide layers in the editor, but we don't need that right now. Your layers bar should now look like this:
Now, make sure the 'Main' layer is selected in the layers bar. This is important - the selected layer is the active layer. All new inserted objects are inserted to the active layer, so if it's not selected, we'll be accidentally inserting to the wrong layer. The active layer is shown in the status bar, and also appears in a tooltip when placing a new object - it's worth keeping an eye on.
Adding tiles
The Jungle Platformer has a tileset in the file Tiles\Tiles.png. Let's import these to a Sprite object and use it as a tile object.
Like you did for Tiled Background, double-click a space in the layout to insert a new object. This time, choose Sprite. The mouse turns to a crosshair again. Click somewhere in the middle of the screen.
The Image Editor opens up, but with some extra windows, because Sprites can be animated. However, we're not going to have the animation playing - its speed will be 0. We'll have a tile in each frame of the animation. Then, we can switch which tile is showing by changing the animation frame.
Right click a space in the Animation Frames pane at the bottom, and pick Import sprite strip.... This lets us cut up grids of images in to animations, which also works with tile maps.
A file open dialog appears. Pick the file Tiles\Tiles.png from the sprite pack. Construct 2 then needs to know how many tiles are in the image. You'll notice Tiles.png is a 12x12 grid of tiles. Enter 12 and 12 and click OK.
Give Construct 2 a moment to cut up the tiles. Now you should have all 144 tiles imported as animation frames! We don't need the first blank frame any more though, so right click on it and select delete.
You might want to resize the Animation Frames window bigger to get a better view of your tiles. Also, you can right-click a space and change the thumbnail size to Large if you prefer big thumbnails.
By default the animation speed is 5, which means tiles will keep changing their image. We want tiles to stay on their current frame, so let's make sure the animation speed is 0. Select the Default animation in the Animations window.
The Properties Bar now shows properties for the animation. Set its Speed property to 0.
Now the tiles won't keep changing their image - they'll stay on the same frame. Close the image editor by clicking the X on one of the three floating windows. Your Sprite tile should now be in the layout!
With it selected, change its name from Sprite to Tile in the Properties Bar. It's always a good idea to give objects an appropriate name.
Creating scenery from tiles
Notice the Sprite object has an Initial frame property. We can use this to switch the current tile. Select the Tile object and change its initial frame to 1:
Notice the image changes to reflect the tile in animation frame 1. This is how we can set up different tiles across the level.
Hold Control and click and drag the tile. You'll create another tile object. Do this again so we have 3 tiles in a row. Select the middle one and set its initial frame to 10. Do the same for the one on the right, but make its initial frame 13. You should now have something like this:
If you're wondering how to double-check which frame number corresponds to which tile, just double-click the tile object. The image editor comes up again with the animation windows where you can check. Remember you can control drag a tile and it makes another tile of the same type, so you don't need to keep typing in initial frames.
Enabling snap to grid
It's going to be a headache if we have to line up these tiles by hand! You can enable a grid to make this easier. In the ribbon, click View and enable Snap to Grid. The default grid size of 32x32 is fine. Our tiles are 128x128, which is a multiple of 32. This makes it easy to snap together tiles whilst still giving some freedom in positioning.
Try dragging around the tiles now. You should find they snap to a 32x32 grid. Now it should be easy to snap the three tiles together.