Making a Beat-Em-Up Fighting Game in Flash

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.