Flash Game Programming Archives

Asteroids Game Stage 5 – Adding Waves and Scoring

Stage 5 – Adding New Asteroid Waves and Scoring

In stage 5, I cover many small but important things that will make the game better and more complete. I show you how to fix the collision detection to account for the different sized asteroids, create a scoreboard for awarding points and tracking the score, and how to add the capability for new waves of asteroids with increasing difficulty in the numbers of asteroids.

Video Tutorials

Asteroids Game Stage 4 – Collision Detection

{loadposition adposition4}

Stage 4 – Collision Detection

In stage 4, you need to add collision detection to enable both the spaceship to be destroyed by the asteroids, and the asteroids to be able to be destroyed by the shots fired from the spaceship.The collision detection will be handled by comparing the object’s x and y properties and also the use of Flash Actionscript’s built-in hitTest function. In the video tutorials below I will also add an extra lives movieclip in order to track how many games lives are left in the game.

Video Tutorials

Asteroids Game Stage 3 – Creating and Moving Rocks

{loadposition adposition4}

{loadposition adposition5}Stage 3 – Creating and Moving Rocks

In stage 3 of the Asteroids game development process, you will create the asteroids that the spaceship will need to eliminate in order to get to higher levels. To create multiple asteroids, you will use a while loop, and to keep track of the asteroids you will create an array. The necessary graphics for stage 3 consists of an asteroid movieclip with the linkage identifier set to asteroid.

The game code and video tutorials below are specific to stage 3, initializing and moving the asteroids on the game screen.

Stage 3 Game Code (Stage 3 code is highlighted in red):

stop();
init();

var NUMSHOTS:Number = 0;
var SHOTINDEX:Number = 0;
var SHOTTIMECOUNTER:Number = 5;

function init(){
    SCORE = 0;
    LIVES = 3;
    MAXAST = 3;
    SHIPDEAD = false;
    LEFT = 0;
    TOP = 0;
    BOTTOM = Stage.height;
    RIGHT = Stage.width;

    ast_array = new Array();
    createEmptyMovieClip("astField_mc", 0);
    createEmptyMovieClip("shots_mc", 1);

    astInit();
    shipInit();
}

function astInit(){
    ASTINDEX = 0;
    while(ASTINDEX < MAXAST){
        createAst();
    }
}

function shipInit(){
    attachMovie("ship", "ship_mc", 2);
    ship_mc._x = RIGHT/2;
    ship_mc._y = BOTTOM/2;
    ship_mc.VELX = 0;
    ship_mc.VELY = 0;
    ship_mc.onEnterFrame = control;
    ROTATE = 0;
    THRUST = 0;
}

function shoot(){
    if(NUMSHOTS < 5){
        NUMSHOTS++;
        shot_mc = shots_mc.attachMovie("shot","s"+SHOTINDEX, SHOTINDEX++);
        shot_mc.onEnterFrame = shotMove;

        RAD = ship_mc._rotation*Math.PI/180;
        shot_mc._x = ship_mc._x+10*Math.cos(RAD);
        shot_mc._y = ship_mc._y+10*Math.sin(RAD);

        shot_mc.VELX = 3*Math.cos(RAD)+ship_mc.VELX
        shot_mc.VELY = 3*Math.sin(RAD)+ship_mc.VELY
    }
}

function createAst(){
    ast_mc = astField_mc.attachMovie("asteroid","ast"+ASTINDEX,ASTINDEX++);
    ast_mc._rotation = Math.random()*360;
    ast_mc.VELX = Math.random()*3-2;
    ast_mc.VELY = Math.random()*3-2;
    ast_mc.onEnterFrame = astMove;
    ast_array.push(ast_mc);
}

{loadposition adposition9}

Video Tutorials

In part 7, I show how to use a while loop, an attachMovie function, and an array
to create multiple asteroids and have a method to keep track of them

In part 8, I show how to move the asteroids in random directions

{loadposition adposition8}

Asteroids Game Stage 2 – Moving Projectiles

{loadposition adposition4}

Stage 2 – Moving Projectiles

In stage 2 of the Asteroids game development process, you will create the projectile movieclip that the ship will fire. {loadposition adposition5}The goal is to write Actionscript code that will attach the projectile to the stage, place it in the correct position at the nose of the spaceship, and move it in the correct direction.

In order to accomplish this, the first thing you need to do is create the Flash movieclip projectile/bullet and give it the linkage identifier name shot. The image below, zoomed to 200 percent, shows the mc-shot movieclip, in symbol editing mode, with the linkage identifier set to shot. The registration point is in the center of the graphic. For this graphic, the spaceship’s bullet is just a simple 5 pixel wide circle, created with the oval tool, and filled green with no stroke outline. To set the linkage identifier, right+click on the movieclip in the library, select properties and go to advanced.

Stage 2 Game Code (Stage 2 code is highlighted in red):

stop();
init();

var NUMSHOTS:Number = 0;
var SHOTINDEX:Number = 0;
var SHOTTIMECOUNTER:Number = 5;

function init(){
    SCORE = 0;
    LIVES = 3;
    MAXAST = 3;
    SHIPDEAD = false;
    LEFT = 0;
    TOP = 0;
    BOTTOM = Stage.height;
    RIGHT = Stage.width;

    createEmptyMovieClip("shots_mc", 1);
    shipInit();
}

Video Tutorials

In part 5, I create the projectile movieclip and the Actionscript for firing it.

In part 6, I write the Actionscript for moving the projectile in the correct direction

Asteroids Game Stage 1 – The Spaceship

{loadposition adposition4}

Asteroids Game Overview

The Asteroids game concept is very straight forward; you have a space ship that flies around based on three buttons, a clockwise and a counterclockwise rotation button, and a forward thrust button. The goal is to shoot the asteroids which break apart in stages, into smaller and smaller asteroids, before eventually disappearing from the screen. {loadposition adposition5}You also need to shoot the alien spaceships, that show up periodically trying to kill you. One of the memorable characteristics of the game was the wrap around screen action that allowed both the asteroids and the spaceships, to fly off of one side of the screen to immediately return on the other side. The game progresses in levels with each level introducing more asteroids and therefore more difficulty.

Stage 1 – The Spaceship

In stage 1 of the Asteroids game development process, you will set up the basic parameters of your game, and create some Flash movieclips for the game graphics, like the ship and the asteroids. Then also in stage 1 we will write the actionscript code that will initialize the spaceship and enable it to fly around on the screen with classic keyboard controls.

Building The Game

Asteroids is a great starter game for learning basic game scripting because the graphics are relatively simple to create. These are the basic game parameters and settings that I used to build the game in Flash. You will find the same Flash document settings used in my series of video tutorials also.

Game Dimensions (size): 550 pixels wide, 400 pixels tall,
Frame Rate (fps): 65 frames per second,
Scripting Language: Actionscript 2.0

The graphics in stage 1 consists of just a single movieclip, the spaceship. The space ship should be facing right and have the registration point set to the center of the spaceship. The image below was shows the mc-ship movieclip in symbol editing mode. You can see the registration point in the center of the ship and the linkage identifier which has been set to ship.To set the linkage identifier right+click on the movieclip symbol in the library and go to properties.

Stage 1 Game Code:

stop();
init();

function init(){
    SCORE = 0;
    LIVES = 3;
    MAXAST = 3;
    SHIPDEAD = false;
    LEFT = 0;
    TOP = 0;
    BOTTOM = Stage.height;
    RIGHT = Stage.width;

    shipInit();
}

Video Tutorials

In part 1, I setup the game and create some of the game graphics

In part 2, I script the keyboard game controls

In part 3, I script the movement of the spaceship using the Math class’ built-in trigonometric functions

In part 4, I write the actionscript to keep the spaceship on the screen by wrapping the _x and _y properties

Week 7 and 8

{loadposition adposition4}

Asteroids Game Overview

Asteroids is a classic, from the golden era of computer games. I definitely remember dropping hundreds and hundreds of quarters playing Asteroids. It is challenging to play, different every time, and also plenty of fun. {loadposition adposition5}The concept is simple, you have a space ship that flies around based on three buttons, a clockwise and a counterclockwise rotation button, and a forward thrust. The goal is to shoot the asteroids which break apart into smaller and smaller pieces before disappearing from the screen. You also need to shoot the alien space ships, that show up periodically trying to shoot you. One of the memorable characteristics of the game was the wrap around screen action that allowed both the asteroids and the space ships, to fly off of one side of the screen to immediately return on the other side. The game progresses in levels with each level introducing more asteroids and therefore more difficulty.

Similar to the previous game, you will create this game in stages, adding more game capabilities and details as you go.

Week 7 and 8 Assignment – Create an Asteroids Game

Due Date: End of week 9,

Instructions: Please post your finished game to the Danscourses.com Forum and also send me your finished .fla file as an email attachment.

Your finished game is worth 15 points and will be graded on the following items:

Start Screen – A Start screen with a Start button and an Instructions button (1 point),
Instructions Screen – An Instructions screen with back button (1 point),
Game Over Screen – A Game Over screen, with replay button (1 point),
Scoreboard – A running score based on points (1 point),
Game Lives – You start with three lives but can gain lives too (1 point),
Game Graphics – The creativity and quality of the game graphics (2 points),
Game Code – Based the complete body of working code (4 points),
Game Action – Does the game play cleanly (1 point),
Game Sound – Game sound effects and theme music (2 points),
Game Extras?? – What will you add to the game? (1 point, with up to 3 points for extra credit)

To create your asteroid game you will work through stages of Flash and Actionscript game development. For each of these stages, I have prepared an article with information and video tutorials to help guide you through the process. Click the links below to work through the game stages in linear order:

Catching Game Stage 4 – Game Screens & Lives

{loadposition adposition4}

Stage 4 – Game Screens and Lives

In the final stage of the Flash catching game you will add additional types of falling objects. Depending on which falling object points can be awarded or subtracted. In this stage, you will also add start, instructions, and game over screens; and will need to add a lives variable, to track how lives in the game are lost, and when the game is over.

Video Tutorials

In part 9, I add timeline keyframes and buttons for the start, instructions, and game over screens.

In part 10, I add Actionscript for the buttons and a random number variable for multiple falling objects.

In part 11, I add the game code to track the game lives and when the game is over.

Photoshop & Flash Animated Flickering Light Effect

Flash & Photoshop Animated Effect Overview

In this series of video tutorials, I demonstrate how to create a flickering light effect in a Flash movie. The idea is to create a mysterious dark atmospheric room where the light pulsates and comes to life. For this project, I tired to imitate flash techniques seen in many popular movie websites, and hunt and click mystery web games.

I created my sample project using a Canon EOS Rebel and a tripod to capture the images. I had to shoot the digital photographs in manual user mode, holding the shutter open for 1 to 4 seconds to get the desired lighting effects for the dark and light images. I did not use flash photography. Then I imported the photographs into Adobe Photoshop CS6 for aligning in layers, editing, and filtering. Each image layer was saved as a jpeg image and imported into Adobe Flash Professional CS6 for animating and final editing.

Here is the final finished sample project:

Video Tutorials

In part 1, I show the finished Flash project and discuss the process of using the tripod, and the camera, to capture the images and import them into Photoshop on separate layers.

In part 2, I show how to convert the images to black and white, adjust the darkness and contrast using levels, and add grain and texture to the images.

In part 3, I save the separate image layers as jpegs, import them into Flash, and then create the finished timeline animation.