Top-Down RPG Shooter — Part 1 — Setting Up

Hello everyone! If you’re reading this, that means you haven’t given up on AS3GameTuts, despite my year-long hiatus. Thanks for your patience!

Today I’m going to start up a brand new tutorial series that I’m really excited about. How to make a top-down RPG shooter game! This tutorial is going to be slightly faster-paced than my previous tutorials. If you haven’t programmed before, I’d recommend starting with my Pong series, and then proceeding with the Platformer before you attempt this. We will be coding using AS3 in external .as files, instead of using the timeline.

What is a Top-Down RPG Shooter?

Personally, I think this is a pretty awesome game genre. I find these types of games to be genuinely fun to play.

In case you’re unfamiliar with the genre, let’s break it down:

Top-Down

Top-down refers to the perspective of the game. The world is seen from a bird’s-eye-view, and the player can move around horizontally and vertically. Prominent examples include early titles in the Legend of Zelda and Pokemon series. These games both use tile-based maps, which our game will not, for simplicity’s sake. Instead, we will draw each map individually, giving the game a more unique, hand-drawn look. (You are, of course, welcome to modify the game to use tiles, but I won’t be doing it in this tutorial.)

Our game won’t have a scrolling map. Instead, our map will be built from a series of screens that the player can walk through. When the player walks off one edge of the screen, the map will flip to the next screen.

top down rpg shooter game pokemon map

Pokemon Ruby and Sapphire feature great tile-based top-down maps.

RPG

An RPG, or Role Playing Game, is often loosely-defined to describe games where you play as a character who can level-up or collect items to improve as you play. What will make our game an RPG? I plan to give our character EXP (experience points) when we kill enemies, and level up when we collect enough EXP. Depending on how long this tutorial series goes, I might also include power-up items and equipment, and perhaps a currency system.

top down rpg shooter game legend of zelda map

The Legend of Zelda. A classic example of a top-down RPG.

Shooter

Shooter games are extremely popular. There is something inherently fun about aiming projectiles at enemies running around your screen. While “shooter” is a pretty broad category, including genres like the First Person Shooter, ours will be restricted to the top-down genre. We will move the player around the screen with the arrow keys, and use the mouse to aim and fire projectiles.

A perfect example of what we are trying to create is Robokill:

top down rpg shooter flash as3 game robokill

Robokill, an excellent top-down shooter.

Setting Up

Alright, I’m excited, and you should be too! Let’s get started!

I’m using Adobe Flash Professional CS6 to build this project. You can use any  version of Flash Professional to make this. (You can also try building it with a free tool like FlashDevelop, but you’ll have to make some adjustments when I use the stage, timeline, and Movie Clips.)

Start by Creating a New Project, making sure to select AS3 as the programming language. Adjust the size of the stage to be 640px wide by 480px tall, and set your FPS to 60.

Create the Player

Start by drawing a main character for your game. Remember that we are using a top-down perspective. I made mine a 40×40 pixel circle, with a little personality.

top down shooter main character player

This tough-guy is ready to take on some baddies!

Now convert your player to a Movie Clip Symbol, named Player (select all, then Modify –> Convert to Symbol). Make sure to center your Player using the little centered dot on the “Registration” option. In addition, in the Advanced options, check the box to “Export for ActionScript“, and give it the class: “Player“. Your options should look something like this:

convert player to movie clip options

Awesome! Your player should be all set now. You can remove it from your stage for now. We’ll add it again using code in the Main class.

Create the Main Document Class

Unlike my previous tutorials, we aren’t going to be writing our code on the timeline. Why? It is much easier for beginners to learn, but it isn’t best practice. Why? For larger projects, coding on the timeline can get pretty unorganized. It doesn’t take advantage of Object Oriented Programming (OOP), a pattern that people use when they code to do some pretty cool things, like reuse code, or have objects inherit properties from one-another. In order to do so, we need to write our code in external files rather than on the main timeline.

To start taking advantage of OOP, and to keep our project organized, we are going to make use of a Document Class. Every Flash project can have only one Document Class. This class is linked to the main project file, and its code is automatically executed when your project loads. You can think of it as a replacement for the code that would appear on the first frame of your timeline.

You can set the Document Class by typing a name into the “Class” text box on the Properties panel:

top down RPG shooter set document class to main

Set the Document Class to “Main” in the Properties panel.

Create a new Actionscript .as file (File –> New… –> ActionScript File). Now save this file as “Main.as” in the same folder as your Flash .fla file.

The file will probably start off completely blank.

You should add the following code to get things started:

package
{
    import flash.display.Stage;
    import flash.display.MovieClip;
    import flash.events.Event;

    public class Main extends MovieClip
    {
        public var player:Player;

        public function Main():void
        {
            player = new Player(320, 240);
            stage.addChild(player);
        }
    }
}

If you’ve never seen anything like this before, you should definitely check out my Platformer Tutorial on Shooting — I walk you through this basic code step-by-step.

You’ll notice that we declared a new variable called “player“, of type “Player“, which we then instantiate by passing in 320 and 240 as arguments. Finally, we add the player to the stage. Right now, this code won’t work. We haven’t created the Player class yet. Let’s do that now.

Create the Player Class

In the same way that you created the Main.as file, create a new AS3 file called “Player.as”. This class should already be linked to the player Movie Clip object we drew on the stage at the beginning of this tutorial.

Add this code to the file:

package
{
    import flash.display.Stage;
    import flash.display.MovieClip;
    import flash.events.Event;

    public class Player extends MovieClip
    {
        public function Player(X:int, Y:int):void
        {
            this.x = X;
            this.y = Y;
        }
    }
}

This code doesn’t do anything too interesting. All it does is set the player’s position to two integers. Run your code and you should see something like this:

That’s all we’re going to do in Part 1 of this tutorial. In Part 2, coming soon, we will give the player the ability to walk around, using the arrow keys or WASD keys.

Get the Source Files here: https://www.box.com/s/5nkeyheudte4ehgb4ale

As always, I look forward to your comments, questions and suggestions.

It’s good to be back :-)

Ben

31 comments on “Top-Down RPG Shooter — Part 1 — Setting Up

  1. Grambo says:

    Hey, welcome back, Ben.
    I’m so happy you are able to make another tutorial.
    I will off course still be on the forum, and I expect there will be more debugging for newbies for me in the future :D

    To everyone who needs help: Best help is at the forum, here:

    http://as3gametuts.forumatic.com/index.php

    • Ben Reynolds says:

      Hey Grambo! Thanks for all your help on the forum! Yup, I’m back. I’m working as a game developer at Gameloft this summer, but I hope to consistently put out new tutorials in this series. I just wrote Part 2, which is scheduled to be posted on May 30th! Stay tuned :-)

  2. Sam Bradbury says:

    Welcome back!
    Recently I had been looking for a tutorial along these lines and could not find much to help me, iv been through your other tuts in the past and I already know this will help me :)

  3. Jr. says:

    Nice start to this tutorial. Glad you are making one that involves external actionscript.

    • Ben Reynolds says:

      I’m happy to be doing a project with external actionscript, too — it’s how I usually program. I’ve just been using the timeline to help beginner programmers :-)

  4. Effsy says:

    Hooray! You’re finally making tutorials again! I’ve been looking for tutorials about programming in the document class, so this will be really helpful… I’ll be sure to follow along this entire series. Thanks again!

    • Ben Reynolds says:

      Hi Effsy! Thanks for your patience! I’ve been really busy this past year, but I hope to consistently publish tutorials in this series for the next few months. As always, I love to hear from my readers, so let me know if there’s anything you’d like to see.

  5. effsy says:

    Hooray! You’re finally back! I’ve been looking a for a tutorial on programming in the document class so I’ll be sure to follow along this entire series… Thanks again!

  6. Will says:

    Thanks, Ben! I’ve been waiting on a new installment for awhile. It’s good to see you back. And awesomely enough, you’re doing a tutorial on the type of game I’m story boarding right now! Life is good. Welcome back, and thanks for your hard work.

  7. Developer says:

    I love you so much..I knew you’d never give up on this blog. Thank you, thank you! You help me a lot!

  8. AKS says:

    Finally!!
    I always check this website everyday for update and now…finally!
    Please keep create more and more tutorials ! :D

  9. Jeferson Carvalho says:

    Hey, just say thank you for this great help, I’m just getting started in the world of development and these tutorials are helping me a lot! thank you very much

  10. Bernardo Raupp says:

    Found your site in the last week, I’ve read all your tuts and they’re excellent. Good news that you’re back to make more tuts. Kudos for you and thanks for those awesome materials. I’m brazilian and I’m doing digital games as my course in the college, first semester and whenever I have a doubt I come here for help. :D

  11. Matthew Starkey says:

    I’ve only just found your blog and I’m so happy I did and can’t wait to see the next update :D

  12. Eric Layne says:

    Awesome, welcome back! Eagerly looking forward to this series as top down rpg shooters are a personal favorite and a ton of fun. Thank you for continuing your tutorials!

  13. Nikhil says:

    Hey I’ve been following your platformer tutorial! Looking forward to this one too!

  14. itsmedonuts says:

    I’ve been following your platformer tutorial and it’s just amazing! Thanks man. Look forward to this tutorial because it utilizes external as3 files (which increases the simplicity of the game)!

  15. sawahgede says:

    Oh thank you so much Ben Reynolds, i have been looking for a tutorial about Role Playing Game Flash AS3 for a long time, and you help me with this tutorial. I’m waiting for the next part. :)

  16. sawahgede says:

    Aha, I have been looking for the tutorial about this Role Playing Game with AS3 Flash, thank you Ben Reynolds, i am waiting for the next part. :)

  17. anup says:

    I am new in as3, this tutorial is very helpful for me, you explain it so nicely, thanks for this tutorial

  18. Caab says:

    When i copy the main script into main.as, it comes up with this C:\Users\cottilo\Desktop\Game\Main.as, Line 13 1136: Incorrect number of arguments. Expected 0.
    Line 13 is player = new Player(stage, 320, 240);
    I didn’t change any of your scripts and followed it thoroughly from the start

  19. Monki says:

    Hi, when I tried the first part of the tutorial my character does not show up at the end was wondering if it was something I did with coding or if it was just I missed a step in changing the symbol to a movie clip?

  20. scoumbourdis says:

    I am new to flash and ActionScript and this is the best tutorial I could start with.
    Thanks a ton :)

  21. steve says:

    I am just moving from as2 to as3 and finding some changes a bit confusing so am going to follow this tut through.Thanks and welcome back.

  22. That potato guy! says:

    Hey Ben good to see your back! Been a while! I know you said that this game wouldn’t be including a tutorial for scrolling or a tile based movement but do you think it would be possible to add that at a later date? Thanks!

  23. Milos says:

    Thank You Ben Reynolds!!! Throu Your Tuts I´m starting to undersand AS3 (-: You wrote it so clearly. My brain is glad!

  24. Carrie says:

    I’d like too see a top-down maze-type RPG game.
    One that has only certain routes you can take & they lead out of the screen to different parts of the map.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s