So you want to make a SHMUP? Well first off, I’m going to assume you know some AS3, already have Flashpunk and know how to get it setup with FlashDevelop.
Now that I know you have flashpunk setup correctly, I’m also going to assume that you at least know the basics of Flashpunk.
With that all out of the way, let’s start with a standard “Main.as”.
package { import net.flashpunk.Engine; import net.flashpunk.FP; public class Main extends Engine { public function Main() { super(560, 280, 60, false); } override public function init():void { super.init(); FP.world = new GameWorld; } } } |
And a new class named “GameWorld.as”
package { import net.flashpunk.World; public class GameWorld extends World { public function GameWorld() { } } } |
You should check if your project compiles now. If it doesn’t then you need to go back to the first tutorials on Flashpunk and make sure you followed them correctly.
If all went right, you should get a black screen when you compile your game. If you have white edges on your screen, make sure you set your FlashDevelop Project settings resolution to match 560×280. Exciting right? No? Alright let’s continue then.
Next we will start with a ship for your players to control. First you’ll need an image for your ship. Here is a 32×32 sprite for you to use if you don’t feel like making your own.
I would suggest making a folder within your project to hold all of your images and saving it there.
To keep naming of files simple, let’s make a new file named “Player.as”
package { import net.flashpunk.Entity; public class Player extends Entity { public function Player() { } } } |
Now some people would jump right in next and embed the ship sprite right into this Entity, which works just fine and makes you progress quickly to the next step, but since I am making this tutorial to show you how I would make a game, we are going to use a very common practice of making an Assets file. The reason why we do this, is to make the project easier to work on later. What if you want to use the same graphic for different entities? Then you would have to embed the same file multiple times. It also can cause headaches if you want to rename an image and have to update a lot of entities to match.
So without further ado, make a new file named “Assets.as”
package { public class Assets { public static const GRAPHIC_SHIP_PLAYER:Class; } } |
Set your cursor in the blank line right below the { bracket and before the public static const declaration. Next, in FlashDevelop navigate to your image for your player and right click on it and select “Generate Embed Code”. It should look something like this.
[Embed(source="Images/ship.png")] public static const GRAPHIC_SHIP_PLAYER:Class; |
Now since you have embedded your image as a public static const you can access it from any of your other classes. Let’s do that now back in your “Player.as” file!
import net.flashpunk.Entity; import net.flashpunk.graphics.Image; public class Player extends Entity { public function Player() { graphic = new Image(Assets.GRAPHIC_SHIP_PLAYER); } } |
What we are doing here is setting the graphic of the player entity to equal a new Image which is made from the player ship that you just embedded in your assets file. To do this, we need to import the Image class from the flashpunk graphic library. This is also covered in the Flashpunk basics, so you should already know how to do this.
I’m sure you are anxious to see all of this hard work, let’s add the player entity to our “GameWorld.as” so that our game isn’t just a black screen when we compile it.
public function GameWorld() { var _player:Player = new Player; _player.x = 64; _player.y = 240; add(_player); } |
That declares a new instance of our Player class, setting it’s x and y, and adding it to the GameWorld when it is first initiated.
I would suggest compiling your game now to check for errors.
Excellent! Now we can finally start progressing past the basics! Let’s start with making your player move left and right.
Alright, update your “Player.as” with this and I will explain what was changed.
package { import net.flashpunk.Entity; import net.flashpunk.FP; import net.flashpunk.graphics.Image; import net.flashpunk.utils.Input; import net.flashpunk.utils.Key; public class Player extends Entity { private var moveSpeed:Number = 200; public function Player() { graphic = new Image(Assets.GRAPHIC_SHIP_PLAYER); Input.define("right", Key.RIGHT, Key.D); Input.define("left", Key.LEFT, Key.A); Input.define("down", Key.DOWN, Key.S); Input.define("up", Key.UP, Key.W); Image(graphic).centerOO(); } override public function update():void { if (Input.check("right")) x += moveSpeed * FP.elapsed; if (Input.check("left")) x -= moveSpeed * FP.elapsed; if (Input.check("down")) y += moveSpeed * FP.elapsed; if (Input.check("up")) y -= moveSpeed * FP.elapsed; if (x < 32) x = 32; if (x > FP.width - 32) x = FP.width - 32; if (y < 32) y = 32; if (y > FP.height - 32) y = FP.height - 32; } } } |
Alright, now to explain what all of that does!
private var moveSpeed:Number = 200; |
This is just a private variable for how fast your ship will move in pixels per second.
Input.define("right", Key.RIGHT, Key.D); Input.define("left", Key.LEFT, Key.A); Input.define("down", Key.DOWN, Key.S); Input.define("up", Key.UP, Key.W); |
This defines the keys for “right”, “left”, “down”, and “up” so that way we can use arrow keys or WASD without having to do multiple checks for each key press.
Image(graphic).centerOO(); |
Since we know that our graphic is an image, we can cast it as one and call the centerOO function to center the images origin. Basically what it does is move the graphic’s origin to the left and up by half of it’s width and height. This isn’t really needed yet, but it’s something that I personally like to do as I prefer having the X and Y of my entities be the center of their image.
override public function update():void |
This is the magic that powers it all, all Flashpunk entities have this function and is very handy to override to run code that you want to happen every update. A lot like an enterFrame event would be used, but it’s not creating a new event for each entity
if (Input.check("right")) x += moveSpeed * FP.elapsed; if (Input.check("left")) x -= moveSpeed * FP.elapsed; if (Input.check("down")) y += moveSpeed * FP.elapsed; if (Input.check("up")) y -= moveSpeed * FP.elapsed; |
Now you should be able to see why we made that moveSpeed variable. Instead of writing in a static number four times, and having to update it whenever we want to tweak the speed, all of the movement is getting your speed from that single variable. Multiplying it by FP.elsapsed is what makes your player move 200 pixels every second, instead of 200 pixels every update. FP.elasped is a number that is calculated every update based on how much time has passed since the last update, multiplying your movement by this ensures smooth movement even if your player is lagging and has a poor frame rate.
if (x < 32) x = 32; if (x > FP.width - 32) x = FP.width - 32; if (y < 32) y = 32; if (y > FP.height - 32) y = FP.height - 32; |
This just prevents your player from moving out of the screen. You can change these numbers further if you wish to prevent your players moving to certain points. I’m using FP.width and FP.height to ensure that even if you changed the resolution for the game, it still moves just to the edge of the screen and stops.
I wanted to cover more in this tutorial, but with the basics out of the way we can cover a lot more in the next one! If you have any questions feel free to leave a comment!
You can download a zip containing the entire project for this tutorial here.