Tag Archives: flash game

Top-Down RPG Shooter — Part 4 — Shooting

Welcome to Part 4 of the Top-Down RPG Shooter flash game tutorial. So far, we’ve set up the project, and added a player that moves with the arrow keys and rotates to face the mouse. In this part, we’re going to add bullets which the player can shoot by clicking and holding the mouse down.

The very basic concepts relating to shooting have already been covered in-depth in Part 10 and Part 11 of my Sidescrolling Platformer tutorial series, so this tutorial might seem a little faster paced. If you find yourself confused with the basic ideas, it might be a good idea to review those tutorials. (But don’t worry, I’ll still try to explain things clearly in this post, too :-)

Step One: Creating the Bullet MovieClip

Just as we did with the player, before we start programming the bullet with AS3, we need to draw it and link it to a class. I drew mine as a black rectangle, 20px wide by 6px tall — but as always, feel free to customize your own art to fit the mood and theme of your game. Be creative! When the art is finished, select it, Convert to Symbol, and link it to a class named “Bullet”, as outlined in the following screenshot:

as3 flash game tutorial top down rpg shooter bullet class movie clip

Step Two: Create a simple Bullet.as class

Create a blank Actionscript 3.0 file (using File –> New… –> Actionscript File), and save it as “Bullet.as” in the same folder as your other project files. Start out by typing or pasting this block of code into Bullet.as. I included a bunch of comments in there to walk you through it.

Continue reading →

Top-Down RPG Shooter — Part 2 — Player Movement

Welcome back to the second part of my “Top-Down RPG Shooter” flash game tutorial. In the last part, we set up a new project and linked it to an external Document Class, and we added the Player to the stage. In this tutorial, we’re going to program keyboard controls to move the player.

Step 1: KeyObject.as

We are going to make use of a really great open-source class called “KeyObject.as“. This class was written by a talented developer named senocular. It provides a really simple but powerful way to check which keyboard keys are pressed.

Copy and paste this class into a new .as actionscript file, and save it as “KeyObject.as” in the same folder as your main project:

package {

	import flash.display.Stage;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	import flash.utils.Proxy;
	import flash.utils.flash_proxy;

	/**
	 * The KeyObject class recreates functionality of
	 * Key.isDown of ActionScript 1 and 2
	 *
	 * Usage:
	 * var key:KeyObject = new KeyObject(stage);
	 * if (key.isDown(key.LEFT)) { ... }
	 */
	dynamic public class KeyObject extends Proxy {

		private static var stage:Stage;
		private static var keysDown:Object;

		public function KeyObject(stage:Stage) {
			construct(stage);
		}

		public function construct(stage:Stage):void {
			KeyObject.stage = stage;
			keysDown = new Object();
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
			stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased);
		}

		flash_proxy override function getProperty(name:*):* {
			return (name in Keyboard) ? Keyboard[name] : -1;
		}

		public function isDown(keyCode:uint):Boolean {
			return Boolean(keyCode in keysDown);
		}

		public function deconstruct():void {
			stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
			stage.removeEventListener(KeyboardEvent.KEY_UP, keyReleased);
			keysDown = new Object();
			KeyObject.stage = null;
		}

		private function keyPressed(evt:KeyboardEvent):void {
			keysDown[evt.keyCode] = true;
		}

		private function keyReleased(evt:KeyboardEvent):void {
			delete keysDown[evt.keyCode];
		}
	}
}

How do we use this class? Basically, we’re going to create an instance of it called “key” in our Player class (or wherever we need to access the keyboard controls). Then in that class, we can check the Boolean value of the keyObject’s isDown() function for specific keys. We can refer to keys by their unique keyCode. For example, if key.isDown(65) returns true, it means that the “A” keyboard key is currently being pressed.

Continue reading →

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.

Continue reading →

Sidescrolling Platformer — Part 12 — Basic Enemies

Welcome back to the side scrolling tutorial series. In this session, we will be adding (very) basic enemies to the game, which you can shoot and destroy with the bullets we created previously. This will create a lot of possibilities for what you can do with your game. In later tutorials we will add a scoring system and more advanced A.I. (artificial intelligence) to the enemies, but for now let’s focus on: creating the Enemy class, adding a few enemies to the game map, and destroying them when they are hit by a bullet.

Creating the Enemy Class

Creating the Enemy class is very similar to creating the Bullet class. If you just read Part 10 and Part 11, most of this step will look the same as when we made the Bullet class and symbol.

First, we need art. We need to create a Movie Clip object to represent the enemy on the stage. Feel free to decorate your enemy however you choose — it could be a random, inanimate object, a crazy monster, or anywhere in between.

Continue reading →

Sidescrolling Platformer — Part 11 — Fixing the bullets

Although we did get some functional bullets last time by using the Bullet class, we still need to make some major improvements. First of all, the bullets are added directly to the stage and have no idea about the scrollX and scrollY variables, so they don’t react when the player moves left, right, up, or down. Also, the bullets move at a sluggish pace — if they did react to the player’s movements, you could practically outrun them. Finally, they are never actually removed from the stage, so we waste precious memory that slows down the game. Imagine that we fired 1,000,000 bullets. The game would still be keeping track of all of them, constantly updating their positions, even if they are no longer on the stage. There’s some more code we can add to the bullets to handle all of this, and we are going to implement it in this tutorial.

Continue reading →

Sidescrolling Platformer — Part 10 — Shooting

Welcome back to the flash game tutorial: how to make a side scrolling platformer game in actionscript 3. I can’t believe we’re already up to part ten! As you can probably tell from the title, this tutorial part will exclusively feature shooting. Not all platformer games require this feature, but I’ve had a bunch of requests for this tutorial — probably because side scrolling shooters are an amazing game genre (for example, the classic Metroid games). We don’t have anything yet for our bullets to interact with, but don’t worry — next tutorial we will add the enemies. For now, let’s just focus on getting our hero to shoot.

Here is a preliminary demo of what we’ll be creating. Use the space bar to fire.

An External Actionscript File

…I knew this moment would arrive eventually… the moment when — *gasp* — we finally need to use a custom class and an external actionscript file. If you’ve never programmed anything with Object Oriented Programming before, and you’ve never created an external .as file, this might seem intimidating. Or perhaps you have no idea what I’m talking about. No matter where you stand right now, I hope that by the end of this tutorial you will have a solid idea of what external classes are, why we use them, and how to create a Class for the bullets. In future tutorials we will go into more depth on the topic.

Continue reading →

Sidescrolling Platformer — Part 9 — Animated Player Movements

All great platformers have animated heroes. Even Super Mario, which was released in 1985, used several animations for the player. Why? Because it would look completely unrealistic if Mario just stood frozen in one animation while he runs and jumps around the level. So it makes sense that we should add animations to our player. This will add yet another step of realism to the game.

Try running, jumping, or standing still. See how the player’s animation state reacts:

My art could definitely be improved, but I’ll demonstrate how to create these 3 animations for simplicity’s sake.

The Structure

The most important aspect of giving any game element multiple animation states, is to make sure you structure it correctly. When I first started programming, I tried to put all of the animations on a single timeline, and the resulting structure was too cluttered and complicated that it was difficult to make things work the way I wanted them to. So now I’m sharing with you a simpler method.

Continue reading →

Sidescrolling Platformer — Part 8 — Multiple Levels

Here’s the post you’ve all been waiting for… how to connect multiple levels in your platformer!

Try out this demo. Press the down arrow key upon opening the door to warp to the next level:

After adding the door and key last time, the next step is to make the door lead to the next level. “How?”, you might ask… just read on to see the magic unfold.

Continue reading →

Sidescrolling Platformer ~Part 7~ Keys and Doors

First, I’d like to apologize for my brief hiatus over the past month — I upgraded to a new computer, and Flash was out of commission for a while. But assuming you haven’t abandoned this site yet, here’s the next part of the side scrolling series.

Last tutorial pretty much finished up the bare-bone mechanics and visuals of a basic platformer. So I figured with this tutorial we’d start adding various extra features to spice up the game. This time, we’re adding a collectible key to the level, as well as a locked door which it will open. This door might be the end of one of your levels, which in turn might load a new level afterwards (although we aren’t coding multiple levels in this tutorial — just the door and key which will allow for this in the future).

Make sure you’ve read up through Part 6 of the series.

Continue reading →

Saving and Loading in Actionscript 3 (Mini-Lesson)

One thing you want to do as a game developer is make your players want to come back to your game more than once. And one of the best ways to accomplish this is to enable them to save their data for persistent gameplay. You might expect saving and loading to be tough to implement, but actionscript 3 is helpful enough to include the powerful SharedObject, which makes saving and loading data a piece of cake.

In this tutorial, we will create the following demo. Click the “+1” button a few times to add to your score. If you refresh this webpage without clicking the “save” button, your score will revert to 0 when the page loads. But if you do click the “save” button, your score will load automatically the next time you load the page. Try it out!

Continue reading to learn how to save and load data in actionscript 3