Haxeflixel tutorial: buidling your first 2D Shoot ‘em up. Part IV

And here we are, back again with what is already part IV of our HaxeFlixel 2D shoot ’em up tutorial. I hope you are following up nicely until this point. But if you are not, don’t fret; by the end of the tutorial I will do a small recap through the most delicate parts of the whole process and I will post the full game code on Github, so you can all have the whole thing on your computers so you can tweak and modify it to your hearts content.

HaxeFlixel logo

HaxeFlixel rocks!

Ok, today we are going to do a few subtle things that we were missing and that must be addressed right now, let’s get to work!

 

A brick no more

First, we are going to finally give some proper looks to our player. We are designing a simple spritesheet that contains 4 different states of our ship:

player

Initial player spritesheet

As you can see we have 2 sprites with the engine on for when the ship is moving, another one with the ship exploding for when the player dies and a fourth one with the ship with its engine off.

We will also create a very simple spritesheet for the basic enemy:

Captura de pantalla 2015-01-21 a la(s) 20.45.32

Initial enemy spritesheet

One state for the enemy and another one for the same thing exploding.

Once you are done with this we can go straight to the player.hx and modify the new() method a bit, like so:

Since we are now using a spritesheet we have to load the player graphics a bit different. When loading the spritesheet we have to specify the width of the sprite frame we want to use (in our case, 32×22). After that we can set up a specific set of frames inside of the spritesheet that will make up our animation. First, as you can see, we set up the fly animation, which is composed out of the two top frames (which have the indexes 0 and 1). The number 5 after the frame array specifies how long will this whole animation take, and the last boolean tells the engine if the animation should loop or just play once.

Next we set up the explode animation ,which is only composed of one frame.

Once we have “registered” and named these animations we can use them anytime we want by calling the play() method on them.

And now, we do the same for the enemy ship.

By the way, notice how we set up the alive variable to true on the player class and the active variable to false on the enemy. We will use these two values on the next part, so keep them in mind.

 

I KILL YOU

It is finally time to make our player mortal. Until now we didn’t perform any collision detection for it, so we could pretty much blaze our way through the level without a scratch. That ends now.

And since we are emulating some classic Shoot ’em up games we are going hardcore and we are going to go by the motto “one hit and you are dead”, so let’s get to it.

First we create a simple method inside Player.hx to kill the player and present it’s death animation (we will expand it later):

Also, inside Player.hx’s update method we modify the input section to take into account wether  the player is alive or not:

Now, on StageState.hx’s update method, near the end of it we add the following checks:

These will collide the player with the destroyable blocks, the enemies and the scenario tiles.

Note that collision with the scenario Tiles are done a bit differently, because we only want to kill the player if it touches any of the walls, so we don’t want to collide it with every cell of the tilemap.

Now, we need to add this bit at the end of the overlapped() method inside of StageState.hx:

Now, our player is finally mortal. Blocks and enemies will destroy it an play the nice exploding animation we set up for that purpose.

 

Game over man!

Since we are killing the player now we also need a GameOver method to call when the player dies. In here we will perform different actions in the future, like showing a GameOver label on screen and a Hi-Score and we will also check for player input in order to restart the stage. That’s all great, but for now we are going to do something pretty basic.

Add the following inside of StageState.hx:

This sets up a new global variable called gameOver to true, so the update method can check wether or not the game was lost. It also stops the camera scroll, so when the player dies the stage stops moving (objects and enemies will continue working, since we didn’t tell them to stop on the update() method.

 

Move like you have a purpose

And as a final touch we are finally going to make our enemies move towards the player. And since their design is so round and pointy we are going to make them spin around while moving!

Add the following to Enemy.hx’s update() method:

And set up ENEMY_SPEED and ROTATION_SPEED as global variables:

Now, our enemies will start rotating and moving right from the moment they are set to active. And to do this we have to go back to StageState.hx and add this inside of the update() method:

And also add this method at the end:

This way, we activate enemies from the moment they appear on screen, so enemies will stay on the position you set them to when building the map on Tiled editor until their moment arrives. Also, if the player didn’t manage to kill them and they go out of the camera bounds they will stop, so they won’t keep going on forever.

You can now test you game and finally enjoy some challenge, since now you can die and need to avoid the walls and enemies moving towards you. This is feeling more like a game little by little!

That’s it for today, as you can see we did some small but important improvements to our game. On the next part we will continue polishing it and adding more features, like some much needed sound effects!

 

Thanks a lot for reading and stay tuned for updates!

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

 

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.