How to Create 2D Fighter Sprites

Recreate the fun of playing console-based 2D fighters by creating your own fighter game.

The game-play of a 2D fighting game consists of two players attacking each other until one player's health points (HP) drop to zero. Typically, games utilize animated sprites to represent each human or computer player. Like most online games, 2D fighting games are typically made in Flash. To create a sprite, draw the character on a new layer. If you wish to animate the sprite, create a layer for each body part you wish to move.

Instructions

1. Open Flash by double-clicking on its icon. Click on the "File" button and scroll to "New." If you wish to add a Sprite to a 2D fighter you programmed, click on the "Open" button. Highlight the file that contains the fighter and press "OK."

2. Navigate to the Timeline and press the "New Layer" button. Right-click on the layer and scroll to "Re-name." Enter the name "NewSpriteBody." If you wish to add a name to your sprite, enter it instead of entering "NewSprite." For example, write "PaulBody."

3. Click on the "Brush" tool, then on the "Stroke Color" swatch. This opens the "Colors" table. Click on the swatch that contains the color you wish to use.

4. Draw the outline of the sprite's body and head using the mouse. Left-click on the mouse and drag it in any direction to create a line or curve. Release the mouse to complete the line or curve. If you wish to draw with extra precision, use a drawing pen and tablet. Create a line or curve by pressing the pen against the tablet as if drawing with a pencil.

5. Add a Fill Color for the body, if desired. Click on the "Paint Bucket" tool, then on the "Fill Color" swatch. Select the desired color and click within an outlined area.

6. Complete the drawing of the body using the "Brush" and "Paint Bucket" tools. If you make a mistake, click on the "Eraser" tool and drag the eraser over the area you wish to remove.

7. Navigate to the Timeline and press the "New Layer" button. Right-click on the layer and scroll to "Rename." Enter the name "NewSpriteRightArm" or "PaulRightArm." Click the "Lock" icon next to the "NewSpriteBody" layer and highlight the "NewSpriteRightArm" layer.

8. Draw the right arm using the "Brush" and "Paint Bucket" tools.

9. Repeat the process of adding a new layer for each relevant body part. A traditional moveable fighting sprite contains a layer for each appendage and a layer for the body.

References

• Echo Echo: Drawing With Flash
• Adobe: Designing and Animating Characters in Flash

Resources

• Adobe: Download Flash Trial