Essential Guide To Flash Games Code Supplement #1: Ch. 1 Games With The Flex SDK

In the book Essential Guide To Flash Games we make every attempt to give developers code that will work in both the Flex SDK and the Flash IDE. However, the three games in Chapter 1 are an exception. Because there were too many essential topics that we would need cover later (i.e. Bitmaps and Bitmapdata) we could only really fit code for the Flash IDE for those games.

However, we still feel that those games need to be addressed as full Flex SDK implementations. This first “code supplement” is meant to fill that gap. You can download this code package here.

Please note, that this is not supposed to be a comprehensive lesson on how to create these games with the Flex SDK. This simply a set of highlights to watch for when you try to compile them and look at how they are different from the originals.

Basic Game

The “Basic Game” is simply a quick implementation of a game loop that counts the number of mouse clicks by the player and writes them out in trace statements. There is not much that needs to change for the Flex SDK version, but to capture the traces (at least when using Flash Develop) you will need to download and install the Flash Debug Player.

Balloon Saw and Pixel Shooter

The Balloon Saw and Pixel Shooter games requires a lot more changes to work in the Flex SDK than the Basic Game. Most of the bigger changes are detailed below:

  • Assets: You need raw assets for this to work. I have created .gif files for the images, and .mp3 files for the sounds. The original .wav files will not work. These files have been added to the src/assets folder for each project.
  • Embedding Sounds And Graphics: Just like we describe later in the book, you will need to create specific embeds for the assets you will use with the Flex SDK. Each assets needs to be embedded in the properties section of the Game class like this:
    [Embed(source = 'assets/blade.gif')]
    public static const BladeGif:Class;
    ...
    [Embed(source = 'assets/pop.mp3')]
    public static const PopSound:Class;
  • MovieClips: The Ch.1 games rely heavily on Flash IDE MovieClips. We need to simulate this in the FlexSDK versions of the games. To do this, we will create empty MovieClips for each asset, and then attach the embedded graphics to the MovieClips. For the “blades” in Balloon Saw, we need to further move the graphic to the “center” by subtracting 1/2 the width from x and 1/2 the height from y. This will center it in the MovieClip so the rotation works. None of the other graphic assets need to be centered in the way.
    player = new MovieClip();
    var tempBlade:Object = player.addChild(new BladeGif());
    tempBlade.x = 0 - tempBlade.width / 2;
    tempBlade.y = 0 - tempBlade.height / 2;
  • Sounds : To play sounds we need to create a SoundChannel and Sound object for each sound we want to play. Again, this is the most basic version of this code. Later in the book we improve upon it. The complications here are another reason why we left this out of the original Chapter 1. There are three things we need to do to support the playing of sounds with the Flex SDK:

1. Make Sure to import the SoundChannel class. (we already imported Sound in the IDE version)

	import flash.media.SoundChannel;

2. Create a reference to the sound (popSound) and a SoundChannel (popSoundChannel) for each sound we want to play. These should be declared in the properties section of the Game class so they can be accessed by the every class function.

	private var popSound:Sound = new PopSound();
private var popSoundChannel:SoundChannel = new SoundChannel();

3. Play the sound when necessary.

	popSoundChannel=popSound.play(0,1);
  • Animations: Pixel Shooter  requires that the explosions are animated. In the Flash IDE version we simply created a MovieClip to play. However, for the Flex SDK version, we will not do this. Instead, we will embed three frames of animation that we will play when a ship explodes.

1. When an explosion is created, we create an empty MovieClip and attach the first frame of the explosion to it, just like we did with all the other graphics. Notice that we also create an instance variable named currentImage. We need this so we can remove the old frame and add the new one when we change frames.

var tempExplosion:MovieClip; 
tempExplosion = new MovieClip();
tempExplosion.currentImage = tempExplosion.addChild(new Explode1Gif());

2. Next, we set two other instance variable, frameCount (the explosion frame that we are current displaying) and frameWait, a count of frames that the current images has been on the screen.

tempExplosion.frameCount = 1;
tempExplosion.frameWait = 0;

3. finally, we need to update the moveEnemies() function to swap the explosion images when frameWait reaches 3, or delete the explosion when frameCount > 3.

 var tempExplosion:MovieClip;
for (i=explosions.length-1;i>=0;i ) {
tempExplosion = explosions[i];
tempExplosion.frameWait++;
if (tempExplosion.frameWait > 2) {
tempExplosion.frameWait = 0;
tempExplosion.frameCount++;
if (tempExplosion.frameCount <= 3) {
switch(tempExplosion.frameCount) {
case 1:
//do nothing
break;
case 2:
tempExplosion.removeChild(tempExplosion.currentImage);
tempExplosion.currentImage = tempExplosion.addChild(new Explode2Gif());
break;
case 3:
tempExplosion.removeChild(tempExplosion.currentImage);
tempExplosion.currentImage = tempExplosion.addChild(new Explode3Gif());
break;
}

} else {
removeExplosion(i);
}
}

}

Again, this is only a quick discussion of the changes that need to be made to the games from Chapter 1 to make them work with the FlexSDK. None of these changes are optimized, and they are simply the most basic changes we could make to support the Flex SDK. The rest of the book, beyond Chapter 1, shows how to take the concepts introduced here and improve and optimize them.

 

Again, you can dowload the code here: http://www.8bitrocket.com/book/ch1_flex.zip

 

Leave a Reply