Catching Game Stage 1 – The Catcher

{loadposition adposition4}

Catching Game Overview

A catching game is a great introductory game for learning how to code. The game is simple, objects are falling, and it is your job to move the character to catch the objects. You can add difficulty to the game in different ways; increasing the number of falling objects over time, increasing the speed at which the objects fall, or designing it so that only some of the objects need to caught while others need to be avoided. The game could also be altered so that the catcher can also be a shooter. A catching game is a good starter game for someone new to game programming. 

{loadposition adposition5}We will create the catching game in stages:

Stage 1 – The Catcher

Create a character that will walk back and forth based on keyboard key presses. You will need to come up with a ‘walking cycle’ looping animation and a ‘standing pose’ to accomplish this task. I have created an example file that you can refer to in order to help you. Key movement sample file. Try to think of a fun and original idea for your catching game. Remember that graphics, sound, game play and a novel idea all help improve the game, so give it some thought.

Key movement sample file

The catching character’s walking cycle can be important to the game and add a sense of entertainment. Try to make your catching character animate back and forth by walking, running, swimming, flying, hopping, etc. versus just simply sliding back and forth. The graphics for a walking cycle can be really simple and use only two different pieces of art. or it can be really complex and use more than twelve individual pieces of art. The animated walking cycle is deeply influenced by the photography of Muybridge; click here for an animation lab with Photoshop, that draws heavily on the work of Muybridge.   

A four frame walking cycle created from only two different graphics

 

 A nine frame walking cycle, and the standing position. Some graphic poses are only slightly different.

The characters walking cycle should be created and placed inside a movieclip, not on the main timeline. In the images below you can see that there is no animation in the Scene 1 timeline, but when you double-click the cowboy movieclip and enter into symbol editing mode, the cowboy has its own timeline with keyframe walking cycle animation. In the second image below, notice that the first frame is of the walking cycle is the standing position and that there is a frame label (the red flag) on frame 2, named run.

The main Scene 1 timeline. Notice that Layer 1 is for the graphics and Layer 2 is for Actionscript

 

From the Scene 1 timeline, select your catching character and give it an instance name in the property window. Once you have your catching character movieclip with an instance name attached to it, you are ready to open your Actionscript window and start writing the script to control the movieclip’s movement.

 

Make sure you are on the main Scene 1 timeline. Create a layer or select the layer for your actionscript. Select the keyframe and open the Actions window (Window > Actions (F9)). Here is example actionscript 2.0 code, that will control the catching character movieclip with the keyboard, right and left arrows. The code comments are in red.

function moveCowboy() {  
    // dx is a variable for the amount of distance to move the character.
    // changing the _xscale to -100 will flip the movieclip

    if (Key.isDown(Key.RIGHT)) {
        dx = 10;
        cowboy._xscale = -100;
    } else if (Key.isDown(Key.LEFT)) {
        dx = -10;
        cowboy._xscale = 100;
    // else no movement and dx goes to 0

    } else {
        dx = 0;
    }
    // move the cowboy by adding or subtracting its ._x property

    cowboy._x += dx;

    // dont let him go offscreen. notice the shortened if statement format

    if (cowboy._x < 30) cowboy._x = 30;
    if (cowboy._x > 520) cowboy._x = 520;

    // based on dx and the cowboys timeline current frame,
    // control the cowboy’s walking cycle animation

    if (dx != 0 && cowboy._currentframe == 1) {
        cowboy.gotoAndPlay("run");
    } else if (dx == 0 && cowboy._currentframe != 1) {
        cowboy.gotoAndStop("stand");
    }
}

// This function is a special type of function because the
// onEnterFrame handler executes repeatedly at rate of the timeline
// frame rate. Inside this function, simply call the moveCowboy() function

this.onEnterFrame = function(){
     moveCowboy();
}

Video Tutorials

In part 1, I discuss creating the movieclip character and run cycle, and how to give it an instance name.

In part 2, I write the actionscript functions that will move the character movieclip using the keyboard arrow keys.

In part 3, I add actionscript to control the character movieclip run cycle.

 

Click here to go to Part 2 >>

 

Author: Dan

Dan teaches computer networking and security classes at Central Oregon Community College.

Leave a Reply

Your email address will not be published. Required fields are marked *