What we want is for the ship to move vertically to the limits of the scene using the cursor keys, and for it to shoot when we press the spacebar. To create the ship, we have to go back to the scene editor. To do so, we click on which is at the bottom of the Asset Manager panel.
Instead of using a static image for the ship, we’re going to create a sprite. A sprite is an animated image. In reality, it’s an image that is itself made up of other images known as frames, which when grouped together form animations. The animations are achieved by painting the frames that make up the animation consecutively. In the case of the ship, we are going to create two animations:
- fly: the ship with a slight swaying. We’ll achieve this with just two frames.
- explosion: the ship exploding. We’ll use four frames in this case.
To begin designing the ship sprite, we have to create a sprite definition by clicking on the button at the bottom of the Sprites panel. The editor will ask you to select the image from which to create the sprite, which is spaceship.png in this case. Therefore, choose this image in the dropdown list and press Apply.
Once the sprite is created, double-click on the spaceship text of the element and rename it Spaceship. Now we’re going to create the two animations. As you’ll probably have realized, when a sprite is created, an animation called animation0 is created by default. To create the second animation, click on the option Create animation with the sprite’s icon. Double-click on animation0 and rename it fly. Repeat the process to change the name of animation1 to explosion.
Next, we have to design each animation by establishing the size, number, and speed of its frames. Click on the sprite’s fly animation to see its properties:
- animation: this is the name of the animation and it cannot be modified from properties.
- offsetX: is the horizontal shift from the image’s origin coordinates (its upper left corner) from which the first frame begins.
- offsetY: is the vertical shift from the image’s origin coordinates from which the first frame begins.
- frameWidth: is the width of the frames that make up the animation.
- frameHeight: is the height of the frames that make up the animation.
- frameNumber: is the number of the frames that make up the animation.
- loop: indicates if the animation is repeated indefinitely or only performed once.
- fps: is the number of frames per second the animation goes at (the higher this number, the faster the animation will run).
The data you need are described in the last image, where the ship’s sprite is described with its dow animations. However, you can copy from the following animation:
Do the same for the explosion animation, but this time with the following data:
We have now created the ship’s sprite. Now we’re going to continue designing our scene. It’s a good habit to separate the elements that make up our game into different layers. The most common way is to create a layer for the background, another for the mobile elements, and another for the user interface. Right now, we only have one for the background, so we need to create one for the mobile elements.
To create a new layer, you have to click on the button in the game scene in the Asset Manager panel. This will add a new layer called layer0. Double-click on it and change its name to action. You should see a structure of layers and elements like the one in the following image:
You have to keep in mind that when you drag objects from the Images or Sprites panels into the scene, these will be assigned to the layer that selected in the Asset Manager. Therefore, if you drag out the Spaceship sprite from the Sprites panel, we’ll see that it’s assigned to the layer we just created.
You can see the ship playing the animation assigned by default in the defaultAnimation property of the sprite, which is fly in our case. You should be able to make out a slight swaying in the ship. If you go to the Properties panel, you’ll see that there’s an animation property with the list of the Spaceship sprite’s animations. Select the explosion animation to see how it’s behaving. When you finish, leave the fly animation selected. Click on the Spaceship element in the Asset Manager or directly on the Scene Preview to see its properties. Change the anchor property to the CENTER option, so that the origin of the ship’s coordinates is its center. Finally, modify the X and Y properties so that they’re 115 and 290 respectively; that is, centered vertically and to the left of the scene.
Let’s go back to the logic editor (remember ) and press the play button (or click on any part of the panel) in Preview to see the results so far. You should see the background moving to the left and the ship with a slight swaying motion. Click on stop when you’re finished.
NOTE. If you don’t click on stop , the changes you make while the game is in play will be discarded when you press stop.
The next thing we’re going to do is implement the ship’s control via the cursor buttons. To do this, go the main or root level (remember, you have several ways of doing this).
We’re going to create a new script where we’ll include all the logic related to the ship. Drag a Script element from the Scripts tab and rename it Spaceship.
Go into the script by double-clicking on it and creating two input connectors called on and off.
In this logic level, we’re going to create a script for each function we’re going to program the ship with, such as keyboard controls, collisions, shots, etc. We’re going to start with the cursor controls, for which we’re going to create a new script called Input by dragging a Script element from the Scripts tab. And just like we did with the mother Spaceship script, we’re going to create two new input connectors called on and off.
Here we’re going to read the keypresses that we’re interested in. In this case, the up cursor, the down cursor, and the spacebar for the shots. There is a box called KeyListener in the Devices category whose function is just that. Drag out three KeyListener to the logic.
We’re going to use the first to listen for the up cursor, the second for the down cursor, and the third for the spacebar. Click on the first and in the properties tab, select the Up arrow value in the key property. Select the values Down arrow and Space in the second and third boxes. Check that in the headers of the three boxes, you can see the key that each one is listening for.
The KeyListener blackbox notifies with a trigger each time the selected key in its key property is pressed (keyDown) or released (keyUp). However, to get it to start listening for the key, it’s necessary to call the on activator, and to get it to stop, to call the off activator.
To keep this script clean, we’re not going to include the logic to make the ship move here. Instead, we’re going to put in five output connectors to notify other scripts and/or boxes that these keys have been pressed. Therefore, include 5 output connectors with the following names:
- startUp: the up arrow has been pressed.
- stopUp: the up arrow has been released.
- startDown: the down arrow has been pressed.
- stopDown: the down arrow has been released.
- fire: the spacebar has been pressed.
Now, all we have left to do is connect the on and off input connectors to the on and off activators of the three KeyListener. And then the output triggers of each box with their corresponding output connectors
We still have to connect this script with the connectors on the upper level, which means we need to go up a level by double-clicking on the background and connecting the Input script with the on and off connectors of the Spaceship script.
And go up another level to connect the Spaceship script to the initial gameStarted event.
Now we’re going to make the ship move up and down when the user presses the up and down arrow keys. The exact behavior will be that while the up and down cursor keys are pressed, the ship will move up or down at a constant speed, and when the key is released, the movement will stop. Should both keys be pressed simultaneously, the ship will not move. To create this logic, we’re going to create another script inside the Spaceship script, which we’ll call Movement.
Inside the script, four input connectors will be created, called:
Go back to the upper level and connect them to the outputs of the Input script.
Let’s go back to Movement to create the logic. To move the ship, we’ll use a variable we’ll call speed to indicate at all times at what speed the ship should move. Depending on the input connectors that are activated, what we’ll do is modify the speed. That is, the ship starts off stopped (speed zero). If the up cursor is pressed, we’ll set a speed of Y=-200 (vertically up). If the down cursor is pressed, we’ll set a speed of Y=200 (vertically down). The X value doesn’t change because we’re only moving the ship vertically. However, we’re going to use a Vector2D-type variable to be able to move on both axes in possible ampliations of the game, so we’ll set the value of X always at zero in this example. So, we’ll either add or subtract (x=0, y=200).
Since what we’re doing is just adding or subtracting speeds, we’re going to use an ActionOnParam box. This blackbox is used to perform simple actions on an input parameter. Drag an ActionOnParam box from the ParametersManagement category to this script. If you click on it, you’ll see it has two properties:
- onTargetType: indicates the type of parameter it accepts. Vector2D works by default, and that’s just the type we’re going to use.
- action: a list of all the actions you can perform on the type of parameter. Select the subtract action named here with the “-” sign.
We can see that after having selected the subtract operation, a second input parameter appeared to introduce what was subtracted. What’s more, there’s an output parameter where the result of what’s subtracted will be deposited. As you can see, each action has its own input and output parameters.
We’re going to create a variable called speed where we’ll store the ship’s speed when it’s going up or down. The fastest way is to double-click on the parameter itself, but in this case, since the parameter accepts several types (this is indicated with the text “[…,…]” in the parameter type), the editor wouldn’t know which type of variable to create. Therefore, we’ll do so by dragging a Vector2D-type parameter from the Basic category in the Parameters tab.
Click on the parameter and in its properties, change its name to speed.
Since the valueToSubtract parameter is a Vector2D type (it adopts the same type as the first parameter), we can double-click on it to create a value to subtract. A new variable will appear, to which we will assign a value of 200 in its Y property. It’s a good idea to also modify its name property to 200, so that we can see that in the box itself.
Now, what we want to do is collect the result of the subtraction, which will be the new speed to set. Since the most convenient way is to deposit it in the speed variable itself, we’re going to drag it from the first parameter to the output parameter.
With this, we have now configured the box to subtract 200 from the speed on the Y axis in our speed variable.
Now what we want to do is assign this speed to the ship. To do this, we’ll use the new ActionOnParam box, but this time, in the action property, we’ll select setTranslationSpeed. Just like before, we can drag the box from the Blackboxes tab, but this time we’re going to take a shortcut to save ourselves a step. From the Asset Manager panel, drag the Spaceship element.
You’ll see that the editor automatically creates an ActionOnParam whose target parameter is the resource you just dragged out.
NOTE. Whenever you drag out a parameter or a resource from the logic panel, the editor will create an ActionOnParam with the element dragged out as the target parameter.
Click on the box to see its properties and select setTranslationSpeed in the action property. You’ll see that the parameters change to:
- translatePerSecond: indicates the speed in pixels/second we want to move the object at.
- seconds: the number of seconds we want to move the object, or leave it empty for indefinite movement.
The next step is to include in the translatePerSecond parameter the speed we have stored in speed. To do this, all we have to do is drag speed to the translatePerSecond parameter.
We’ll see that if we select any speed in any parameter, all the parameters in which speed is located will light up; in our case, target, result, and translatePerSecond. It’s a quick way to see which boxes are using a specific variable.
Right, we’re going to connect the boxes to see the result. If we want the speed to go from (0,0), that is, stopped, to (0,-200), that is, up, when we press the up key, we have to connect the input connector startUp to the do activator in the subtraction box. And when the subtraction has been run and it launches the done trigger, run the do activator of the next box so that the ship assigns the new speed.
If you press play in the Preview panel, you’ll see that when you press the up arrow, the ship moves up, but it never stops, getting lost out of scene. Let’s fix that. Just like when we subtracted 200 from the speed when we pressed the up arrow, we’re going to add 200 when we release it, so that the speed goes to (0,0), which is stopped.
Drag a speed variable out from any parameter to a free space on the panel. As you know, this creates an ActionOnParam. This time, select the add action, “+”.
Now we’re going to introduce a value to the valueToAdd parameter. We can create a variable and assign it the value of 200, but since we already have one, we’re going to reuse it. Drag the 200 variable to valueToAdd.
We’re going to leave the result of the adding in the same speed variable, so just like before, drag the speed variable to the result parameter.
And there we have the adding operation finished. Now all we have to do is connect things up. We want to add 200 to the speed whenever we release the up cursor, so that by adding it to (0,-200) it’ll have (remember that if we’re expecting a key to be released, it means that one is pressed right now, meaning the ship is moving), the sum will be zero. Therefore, we have to connect the stopUp connector with the do activator of the sum. When we have the new speed, we want to assign it to the ship, but luckily, that’s already been done for us by the previous box, with the setTranslationSpeed action, so we just connect the done trigger to the do activator.
Check in Preview that while you have the up cursor pressed, the ship moves up, and when you release it, it stops.
Now we have to do the same thing, but downwards. While the down arrow is pressed, the ship goes down, but when the key is released, it stops. Fortunately, we can reuse everything we’ve used to make it go up. Look. What do we have to do when the down key is pressed? That’s right, add 200 to the speed, meaning we can connect startDown to the do activator of the sum. And when we let it go? Exactly, subtract 200, so we can also connect the stopDown to the do activator of the subtraction.
With this simple graph, we now have the ship’s movement.08/03/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?