Platform-Style Video Games with Construct

Adding a Background Image

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

This video shows how to add a repeating background image to the game level.

Keywords

  • Construct 2
  • Tilemaps

About this video

Author(s)
Lee Stemkoski
First online
15 February 2019
DOI
https://doi.org/10.1007/978-1-4842-4446-3_5
Online ISBN
978-1-4842-4446-3
Publisher
Apress
Copyright information
© Lee Stemkoski 2019

Video Transcript

Lee Stemkoski: In this video, we’ll start with the project we set up in the previous video. You’ll learn how to add a background image and create a tilemap object to do our basic level design.

So to begin, here’s the file we had worked on last time. We’ve set up different layers to keep our project organized. We’re going to start by adding a background image. It will be very important to make sure we have the Background layer selected. So in the upper right panel, go ahead and make sure that’s selected, and then move your mouse over to the Main panel over the layout. When you right click, go ahead and right click and a little menu will pop up. We’ll select the first option, Insert New Object.

These are the different things you can add to a game created with the Construct game engine. To begin, we’re going to create a background image. Select the Tiled background object. Just click on it once and down at the bottom, we have an option to give this object a name, which we usually will. We’ll give it the name Background. Simple, but that’s what it is. Then click on the Insert button. And you’ll notice that the mouse cursor has turned into a cross hairs and there’s a little tool tip saying which layer we’re adding this to. We’re adding it to the Background layer.

Go ahead and click anywhere you like. It doesn’t matter if you click in a certain position because it will be easy to move this around later if we wish. And a window will appear. This is the image editor window. It contains a lot of paint style tools where you could design your own background, but in this case, we have a preloaded file provided for us that we’ll use for the background image. Click on the folder icon at the top, and then we’ll navigate to our previously downloaded and extracted assets file. So in the Jumping Jack Assets folder, select these sprites subfolder. And in a directory called scenery, go ahead and select a background.png. The background will appear in this window here. Once you’re sure that it looks fine, go ahead and click on the x of the image editor window and here we’ll see that our background image is selected.

Now what I’d like to do is click and drag. I want this image to cover the entire background window. First, I’ll position the top left corner to align with the top left corner of the layout window. You can overlap a little bit. That’s all right. And these white boxes surrounding the selected object. You’ll notice if I positioned my mouse over them, the cursor turns into a double-sided arrow, which means I can click and drag to enlarge this window. I’m actually going to click and drag moving it all the way over to the edge of the window and you’ll notice that the patterns actually repeating. That’s one of the interesting things about a tiled background image object. Rather than stretching or shrinking the image, the image will be repeated across our layout window. That looks great. Now we’ll go ahead and lock this layer, so we don’t make any additional changes to it later. Let’s click on that lock icon and next we’ll go ahead and add a tilemap object.