Making a Beat-Em-Up Fighting Game in Flash: Part One

Let me start by saying that I am in no way an advanced game programmer, and some out there will chuckle heartily at the poor-mans code and techniques used in this tutorial. The only reason I felt inclined to make this tutorial then, was because after weeks of head-banging internet research, I uncovered little about how to code a simple walk-along beat-em-up, aka Streets of Rage, or Aliens vs Predator, not even in C, nor Visual Basic. There are millions of tutorials that cover the fundamentals, but hardly anything useful for the newby wanting to make a decent fighting game with tight controls.

Why make a game in Flash, I hear you ask? Well, frankly, I think Flash is a game programmers dream come true. It is in the essence a 2D sprite engine, with some quite robust functions for animation and graphical manipulation. To top that, 96% of the people out there already have Flash installed on their PC. We're talking major exposure here, for all you want-to-be PS3 game makers. Flash is taking over the net, and in a fews years when everybody is looking for a skilled Flash Web Designer and... you get the picture? And once you've made something as complex as a game in Flash, the rest is simple.

OK. Let's get cracking.
To start us off, we need some sprites. How do we get those? Designing your own is fine, but it takes weeks!
The most convenient way is to search for some templates that have already been made, or ripped from an existing game. Try typing in "Sprite Sheets" in Google, and you'll uncover quite a number. Like Street Fighter or Megaman? Well, you're in luck because so do all wannabe game programmers and you can find a million sprite sheets for them on every corner. Want to find D&D: Shadow Over Mysteria sprites? That's a little harder, but still possible. Barbarian from the C64? Forget it. For this tutorial, I wanted to emulate an old favourite game of mine called Splatterhouse. I chose Splatterhouse for the following reasons:

a) it has nice, sexy graphics;
b) it's violent and addictive;
c) it doesn't use too many frames for all the moves - saving time;
d) it is a simple fighting game, and yet contains all the fundamental building blocks for something more complex. In other words, coding Splatterhouse is like coding Tetris before you start on Arkanoid. You definitely don't want to start trying to work on your big 3D Tekken project before you have made a couple of simple 2D beat-em-ups.

Unfortunately, finding sprite sheets for Splatterhouse (not the ugly Splatterhouse 2 Megadrive/Genesis sprites, but the arcade originals) was like trying to find gold in a turd, so in the end I knew I had to rip the sprites myself.
Here are the steps to follow for those who need to do the same thing. Firstly, I had to get the game, so I downloaded MAME32 (the videogame machine emulator). And pinched the game rom from West Mansion. Oh and, ahem, yes officer I have the original rom board in my basement, I swear.

The first program I tried to save myself some effort was ArtMoney. This is a program that can come in handy with sprite ripping on occasion, as it allows you to read and manipulate memory codes in an executing program. How that relates to sprite rippers is that if you can find the memory section that contains the background in a game, you can set the value of it to 0, or to a single colour, and shazam, you have easy to extrapolate sprites on a black screen background. However, I failed with ArtMoney this time, but keep in mind it can be a handy tool.

One of the coolest programs I have ever come across for ripping sprites is AnimGet. How it works is simple. It takes a screen-grab of the game every second or so, compares it to the previous one, and if they're different, saves it. That's it. Simple but bloody marvelous, and completely saves you ever accidentally missing a frame of an animation, otherwise only to realise later on when you're at the cropping/pasting stage that you skipped one.
Load up your favourite beat-em-up, then when the Start screen pops up, activate AnimGet (ALT+TAB from MAME to switch screens), then do all the characters moves. One strong recommendation I have is that you make sure that the background colours of your screen are different from that of the main sprite you are trying to rip. So if he is blue, don't take screen grabs of him when he's in front of a blue wall. Also, don't forget to turn off Antialiasing in Mame or else you will find it extremely difficult to isolate your sprites from the background later on. Options/Default Options/Advanced Tab/Click off Use DirectDraw. Go back to AnimGet, deactivate, and Save. After a minute or so, a new file will appear called Shots, and if you take a peek inside you will find literally hundreds of pics with all your required animations inside. All in order sequential order of animation. Sweet. Now delete the ones you don't need.

The next amazing tool I found on the net was The Gimp. It is essentially an open-source Adobe Photoshop. One tiny little feature makes all that download time worthwhile, Select By Color. I used to think ripping from MAME games meant nights of tears and frustration before I came across this little number.

Bring out The Gimp, and open up a huge new document 1600 x 1600, and the first sprite you wish to cut-out. For the sake of this tutorial, let's start with the character stance, then the walking right frames. In SplatterHouse, Rick (the dude in the Hockey Mask), has a static stance with only one frame. Animated stances present no problems either, so go ahead and get all the frames if you're working with another game. Here's how to do it. Make a box around the character and use the crop command to isolate it from the background.

This is where the magic begins. Find Select/By Color, and randomly click all over your sprite whilst holding down SHIFT. You will see that all colours of the same hue are phased into the selection, and eventually your sprite will have been almost completely extrapolated in the selection marquee. If the background contains the same colours as your sprite, then they will also join the selection. That's why I mentioned earlier not to rip your character in an area of similar colour. As you can see in the pic below, some of the background pixels have been selected.

To remove selected background colours, we have to do some monkey work with the Select box. ALT and click adds selected pixels to your marquee, and CTRL+click removes them.

Good, so you have your sprite. CTRL+C copies it. CTRL+V pastes it onto the big document. Move the first frame into the left corner. You may notice that when you paste it into the new document, you get some strange mistakes happening with the colour scheme. I don't know why this happens, but anyway an easy way to get around this is to use the Color Picker on the first document, then use Select Color on the mismatched hue, and paint over it.

Okay, so now you have to know-how, go ahead and tear out the rest of your sprites, and when you copy and paste them onto the big document, be sure to keep them in some general alignment and order, and not just all over the place. This will make editing easier later on in Flash alot less painstaking.

When you are all done all, you will need to make the background colour transparent.

Layer/Transparency/Add Alpha Channel Now that you have an Alpha Channel, using SELECT COLOR, click on the background color and then press CTRL+K to delete it, leaving you with your sprites on a chequered (transparent) background.

If you've just ripped a sprite sheet that wasn't on the net, you OWE it to the rest of us to get that sprite sheet around all the reputable sprite ripping websites out there for the rest of the world to use and abuse, thanks!

Flash

Let's start making a prototype in Flash that gives you some control to make Rick move, attack, and jump, as close to possible as in the game. All of the sprites you have made we will now turn into flash movies that can be manipulated using the keyboard.

1. FILE/IMPORT/IMPORT TO STAGE. The file that contains all the frames you ripped.

2.MODIFY/BITMAP/TRACE BITMAP. Use these settings: Color threshold: 20; Minimum area: 1 pixels; Curve fit: Pixels; Corner threshold: Few Corners. (Thanks goes to Bocom for being the first with that tip!). You will notice the whole bmp goes pixelized. Click anywhere off of the sprite sheet and then click anywhere on the purple. Voila! All the stuff we don't need around the sprites is selected. Now tap Delete on your keyboard to bin it.

3. With the Selector Tool, make a box around the first sprite and F8 it. Save as a Graphic, and give it a name like walk1,punch2, etc. I recommend you use the same name with an incrementing tag for each moves of the same category (example, walk1, walk2, walk3). It will appear in the library as an individual bitmap. You can actually delete the one on the stage now if you like. Do this for all the sprites, and keep it in mind to use naming conventions so as to keep them all organised and together. You might want to also create a new folder in the library to put them into, because though your library is not cluttered yet, trust me, it will be by the end of the game if you get into the habit of not cleaning it up properly.

4. Once you have all the files saved as separate Graphics in the library, delete everything on the stage. Now we have to make movies of all his moves, even the single frame ones. With nothing selected in the main timeline, click INSERT/NEW SYMBOL. Call the movie 'punchright'.

5. So now we have to make a movie of Rick punching. Look in the library. As you can see, there are two frames (bitmaps) used for his punch animation. But actually, we are going to re-use frame 1 again, so it's actually 3 frames. Find the first frame you made of Ricks punching stance from the library, and click drag it onto the center of the stage. Use the Align & Info & Transform tools to get it dead center (align horizontal center and align verticle center). Next click on Frame 2 and press F8 or right click/Insert Blank Keyframe. This time pull the second frame of the animation out of the library. Use Onion Skinning and line this frame up with the previous frame. Try to get Ricks head at about the same position in each frame. Getting frames aligned correctly makes all the difference between a good animation and a jerky one. Don't forget you can use the arrow keys for more precise positioning. Once done, continue with Frame 3- which is actually going to be the same as Frame 1, so click on frame 1 in the timeline, and Right Click/Copy Frames, click on Frame 3, Right Click/Paste Frames. If you click on the mc in the library, you can now test it using a play button. Make sure it looks smooth when he punches, and then you're ready to continue.

6. As you may have guessed, all you need to do now is repeat the same process. Go back to Scene 1, Insert New Symbol, and make another animation. Do this until you have all of his moves stored as little movies. Later on I will show you some magic code to automatically flip every move he makes.