Robotron AS 2.0 – Part 5

Robotron Cont.

See my Robotron Flash game video tutorials below. I also have a YouTube video playlist which organizes all the videos in a series: A Flash Actionscript 2.0 Game – Playlist

Part 21

Part 22

Part 23

Part 24

Part 25

 In part 26, I add collision detection so the hero’s lasers can hit the aliens

In part 27, I add a scoreboard movieclip and dynamic textbox for displaying the score

 

Week 11 and 12

Overview

Weeks 10 and 11 continue the development of the Robotron Game.

To create additional interest to the game,  I have added code to create a high score board that relies on an Apache webserver, PHP and MySQL. In order to troubleshoot this locally on your computer, you will need to download a variant of (AMP) Apache MySQL and PHP. I recommend Wampserver2 and Xampp as two options that are easy to download and easy to install.   

Week 10 – 11 Assignment – Continue the Robotron Game and add a High Score Board

Robotron AS 2.0 – Part 4 (High Score Board) ,

Robotron AS 2.0 – Part 5 ,

Robotron AS 2.0 – Part 6 

Due Date: End of week 13, send me your finished fla file (CS5 format), zipped in an email attachment.

Robotron AS 2.0 – Part 3

Robotron Cont.

Last week I covered keyboard controls for moving your hero and firing lasers. This week I will cover creating enemies and adding a high score board. See my YouTube video tutorials below. I have also created a YouTube playlist to organize all the videos in this series: A Flash Actionscript 2.0 Game – Playlist

 

 

Robotron AS 2.0 – Part 2

Cont.

Last week I posted tutorials on how to create pixel-art characters and their walking cycles. You will need to use Photoshop or the GIMP to create your own characters. This week I have finished the Actionscript to make the hero move in different directions and switch body positions/walking cycles based on his direction. See my YouTube video tutorials below. I have also created a YouTube playlist to organize all the videos in this series: A Flash Actionscript 2.0 Game – Playlist

Download the Robotron sample file up to Part 11: robotron_redo2.zip

Robotron AS 2.0 – Part 1

{loadposition adposition4}

Overview –  Robotron

The type of game we are going to try and make with Flash is a real-time action game. In a real-time action game, the game clock or game time, flows continuously until the game is over. The opposite of a real-time game is a turn-based game where players take discrete turns and the game action is paused between turns. Most real-time games are action games, role-playing, and shooter games.

Robotron: 2084 was one of my favorite arcade games when I was a kid, and I can remember playing it along with Pac-Man at the Sun Bee liquour store on Sunset Blvd, in West Hollywood. Robotron is a good example of a real-time action game. Robotron is a 2D action game where the hero character must advance through multiple levels of increasing difficulty fighting robots and saving humans. To see a quick video of the game in action go here: http://www.youtube.com/watch?v=JZsIyJehtE8 

It is impossible to make a web-based game with Flash, that has the same feel and game-play as the original arcade game classics. Probably the most important aspect of Robotron, which cannot be successfully emulated with a mouse and keyboard, was the dual joysticks used to move the hero and shoot lasers. It is amazing to consider how much was accomplished with so little RAM and processing power in the classic arcade game era. Of course games like Roboron were programmed in assembly and took direct control of computer hardware and graphics.

 

{loadposition adposition9}

 

To start our Robotron game we are going to need to make some pixel-art characters called "sprites." Undoubtedly you should be creative as possible with your graphics and sprites, but I also recommend you keep them as simple as possible. Watch my videos on creating pixel art characters with Photoshop:

Creating a pixel art sprite with Photoshop part 1 –http://www.youtube.com/watch?v=zEwmI56dGe8
Creating pixel art sprite with Photoshop part 2 – http://www.youtube.com/watch?v=aWmTTOygQvM
Creating pixel art sprite with Photoshop part 3 – http://www.youtube.com/watch?v=M6rHhx0FMa0 
Creating Robotron attaching the hero to the stage part 4 – http://www.youtube.com/watch?v=eVPmp0lpZQg
Character movement using the keyboard part 5 – http://www.youtube.com/watch?v=w9vAS1xsjsA

*Note: As I make new videos I will add them to my YouTube – A Flash Actionscript 2.0 Game Playlist

Here are some great websites on creating pixel art graphics:
So you want to be a pixel artist?

More tutorials coming….next tutorial we start coding….

 

{loadposition adposition8}

Catching Game Stage 2 – The Falling Objects

{loadposition adposition4}

Stage 2 – The Falling Objects

Now that the catching character can move back and forth using key presses, it is time to create the falling objects. The falling objects can be contained in a single Flash movieclip. You can draw vector graphics for the falling object using Flash, or you can import graphics created in another program. {loadposition adposition5}If you have a creative concept, idea, or theme for your game, creating the graphics will be easier. Your game can have objects to catch which earn the player points, and objects to avoid which will cause the player to lose points.

Attaching Movieclips from the Library

Flash has a built-in actionscript function that allows you to attach movieclips from the library to the stage dynamically. In order to do this the movieclip needs to have a linkage identifier name configured. You do this by right+clicking the movieclip in the library, going to properties, and under advanced settings, checkmark export for actionscript and export in first frame and then fill in an identifier name with no spaces and save. Now the movieclip can be called from the library with actionscript.  

In the video tutorials below, I cover how to dynamically attach objects from the library, place them in random locations, and move them at random speeds.

Video Tutorials

Follow along with the video tutorials and download this Flash file: AttachMovie1.zip

In part 4, I show how to set the movieclip linkage identifier, and attach a movieclip from the library.

In part 5, I show how to use the setInterval() function to attach movieclips from the library on a timer, and place them
in random locations using random numbers created with the Math.random(), Math class and method. 

In part 6, I show to combine Stage 1: the catcher, and Stage 2: the falling objects into one file.

 

Click here to go to Part 3 >>

 

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 >>