The first element we’ll place in our scenery is the background image. As you saw in the game, it gives the sensation that the ship is flying through space. However, if you pay closer attention, you’ll realize that the background image is constantly moving to the left while the ship itself isn’t moving at all. This technique is very common in 2D games and works to give the sensation of movement.
Drag the image space_background.jpg from the Images panel to the Scene View panel that’s just above it.
You should see the selected image with a yellow frame.
We have to place the background image at position (0,0) in the scene (the origin point for the coordinates of the scene is the upper left corner), so we set the properties of x and y to zero in the Properties panel.
With this, we now have a space background for our game. If we wanted a static background, we’d now be finished. However, what we want is to achieve the effect of movement. There are many ways to achieve this. One very common solution is to place several copies of the image, one immediately after the other, with no space, until they take up the whole scene. This trick involves moving the images to the left, and when the leftmost image completely leaves the scene, it is placed in the queue to the right of the rightmost, with the process being repeated indefinitely.
We’re going to do something similar in this example. We’ve made the background image the same size as the scene, meaning two images will be enough for us to get that effect. We’re going to move the two images to the left until the first one completely leaves the scene. In that instant, the second will take up the whole scene, but if we keep moving it left, the background will start to become visible on the right. Instead of continuing moving, what we’re going to do is move both images to their original positions; that is, the first will take up the whole scene, and the second will be to the right of the first, off-scene, and then continue the movement. In the following image, you can see what the images will be doing as time goes by.
Therefore, we’re going to repeat the same operation we just did with the first image to have a second; that is, drag the image space_background.jpg into the scene again.
Be careful. Since we’re dragging two copies of the same image, it’s easy to get them confused. However, the last one dragged in will always be the selected one, so you can easily tell them apart. Also, we can always consult the Asset Manager panel to know which one we’re working with in each moment. Now, we have to put the second image to the right of the first. That means its x property will have a value equal to that of the image’s width, which is 1024 in this case. The y property will still be 0 because they’re both at the same height. So, x=1024 and y=0.
We now have two images, one right after the other. Now, we’re going to treat the two images as if there were one double-wide image, so that when half the new grouped-together image leaves the scene, the whole image goes back to its original position. While it ends up being the same thing, the operations are simpler.
To treat both images as if they were only one, what we have to do is make the second one the daughter of the first. This is done from the Asset Manager panel on the left. In this panel, the scenes and layers of our game are represented. In this example, we have a scene called scene0, and below it, a layer called layer0. Under the layer, we have the two images we’ve dragged in. So, to make the second image the daughter of the first, all you have to do is drag the second over the first. As you can see as you drag the element, the system proposes places to leave them.
For one element to be the daughter of another, that element must be on an inferior level within the tree, as you can see in the following image:
Before going to the logic desktop, we’re going to rename the scene and layer to names that make more sense. To do this, in the Asset Manager panel, double-click on the scene and chance the name from scene0 to game. Repeat the process to rename layer0 to background. You should have something that looks like this:
Now we’re going to go to the logic desktop to create the movement of these two images. There are two ways, either by clicking on the button in the main menu, or by clicking on the button at the bottom left corner of the Asset Manager. Click on either of them.
As you can see in the following image, the logic desktop is initially made up of the Logic chart, Logic tree, Asset Manager, and Preview panels.
Let’s get to know them little by little. Let’s start with the Asset Manager panel, where you will see three tabs:
For the moment, let’s just focus on the 2D tab, which is selected by default. In the panel, there is a tree with two divisions, layers and scenes. In layers, you should see the layer that you just created and named background, and below it, the two background images. In scenes, you should see the scene we just titled game, made up of a background layer.
We’re going to start to implement the logic of the game by creating a script. Scripts are those containers where we will include our logic. You can create as many scripts as you need, even creating scripts within other scripts, to organize your logic as you prefer. In this case, we’re going to use this first script to create the logic that controls the background. To the left of the editor, you’ll see there are several tabs arranged vertically. Click on the one called Scripts and drag the Script element to the Logic Chart. If you prefer, you can also perform the same action by clicking on the button of the MyFirstGame element in the Logic Tree panel.
Now select the script by clicking on it. When it’s selected, a small halo will appear around it in the same color as the box. Selecting it also causes the Properties tab to automatically open. In fact, every time we select an element in the Logic Chart, this tab will automatically open, showing the properties of the selected element. Scripts only have two properties: name and parent. Click on the name value of the property and change it to Background. Press enter to make the change.
We said before that the script is a container. To enter into a script and see its content, you can double-click on it in the Logic Chart or simply select it in the Logic Tree panel. You’ll see a new empty panel open, but in this case it’s the Background script, as you can see both in the upper part of the panel as well as in the Logic Tree. We can use either the upper locator or the Logic Tree to navigate between the different scripts that make up our game.
The logic is created by connecting boxes that perform different functions. In this case, since we want to move an object, we’ll use the MoveFromTo box, which is located in the Blackboxes tab, under the Animation category. Drag the element to the logic panel. You can check the complete description of this box on this link.
You’ll see a box pop up with several sections.
These boxes are called Blackboxes. Blackboxes provide micro-functions that we’ll be connecting to obtain more complex behavior. Let’s look at one in more detail.
All blackboxes are made up of three parts:
- Header. This section only contains two pieces of information:
- type: the type of blackbox (in this case, MoveFromTo).
- name: this is the name the developer gives this specific box.
- Connectors: connectors serve to control the blackbox’s lifecycle. They have two types of elements:
- activators: An activator is a connector that starts one of the functions that the blackbox provides. All blackboxes have at least one. In the case of MoveFromTo, there are three activators which serve to start, pause, or stop the movement of an object.
- triggers: Triggers are signals that the blackbox makes to report on important events within the context of the blackbox. For example, in MoveFromTo, we can know when the movement starts, when the moved object arrives at its destination, when it’s paused, or when it’s stopped. If we unite these triggers to activators in other blackboxes, we can create logic gates, which, when combined with others, results in a video game.
- parameters: parameters serve to supply and/or collect information to/from the blackbox. There may be different numbers of input and/or output parameters, or there might not be any at all. Parameters are of a type of specific information. This means that it is not possible to assign any information to a parameter that does not correspond to it. In any case, there are two types:
- input parameters: these are marked with a triangle on the left. Input parameters are the gaps where the developer can deposit data that the blackbox reads when it runs. Some parameters are obligatory and others are optional. In MoveFromTo, all the parameters are input. For example, the target parameter is obligatory and indicates which object to move.
- output parameters: these are marked with a triangle on the right. Output parameters are the recipients where the developer can place the data the blackbox produces when it’s run. MoveFromTo does not have any output parameters.
After this explanation, we’re going to use MoveFromTo. The first input parameter is target, or the object we want to move; that is, the blackbox will move the object we indicate in this parameter. To assign the parameter drag the object space_background mother (not the daughter, which has the same name) from the Asset Manager panel to the target parameter.
You’ll see that when you hover the image over the target parameter, this reacts and turns orange, indicating that the expected type of parameter (Object2D) coincides with what you’re dragging, meaning you can drop it. When you do this, you should see the parameter turn yellow, indicating that the parameter is assigned
The next parameter is seconds, of the number type. In this parameter, we will indicate the time in seconds that we want the object to move from the start position to the final position. To pass a value to the parameter, we have two possibilities. The first is to drag a number-type parameter from the Parameters tab, Basic section over the seconds parameter.
However, there’s a much easier shortcut, which is to double click on the seconds parameter. This will create a variable type of parameter (numeric in this case) with a value of 1.
We’re going to replace 1 with 5, since that’s how long the background takes to completely pass. Later, you can play with other times to see the different effects. To change it, select the seconds parameter and in the Properties tab on the left, change the content property to 5. You’ll see the name (the name property) will also change to a value of 5 so that you can see in the parameter its value without having to open the properties tab.
The loop parameter serves to repeat the animation indefinitely, which is what we want now. We’re going to move the image from where it is until it completely disappears to the left, and then we want to repeat the movement until we stop it. So, double-click on loop and set its content property to true.
Now, all we have left to do is indicate the initial and final positions of the animation, which correspond to fromPosition and toPosition. Both parameters are Vector2D type.
All positions in a 2D game have a value on the X axis and another on the Y axis. In the same way, Vector2D-type data have an X and Y value that we will use to work with 2D positions. As we said at the beginning of the tutorial, the origin of the coordinates is the upper left corner of the screen. All the points to the right of the origin will have a positive X value, while those to the left will have a negative X value. On the Y axis, all the points below the origin have a positive Y value, while those above the origin have a negative value.
With this, we now have everything we need to finish our movement effect. Double-click on the fromPosition parameter. In its properties, you will see that content has two values: x and y. These are set to zero by default, and that’s just what we need, so we don’t need to modify anything. You can change the name property now, if you’d like, to something more descriptive, like “(0,0)”.
Finally, do the same with toPosition, but on this occasion, put in the values x=-1024 and y=0. Just remember that since the origin is in the upper left corner, if we want to move something left, out of scene, it must always have a negative number. Also, change its name to “(-1024,0)”.
We’ve now finished our first blackbox. However, to get it to work, we have to activate it. That’s what connectors are for. Click on the Connectors tab on the left and drag out an InputConnector to the LogicChart.
Now we can connect the first connector to the start activator, and the second to stop. The connections are made by clicking on the activator’s or connector’s circle, and then clicking on the other.
Since the names in1 and in2 are just a bit cryptic, we’re going to rename them on (for the one that activates start), and off (which activates stop). As we did above, this is done from the properties tab.
If we ran the game now in the Preview panel, we’d only see a static background, since the system only shows the first scene by default. But since we still don’t have anything connecting to our on connector, the background isn’t moving. So let’s hook it up. To do this, we need to go up a level (remember we’re still inside the Background script) by double-clicking on the background of the panel (in any place inside the quadrilateral where there isn’t an element). You can also go up a level from the LogicTree panel by clicking on the MyFirstGame element, or from the address in the header of the Logic Chart panel.
From the main level (also called the root level), we can now connect our gameStarted connector to the on activator of our Script. The process is the same, click on one and then click on the other.
Now press play in the Preview panel. You should see the background moving smoothly to the left.29/02/2016 / No Comments
My first game
- My first game with WiMI5
- Signing up
- Before getting started
- Designing the game
- The background
- The ship
- The asteroids
- Collisions between shots and asteroids
- Collisions between the asteroids and the ship
- Collisions between the ship and the edge of the scene
- Game over
- And now what?