by Ernesto Quezada aka _Bruno : January 22 2006
Vertical shooters are also known as Fixed Shooter.
A fixed shooter has players only able to control their two-dimensional position on the screen and sometimes the direction they are facing*
*Wikipedia
So, we will create a game using our super hero Pawel to kill dragons that are
coming from one side of the screen. I have provided an FLA with all of the
graphics you will need, but you will need to place the graphics in the right
spot. This tutorial is more of an explanation of the code with some design work
as opposed to a fully-featured tutorial covering every aspect of a vertical
shooter.
The following animation is an example of a vertical shooter. Click inside the
animation to give it focus. Use your left and right keys to move
left and right, and press the up key to fire an arrow at a dragon.
[ an example of a vertical
shooter ]
Let's Start
Because there are some sprites in the game, I have provided them for
you. That way, you can focus more on the Flash as opposed to the actual design
work. Download and open the following FLA for the sprites:
Download
Sprites FLA
Now that you have your list of sprites, let's continue.
We need a sprite to make it walk, in this case I use a movieclip of Pawel
(see sprite.fla) and as he is a knight, the instance name is knight:
On another layer, in the first frame of our timeline copy and
paste the following
ActionScript:
- //---- variables ----
- var steps:Number
= 5;
- var spriteX:Number
= 265;
- var spriteY:Number
= 265;
- //---- functions ----
- function checkKeys()
{
- if (Key.isDown(Key.RIGHT))
{
- spriteX +=
steps;
- } else
if (Key.isDown(Key.LEFT))
{
- spriteX -=
steps;
- }
- }
- function updatePawel()
{
- knight._x
= spriteX;
- knight._y
= spriteY;
- }
- this.onEnterFrame
= function()
{
- checkKeys();
- updatePawel();
- };
Ok, our hero is moving from side to side on the screen but, he can even
move outside of the stage! We can animate the legs and the arms so it will look better and it will add the option of throwing arrows (we don't have arrows yet).
If you double click on your knight movie clip, you should be
in the timeline for that movie clip. You will see three layers corresponding to
the body, arms, and legs:
More importantly, notice that the arms and legs are movie
clips with the instance names...arms and legs! If you look inside
the arms and legs movie clips, you will find that they have some keyframes that
provide some extra animation for movement.
Let's modify our code to take advantage of the new movement in
the legs and arms:
- //---- variables ----
- var steps:Number
= 5;
- var spriteX:Number
= 265;
- var spriteY:Number
= 265;
- //---- functions ----
- function checkKeys()
{
- if (Key.isDown(Key.RIGHT)
&& spriteX<510)
{
- spriteX -=
steps;
- knight.legs.play();
- } else
if (Key.isDown(Key.LEFT)
&& spriteX>40)
{
- spriteX -=
steps;
- knight.legs.play();
- }
- if (Key.isDown(Key.UP))
{
- knight.arms.play();
- }
- }
- function updatePawel()
{
- knight._x
= spriteX;
- knight._y
= spriteY;
- }
- this.onEnterFrame
= function()
{
- checkKeys();
- updatePawel();
- };
In the next page, I will explain the above code and guide you
through adding features such as the background and arrows.
Onwards to the next page!
|
page 1 of
4 |
|
|