The process of creating the asteroids is practically the same as for the shots we just created. Obviously, the image is different, but they’re also elements that are created with a certain frequency and which move in the direction opposite the ship’s.
Let’s go back to the scene editor. Since, at the beginning of the tutorial, we downloaded the image of the asteroid, it’s already available in the Images panel. Just like the ship and the shots, the asteroid is a sprite, so we’re going to repeat the same steps that you’ve already followed to make it. Create a new sprite from the asteroid_131x124.png image and call it Asteroid. Then rename its animation fly. Create a second animation, and call it explosion.
Unlike the other sprites we’ve created, the asteroid only has one strip of images. However, we’ll be doing two sets of animation. The one we’ve called fly, which only has one frame, is the one we’ll use for when it’s flying towards the ship. And we’ll use explosion when it’s hit by a shot from the ship. Let’s start with fly. Click on fly and set its properties as follows:
Do the same with explosion, but with these:
Once the sprite is defined, drag it to the scene, and in its anchor property, select the value CENTER.
The anchor indicates where the origin coordinates are for each object. That is, from which point the position, rotation, and scale will be established. For example, when we establish the position of an object, what we’re really positioning is the anchor. If we rotate it, we’ll be rotating it around the anchor; we do the same with scaling. The anchor can be any of nine points around an object:
In this case, we’re going to choose center, because we want the asteroid to rotate around its center.
NOTE: You can test to see how an object behaves with different anchors by moving the yellow selection points of the objects. To leave it as it was originally, make its properties rotation=0, scaleX=1 and scaleY=1.
Now we’re going to position the asteroid to the right, out of scene, so that when we clone it, it won’t be visible, and we’ll animate it leftwards. To do this, we set its X property to 1100. When you do this, you’ll see it disappear from the scene. However, even though you can’t see it, you can access it via the Asset Manager.
Go back to the logic desktop. Go up to the root level to create another script which we’ll call Asteroids. So, drag out a script from the logic panel and name it Asteroids. Connect gameStarted to the in1 connector.
Go into it and rename the in1 connector to on, and create a second one called off.
We want asteroids to appear in the game with a certain frequency and to come from the right edge of the screen and move left. When we created the shots, the event that triggered their creation of the pressing of the spacebar. In this case, it’s going to be a function of a certain amount of time having passed. We’ll help ourselves to the Timer box, which was designed for just this task. Drag a Timer from the Time category in the Blackboxes tab. Connect the on connector to the start activator, and off to stop.
Timer basically just counts time and launches a finished trigger when the time set in the time parameter has passed. The loop parameter serves to indicate that we either want the countdown to repeat indefinitely, or just once. It’s set by default to once. Now that we know how Timer works, we’re going to set it up to launch a trigger every 2000 milliseconds (2 seconds) constantly. To do this, double-click on time and in its content property, write 2000. Afterwards, double-click on loop and change its content property to true.
Now the finished trigger will be launched every 2 seconds, which is the frequency at which we’ll clone the new asteroid. To clone an asteroid, drag the Asteroid object from the Asset Manager to the logic panel.
As we did before with the asteroid, we have to indicate in which layer or object the new object will be cloned. We’re going to do it again in the action layer, so also drag the action layer to the Parent parameter.
Since we’re going to use the clone to animate it, double-click on the clone output parameter to create a variable where the created clone can be collected. Finally, connect the finished trigger in Timer to the do activator in the last box.
With these two boxes, we’re creating a new asteroid every 2 seconds However, since they’re out of scene, we can’t see them. Next, we have to situate them at different heights, because otherwise they’d all come out at the same height, and it’d be very boring. So we’ll use the GetRandomValue box, which will give us a random value between two numbers that we’ll input per parameter. In this case, we want to change the height at which the asteroid will appear in order to situate it in that Y position. So drag a GetRandomValue from the ParametersManagement category in the Blackboxes tab.
You’ll see that it has two input parameters called min and max, and one output parameter, result. Min and max are the lower and upper limits between which this box will pick a random number. Then, the box will place its value between min and max in result.
In this example, we want the asteroids to appear at any height in our scene. Since we’ve configured the game to have the dimensions of 1024 pixels in width by 576 in height, we’re going to make the minimum 0 and the maximum the same height as the scene, 576. Since these parameters accept many types of variables, we can’t just double-click to create a variable, so we’ll have to drag out from the Parameters tab a number-type variable from the Basic category to min.
Make sure the max parameter also changes to the number type, meaning you now can double-click on it to create the second variable. Since number-type variables are set to zero by default, you don’t need to change min. Click on max and assign it a value of 576 in its content property. Now double-click on result and change its name to asteroid Y. Finally, connect the box to the last one.
Now that we have the Y coordinate in the asteroid Y variable, all we have to do is place the clone in that position. So, drag the clone variable from the second box’s output parameter and drop it in the logic panel to create an ActionOnParam. Until now, we’ve been using the setPosition action because we were assigning both coordinates (x,y). Since the clone is already situated on the x axis (just off the right of the screen), we’re now only interested in changing Y, so we select the action setPositionY. The next step is to assign the Y coordinate to the Y position parameter that we have in the asteroid Y variable, so drag it out to this parameter.
And to finish off this step, connect the done trigger from the last box to the do activator.
Right, so we now have a clone situated to the right of the scene at a different random height each time. Now we just have to get it moving, and to make it even more attractive, get it rotating on its axis. Let’s go.
Drag our clone variable out from any parameter to create an ActionOnParam and select the setTranslationSpeed action. When we created the shots, we set the speed to (900,0) because we wanted the shots to go to the right at high speed. In this case, we want the asteroids to go left, and more slowly, so we’ll set them to (-400,0). So, double-click on translatePerSecond and set the X property to -400.
If you do a preview now, you should see asteroids coming out from the right of the scene, and disappear off the left.
So let’s now add that final touch, the rotation. So, again drag out the clone variable from the last box to create an ActionOnParam and select the action setRotateSpeed. This box is very similar to the moving one. It has a parameter in which we can indicate in how many seconds we want the object to make a complete rotation. The lower the time, the faster the rotation. We’re going to set it at 3 seconds. Double-click on the parameter and set its content value to 3.
We’ve now got the most important elements of the game working. We have an animated background that simulates flying through space. We have a ship that moves vertically and shoots. And we have asteroids that appear from the right and which we have to either avoid or destroy. Obviously, something fundamental is still missing, something which will give our game playability: collisions.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?