Aside from the addition of scoring, the game is nearly playable as is, but it would be a lackluster experience. People expect a lot from games and even little touches can go a long way to making a game more fun to play. In this section you'll add a graphical explosion and an audio cue for it, so that when a ship is destroyed you'll see and hear the event.[View full size image]For the explosion, you'll create and use a film loop, swapping out the sprite's original member for the film loop when an explosion occurs.
Adding the Explosion
There are various ways you could create an explosion for this game. Essentially, you just need a few frames of the explosion, starting from nothing and growing to full size. You could hand paint each frame, you could create the effect in a 3D package and render a few frames, you could modify an explosion image you find online, etc. There are myriad possibilities. I chose to hand paint three frames in Fireworks, which are shown here:This series shows the images lined up as they will appear in the film loop. As you should know, the film loop will comprise 20 frames, with each image being shown for 4 frames.
|1. ||Choose the assets cast, then choose File > Import. Import the three explosion images from the Lesson13\media folder. The three images to import are named blowUp1.png, blowUp2.png, and blowUp3.png. Import them with 32 bits and be sure to uncheck the Trim White Space option.Why turn off Trim White Space? So the registration point of all three images will match when they are imported into the cast. Examine the following image showing the smallest of the three explosion bitmaps:The outer square shows the actual image dimensions; the inner square shows the dimensions of the image if the white space around it were removed. As you can see, if the white space were trimmed, the new registration point of the image wouldn't match the old one, which might cause the image sequence to shift when animated.|
|2. ||Click in the Score at channel 1 of frame 145, then drag blowUp1 from the assets cast and drop it in the Score so its span begins at frame 145. Do the same with blowUp2 and blowUp3, placing them in channels 2 and 3, respectively:|
|3. ||Select all three sprites and click in the frame bar at frame 148. Press Ctrl/Command+B to trim the sprites so they are all 4 frames in length:|
|4. ||Arrange the three sprites end to end in channel 1 as shown:|
|5. ||Select the middle sprite by clicking it and press Ctrl/Command+C to copy it. Click in the Score at frame 157 of channel 1 and press Ctrl/Command+V to paste in the Sprite. Now select the very first sprite in the sequence and copy it. Click in the Score at frame 161 and paste in the copied sprite.You now have an explosion sequencegoing from small to big and back to small againthat you can use to create a film loop.|
|6. ||In the Score, select all five of the explosion sprites, then choose Insert > Film Loop. Name the new film loop explosion and close the dialog.The new film loop cast member will appear in the assets cast, ready for use.|
|7. ||Click the new explosion cast member to select it. Choose the Film Loop tab in the Property inspector and uncheck the Audio and Loop options as shown:The loop doesn't contain any audio, so it's best to turn the audio option off. And because the explosion sequence should only play once, turning the loop option off is also a good idea. Although there is a frame counter in place in the code that counts to 20 to signal the end of the film loop, it's still a good idea to turn off the option altogether.|
|8. ||Delete the sprites you used to create the loop.Because no further editing of the explosion film loop will be required, there's no reason to keep the sprites hanging around.You're now ready to implement the film loop so the explosion is shown when a ship is destroyed.|
|9. ||Right-click one of the enemy ships in level 1 and select Script from the context menu. Add the single line of Lingo to the behavior's explode method. You can add this line as the last line in the method:|
sp.member = member("explosion")
Now, whenever the explode method is called, the sprite's original member will be swapped out with the explosion film loop. At the same time, the explodeCount is set to 1 and exploding to true. The if statement within the enterFrame handler will then see that exploding is true and increment the explodeCount property until it reaches 20. At that point the sprite is moved off Stage and set back to its original cast member:
if exploding then
explodeCount = explodeCount + 1
if explodeCount = 20 then
sp.locV = -2000
sp.member = origMember
All that's needed now is to add the line to change the sprite to the explosion film loop to both the asteroid behavior and the player ship behavior.
|10. ||Right-click any of the asteroids within level 3, and select Script from the context menu. Add the single line of Lingo to the explode handler:|
sp.member = member("explosion")
|11. ||Right-click the player's ship in channel 20, either in the Score or on Stage, and select Script from the context menu. Add the same line of Lingo within the repeat loop that does the collision testing. You can add the line after the two lines that set exploding to true and explodeCount to one:|
repeat with cnt in _global.enemyList
if sp.intersects(cnt) then
exploding = true
explodeCount = 1
sp.member = member("explosion")
The explosion effect is now in place and will appear no matter what blows up. Let's see how it looks before moving on.
|12. ||Rewind and play the movie. Observe the explosion when you shoot down, or run into, an enemy. Stop the movie when you're finished testing, and save it.The explosion looks pretty good, and a sound effect will make it complete.|
Adding Sound Effects
If you've ever watched TV without the sound on, you know what a difference sound can make. In video games especially, there's typically a sound effect for just about everything you do. In this section you'll add a couple of simple sound effects so that the explosion makes a "boom," and the player's ship makes a sound when it shoots a bullet.
|1. ||Make the assets cast active and choose File > Import. Import the two aif sound files in the Lesson13\media folder. The sounds are named boom.aif and fire.aif .Instead of simply placing the sounds into the two sound channels available in the Score, you'll need to use Lingo to play the sounds directly. This is because the events that trigger the sounds can happen at any time.|
|2. ||Select both sounds in the cast by clicking one and then Shift-clicking the other. Click the Sound tab in the Property inspector and make sure the loop option is unchecked.Certain properties, such as loop, can be controlled for multiple cast members at once, and can save you a lot of time when you're importing more than just two sounds.|
|3. ||Double-click the frame behavior at frame 25 and add the following line to play the fire sound within the conditional test for the space bar:|
For reference, the conditional should now appear as follows:
if _key.keyPressed(49) then
if _system.milliseconds > bulletTime then
bulletChannel = bulletChannel + 1
if bulletChannel > 31 then bulletChannel = 22
bulletTime = _system.milliseconds + 150
Now, whenever the space bar is pressed and the ship fires a bullet, the fire sound will be played in channel 1. You now need to tell the boom sound to play whenever an enemy ship (or your ship) is destroyed.
|4. ||Right-click one of the enemy ships in Level 1 and select Script from the context menu. Within the explode method, add the following line as the last line in the method:|
Note that you're using sound channel 2 to play the sound, instead of 1. This is because the fire sound is being played in channel 1. Keeping sounds separated will prevent them from competing with one another. By playing them in two different channels, both sounds can be played at once.
|5. ||Right-click one of the asteroids in level 3 and add the same line to the explode method within the behavior:|
Because the UFOs in level 2 use the same behavior as the ships in level 1, they won't need to be modified at all. The last thing you need to do now, is play the boom sound when the player's ship is destroyed.
|6. ||Right-click the player's ship in the Score, or on the Stage, and select Script from the context menu. Add the line to play the boom sound immediately after the line that sets the sprite's member to the explosion member:|
|7. ||Close the script window, then rewind and play the movie.As you fire and destroy enemy ships, you now hear the firing and boom sounds being played. This makes the game much more interesting and playable, even though it's really no different than before you added sound.In the next lesson you'll add an external background sound track to the game, making it even more interesting.So now you can shoot down enemies, your ship can be destroyed, and graphic and audio cues are in place for those events. It's time to move on to keeping score, and adding points as you shoot down the enemies.|
|8. ||Stop the movie and save it.|