HaxeFlixel tutorial: buidling your first 2D Shoot ‘em up. Part VI

Well, this is it people, we finally reached the last part of our 2D shoot ’em up tutorial. Today we are going to finish and wrap things up, and you are going to be able to download (and play, of course) the full thing by the end of this post (don’t worry, the full source is available on Github, right here).

I’m going to cover the main and more important changes and updates that I made to the code, so minimal things like the game over and stage completed messages won’t be covered in order to be able to focus on the most important and “difficult” things to do.

By the way, since our tutorial game is obviously a Gradius tribute (which is a fancy word for clone) there was only one possible way to call it, and that is…

 

haxius_logo_big

 

 

Let’s get to work!

 

Big green meanie

No 2D shoot ’em up that is proud enough to call himself that has lasted long enough without having some really big and badass  end-stage bosses. Ours will be no exception, so I created this ugly fellow:

boss

RWARRR!

He’s a looker, right?

The main idea behind this guy is that he will appear by the end of the level and then move around and shoot at you as much as he wants. Also, we want him to have a weak point inside his mouth, so players have to do their best in order to land a good shot at it instead of just blazing off their guns all over the place.

We are going to create a new class to represent this guy, but before say “oh nice, another FlxSprite extended class”  pay attention, because this time it we will be extending FlxGroup instead. We need to do so so we can have different parts belonging to our boss, that will be moved and used all at the same time.

Here it is:

There are quite a few things here, but the most important are the two differentiated parts of our boss: body and weak point. Both are FlxSprite extended classes and both have the own classes that just load the graphics for each needed part.

As you can see we use the add() method of FlxGroup to build our boss’s parts inside the group. This works just like FlxState (in fact, FlxState is jut an extension of FlxGroup). Also, we set up an array of bullets for our boss (which will be a reference to the one on StageState, so the boss is able to add bullets inside the scene) and the boss’s health.

Now, we also set up methods to move it around and to make it attack. Notice the control variables isMoving and lastTimeShot, we will need them so the boss won’t be able to shot at all times or to change direction at any second.

Notice how the update method makes the boss move randomly inside the screen bounds (hardcoded values suck, i know, but bear with me). The important part here is the bX variable. This is the x value of the current scroll inside StageStage’s tiled map. This is very important, because otherwise we would not know where exactly do we have to place our boss. With this you will be able to create any level you want, and every time you reach the end of it the boss will appear precisely there and not somewhere halfway the level where you can’t see him. Nice and easy.

Ok, with this done we only need to make our boss appear on scene. Precisely, we will make it appear (and change the game’s music too) when the stage gets to the end, that is, when the scroll has stopped.

Add the following inside StageState’s update()  method:

Simple.

If the boss is not already on scene and the game has stopped scrolling (and we haven’t died or won yet) we place our boss in the middle of the stage, right in front of the player. Also, we start playing some “bossy” music to spice things up a bit.

Now, our boss will appear on scene by the end of the stage, but if you run the code like this it won’t do a thing. We have to give him some orders, so to do this we just simply call it’s update method on every frame (only when his is on scene, of course!).

Place the following inside StageState’s update() method:

Ok, we have now our boss in place, but we need it to be able to react to player’s bullets and collide with him, so let’s just add collision checks for this:

And inside overlapped():

Nothing special. As you can see once the boss is dead we create a few explosions around where it was and the we finish the stage.

Also, remember to add collisions with the players ship and the boss’s body and weak spot:

And that’s it, we now have a fully functional and somewhat challenging end stage boss 🙂

 

Endings are beginnings

With this done, we have to do one final thing that will make our game feel a complete. That is, of course, a proper title screen!

We have to create a new FlxState that will be the entry point of our game, so you have to change the following line on the initialization code of Main.hx:

Now, the title screen will display our awesome logo and some fancy particles simulating stars moving around into space. Also, we want a “press start” message that will blink a bit, because blinking things are awesome (yay).

 

Here is the TitleState.hx  class code:

It’s really self explanatory, we set up our logo, our text with with a FlxFlicker effect that will change it every 0.5 seconds and a particle emmiter that will generate white particles all over the place.

Notice how when we create the emitter we already fill it up with some particles, so it can start throwing the m out from the beginning, instead of having to wait to regenerate them.

And last, you can see how we set up the keyPressed listener so once players press the space button the epic Gradius “press start” chime plays out. As before, we set up a timer so the state switches to the StageState scene once this tune finishes playing.

 

Wrap up

And that’s it. You now have completed a simple -yet interesting- game, that has some fun mechanics and that is completely customizable and expandable. I would suggest designing a few more enemies with different attack patterns and making a lot more stages and bosses. Also, a nice power-up system would be a nice addition to the mix. Whatever you decide, now is totally up to you (and feel free to show/share it with the rest of us!).

I hope this tutorial has been useful and interesting for everybody as it has been for me. Believe it or not, I have been wanting to make a game like this for quite some time now and It has been a very entertaining and insightful process. Making games is kinda cool sometimes 😛

But enough talk, let’s play our creation!

Captura de pantalla 2015-02-21 a la(s) 13.09.06

 Click to play the web version!

 

Download links (Desktop versions)

Mac

Linux

Windows

Source code

Github

 

Thanks a lot for reading, stay tuned for more tutorials and gamedev madness!

 

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

 

One thought on “HaxeFlixel tutorial: buidling your first 2D Shoot ‘em up. Part VI

  1. Nice tutorial, but should mention (and show) how to implement object recycling (especially the bullets).

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.