This is part of a series of articles that go over the steps I’m taking to learn Flash CS3. The project’s goal is to develop an RPG similar to those published by Square in the mid/late 1990’s. (Secret of Mana, Final Fantasy VI, etc..)
Every game needs a hero so my first milestone is to create one.
Milestone: A Hero is Born
User Story: I’ll be able to move the hero around the screen.
Acceptance Critera:
- The hero will react to keyboard input and be able to move along 8 axis
- The hero will animate while moving and face the correct direction when the key is released
- The hero will have collision detection such that it cannot walk through walls or other non-playable characters (NPCs)
- The hero sprite will correctly draw above or behind other sprites depending on where it is on the screen (aka. depth sorting)
Building the Sprite
Before we can touch a line of code, we need to spend the time setting up the hero sprite in Flash. Since in my game we’re dealing with bitmaps, Photoshop ended up being the tool of choice to set things up. The nice thing with Flash is you can import a Photoshop file and retain layers and alpha (transparancy) data. So all we need to do is setup our hero in Photoshop on a variety of layers.
A good friend of mine had developed a hero tileset 10 years ago. I’ll be using this tileset as I make my hero.
Tip: There are dozens of abandoned RPG projects on the intertube that you can source graphics from. You can also scan pixel artist portfolios. Some of their stuff is free for non-commercial work. Pixelation – Way of the pixel is also a great pixel artist community to start from.
A subset of the "neco" hero tileset
Meet Neco. Above you can see we have 1 frame called “Stand_Right”. We want this frame to be shown when the user releases the right key. Neco also has 4 frames of “Walk_Right” animation. We’ll want these to loop when the user is holding the right key.
In Flash we create a movieClip called “Neco”. On Neco’s timeline we create keyframes and frame labels for each animation. For my hero this will be:
- standLeft
- standRight
- standUp
- standDown
- walkLeft
- walkRight
- walkUp
- walkDown
On each of these keyframes we create separate movieClips for each animation. Since each animation is a separate movieClip, it will play and loop continuously whenever we are on it’s corresponding keyframe.
So now it’s easy to make Neco animate. Within the Neco movieClip we simply “gotoAndStop(walkUp)”.
With the movieClip fully setup, it’s time to code.
asgamer.com has some excellent tutorials that I took advantage of to figure out the proper AS3 way of doing things. Next post I’ll break down the three prototypes I built and the learnings from each.
