HaxeFlixel tutorial: building your first 2D Shoot ’em up. Part I

Hello there!, today we are going to go straight to business by starting with the first stage of a multi-part tutorial on how to build a simple -yet very illustrative- game using the wonderful HaxeFlixel framework <3

The idea here is rather simple. We are going to create the skeleton of a 2D horizontal space shooter game, in the style of Gradius, R-Type or Thunder Force. You know the drill. But you probably have already seen lots of tutorials on teaching how to do something similar. Problem is, most of those tutorials show you how to build a game where there is no actual scenario or pattern to the game. Probably they just generate enemies and obstacles in a random way, and leave you with the simple goal of surviving and ranking up as many points as you can.

Gradius-III

Having customized scenarios and accurate enemy placement really bring these games to life

 

That’s ok and really nice, but I want to give this tutorial a twist, and for that we are going to lay the groundwork for you to build a space shooter that you will be able to expand on. We are going to have custom levels that you will be able to design freely in a level editor, without having to touch a single line a code.

Are you up for it?, let’s get started then!

 

Setting up the project

First things first, we are going to use HaxeFlixel to build this, so you need to get all set up an installed. You got that covered right here in a very easy and detailed way, so you won’t have much trouble getting it done. Once you got everything installed and updated set up a project template by typing the following on your console/terminal:

Navigate to the newly created folder and you will see a bunch of files and folders that have already been set up for you automatically (assets, source files, project.xml, etc).

If you want to test your game at any given point just type thist:

This way you can quickly test your current build on your desktop. You can easily do the same to test on other platforms, but we will cover that later.

If you run the project as is you will see the HaxeFlixel logo animating playfully and then you’ll be greeted with a black screen where nothing happens. Sweet.

 

Getting started

Ok, now go to the source folder. You will see a bunch of premade .hx files. Main.hx is the entry point for our application, from here you can configure a few aspects of the game, such as resolution and display options, and more importantly, we get to decide which “State” class gets to be launched first. As it is the code will be instantiating an already built and empty MenuState (which explains the black screen you saw before when launching the game). We don’t want this to be like this so we are going to create a new StageState.hx file inside the source folder and we are going to modify the Main.hx class like this:

As you see we set the game’s resolution to a fine 640×480 and we also disabled the startup Haxeflixel loading screen.

Now open up your newly created StageState and paste the following code:

Before we move on let’s take a look at what we have here. This is the basic structure of a FlxState class, and at its core we find 3 methods:

create(): which is called when the State class is created (with new StageState(…)). This is where you create and alloc everything you will use and need on your scene.

update(): which is called on every frame (you can set up the framerate on the Main.hx class) and updates the state of the scene. This is where you will place your game’s logic.

destroy(): called when the state is going to be destroyed. Here you will free up any resources you are not going to need. We are not going to spend much time with this right now but you have to be sure you dispose of unused resources and memory properly. This isn’t Java and you don’t want to miss stuff out that could lead to nasty memory leaks.

Next up, modify the create() method and add the following:

Also, add the playerBullets class variable:

This will create a Player entity and add it to the state, as well as a group (similar to a set of elements) that will contain the bullets that have been fired by the player. You will see the benefit of this scheme a bit farther down the road.

Next up, as you might be wondering, we created a player and some bullets, but we don’t have classes for those two entities, and you would be right. But we are going to fix that right now.

 

Player movement and firing

Create two new class files: Player.hx and Bullet.hx and set them up like this:

And here is the player class:

This two classes extend from another of the most basic and important classes on HaxeFlixel: FlxSprite.  This class will give us an entity that can be added to scenes, can have a set of sprites attached to it, and that can be positioned and moved around the scene. It can also be animated, transformed and collided with other FlxSprite entities. It is incredibly useful!

As you can see, it has a new method where you will assign it’s spritesheet and initialize its internal variables, such as speed, direction, health, and so on.

It also has an update method, which will be called on each frame (as with the State’s update method) and will be useful to update the Sprite’s states. Things like animation and internal AI (for enemies) will go here.

You also get a destroy method, which as you probably have correctly guessed by now is, well, called when you dispose of the sprite.

For starters we need bullets to be able to move on a set direction with a certain speed and to have some specific damage value assigned to it. As you can see we move the object by adding the speed value to the sprite’s internal velocity value. This value (along with acceleration) is checked by the state the sprite has been added to and then used to alter the sprite’s position inside it on every frame. Clean, handy and efficient.

The Player class is fairly similar. Note the way we attach graphics to the sprite:

This Reg.PLAYER is simply a path to the .png file we assigned to our player class. It can be found on the Reg.hx file, among other values:

These images are temporary, and you can store them wherever you feel like. I put them into the assets/images/sprites folder I made to keep then organized and tidy.

Also, on the player class, notice how we check for player input on the update method, is easy and straightforward, and works just they way you think it will.

We set up a method to allow the player to shoot bullets. This simply creates and adds a new bullet to the playerBullets group, which will be passed to the Player class by the state scene, so the player can access the state directly and cleanly.

The beauty of this  resides on the fact that all the player bullets are stored as a group, so collision detection is very easy to perform, as well as deleting and managing the whole bunch of bullets all at once.

With this set up you should be able to run your game and move your ship around while shooting some bullets. Mine looks like this right now:

Captura de pantalla 2014-11-30 a la(s) 11.51.30

Placeholder graphics rule. Space Brick to the rescue!

It is nothing special as it is, but just you wait, because on part II we will be creating  our custom scenario, with destroyable tiles and enemies!, yay!

That’s it for today, thanks a lot for reading and stay tuned for updates!

This is part 1 out of 6 of a tutorial series, you can check out the rest here:

 

One thought on “HaxeFlixel tutorial: building your first 2D Shoot ’em up. Part I

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.