4.6 Gem Removal

The game revolves around the removal of gems, so we obviously need a way of removing gems. As the goal of this movie was to limit the amount of Action Script that is to be used, we will have to animate the removal of all the gems by hand. This is not that difficult of a task, only requiring that we have forty short animation sequences. The question is how do we stop all forty gems from being removed?

Unfortunately, this will require a bit of action script at the end of each removal sequence. This means that each gem removal sequence also must have a script frame which contains a function call.

gemRemoved(numberOfGemsAtThisPoint);

This calls a function that handles the removal of gems. The logic here is simple. We have a common variable that holds the number of gems there should be. When gems are removed, this value gets reduced. The gemRemoved handler keeps the movie playing until the number of gems remaining matches the number of gems displayed on the screen.

As you develop a game, the code changes as new features are added. It is always good to follow the KISS (Keep It Super Simple) acronym and start by writing just the code you need to get the goal you are currently working on working. As the program develops it becomes more robust. At this point you can review the code you have and do what is known as a refactoring pass. This means that you clean up the code so that it is easier to understand and more maintainable. At this point we are only concerned about getting gems to be removed so the code in the remove gems function and the related player panel button handlers will just contain the code necessary for doing the gem removal. This code will be changed in the next section as we add the game states but for now is what is needed to get our gem removal goal completed.

function handleOneButton(e) {

   --gemsRemaining;

   gameMovie.play();

}

function handleTwoButton(e) {

   gemsRemaining -= 2;

   gameMovie.play();

}

function handleThreeButton(e) {

   gemsRemaining -= 3;

   gameMovie.play();

}

function gemRemoved(gemCount) {

   if (gemCount <= gemsRemaining) {

          gameMovie.stop();

   }

}

For the gem removal, I just randomly selected a way of removing gems and manually created that sequence. Before you can remove the gem, you need to remove the gem from it's gem layer and place a gem in the same position as the removed gem but on one of the animation layers. From there, you can freely animate the gem to be removed. I came up with three separate ways of removing gems. Shrinking, Fading, and Rockets.

The shrinking technique simply has the gem shrink into nothing. As variations on this technique, some rotation can also be applied to the gem. Essentially you have the first keyframe with the gem at normal size. You then have the last keyframe with the gem at a percentage of what it was, optionally rotated. You then have a Motion Tween between the two frames.

Fading is simply having the motion tween between the gem with 100% alpha and the gem with 0% alpha. Rotation can also be done to this, but with gems near the gem you will want to keep the rotation to only a small amount.

Finally, rocket is simply moving the gem from one location to another off-screen location.