This is a follow-up to the main tutorial from last week, How to write the arcade classic Asteroids in Flash, which originally appeared in the January edition of Flash and Flex Developer’s Magazine which can be found at FFDmag.com
In the tutorial we built a fully working, but rather basic version of Asteroids and today we’re going to add a couple of improvements. I’ll leave features like power-ups and shields for a future post, but there is one gameplay tweak which is quit important. In our original game we had no maximum speed on our spaceship, which meant that if the player held the thrust (UP) key down the ship would continue to accelerate ad infinitum.
That’s all well and good, but apart from looking glitchy one the ship starts travelling too far on screen each frame, if the ship is allowed to accelerate too much it could interfere with the collision detection, as it would effectively “jump” over an asteroid. So today we’re going to fix that, and also add some simple audio so that it starts to feel like a real game. Here’s an example of the updated game in action…
Setting a maximum speed
Our ship’s velocity is a vector, meaning it has both magnitude and direction. That means we can’t simply check the current speed against a maximum speed and prevent further thrusting if it’s too high – that would prevent the player from turning, and thrusting away in a different direction.
There are several solutions to this, but since it’s such a simple game and we’re not interested in real-world simulations we’ll go with a nice simple one. Effectively we’ll check both the X and Y velocity of the ship after the thrust key is hit, if the extra thrust would push either the X or Y velocity over the limit we won’t apply it!
This means our ship will have a higher maximum velocity if travelling diagonally on the screen than if it’s going straight up/down or left/right, but for our purposes that’s not much of an issue.
Coding the change
We’ll need one new class variable:
Then we need to make a change to the moveSpaceship() method. Replace these lines:
1 2 3 4 5 |
with this…
1 2 3 4 5 6 7 8 9 10 11 12 | if(thrust) { // Check if adding thrusting would exceed max speed, if not then thrust... var tempDX:Number; var tempDY:Number; tempDX = shipDX; tempDY = shipDY; tempDX += Math.sin(Math.PI*spaceship.rotation/180)*thrustAmt; tempDY -= Math.cos(Math.PI*spaceship.rotation/180)*thrustAmt; if(tempDX < shipMaxSpeed) { shipDX = tempDX; } if(tempDY < shipMaxSpeed) { shipDY = tempDY; } spaceship.gotoAndStop("thrust"); } |
As you can see, we’ve calculated the new thrust values for a pair of temporary variables, then we compare the new velocities based on these values, and only if they are below the maximums do we apply them to the actual ship velocities shipDX and shipDY.
Adding audio
No game is complete without sound effects, so take a look at a couple of ways of adding them to a game. I won’t go into detail here about using sound channels and transforms to allow for mute controls etc, that can be another post another time, for now let’s just get some simple sound effects into the game. First we’ll need some sounds. Flash will support Wav or MP3 format audio and there are loads of sites online where you can download free (or cheap) sound effects in those formats. If necessary you can trim or edit them using something like Audacity and then you want to import them into our FLA file. Go File > Import to Library and select all of the sounds you want to import. I’ve imported 4, one for the ship exploding, one for the ship firing, one for hitting an asteroid, and one for end of level/game.
The simplest way to add a sound is on the timeline. Open up the ship movieclip and add a new level called audio. Add a new keyframe (F6) on frame 3 (the same frame that the explosion animation starts) and on the properties panel, click on the Sound dropdown and select the sound you want to play when the ship explodes. You’ll notice a waveform for the sound shown on the timeline, as shown below.
Adding sound to the timeline
You can do the same thing in the messages movieclip to add the end of level, and end of game audio.
Now the asteroid getting hit, and the ship firing can’t be done in this way since they don’t have animations, but that’s good because it gives us a good reason for using Actionscript to play the audio. Controlling sound with Actionscript is much more powerful than using the timeline as it gives loads of extra control, and allows us to do things dynamically (it’s also how we would add a mute or volume control to the game!)
First of all we need to right-click on each of the audio assets we intend to control in the library, check the “Export for Actionscript” setting and give them an appropriate class name:
Check "Export for Actionscript" and give it a class name
To use simple sound we need to add one new import to our AS file:
1 |
Then we need to declare a class variable for each sound we want to use:
1 2 | private var thisExplode:Explode = new Explode(); private var thisShot:Shot = new Shot(); |
The type is whatever class name we gave that sound when we set the linkage (and is case sensitive!)
Then we simply use Sound.play() to play those sounds at the correct moment. So add this line to the fireBullet() method right after adding the bullet to the bullets array:
1 | thisShot.play(); |
And add this line to the removeAsteroids() method, right after splicing the asteroids array:
1 | thisExplode.play(); |
That’s all there is to it. We now have basic, but fully working audio in our game!
As usual, comments or questions are very welcome. I’ll come back to this again in a week or so and we’ll add some other gameplay features such as powerups!
(If you want to see the original Asteroids tutorial, and download the source files click here)
 |
