Haxeflixel tutorial: buidling your first 2D Shoot ’em up. Part III

Hi there!, ready for more 2D shoot ’em up making? Good, let’s continue from where we left off last time.

As you know, we finally had a way to load tiled levels and populate them with walls, destroyable blocks and some enemies. That’s great, but we need to be able to slowly scroll the level to the right, or our ship won’t be able to actually get anywhere.

HaxeFlixel logo

HaxeFlixel rocks!

On top of that, we need to build a collision system so we can collide objects between each other, and to be able to keep the player inside the game stage bounds. And those two things are exactly what we are going to do today. Let’s rock!

Scroll me, baby

This is fairly simple. Since we already have a loaded map and a state camera set to move inside its bounds (check TiledStage.hx for details) we just need to be able to tell that camera to move slowly to the right (in our case). For this, first, add the following class variables to StageState.hx:

These will allow us to keep track of the scrolling, so we will know where exactly is the camera pointing and if we want to keep it scrolling or not.

Then, at the end of the create() method (on StageState.hx as well) add this:

Great. With this we are telling the camera to point at (0,0 ) on screen. You would think this will mean that we will be seeing the top-left corner of our loaded map centered on screen, and you would be right, but since we created our camera on TiledStage.hx using the following:

we tell the camera to stick to the map bounds, so it is forced back inside the map bounds and it can’t show anything outside them. Really convenient for us.

Finally, go to StageState’s update() method and add the following, just after “super.update()”:

This simply will update the camera x-position by the value of screenSpeed on every frame, and will stop scrolling when we reach the end of the map.

Notice how also we compensate the player position so our ship will follow our camera even when the player is not touching the controller (otherwise he would just be passed away by the camera!).

If you run your game now you would finally notice how the map slowly scrolls to the right in a smooth way. When it reaches the end of the map the scrolling will stop. Just as we wanted!

Captura de pantalla 2014-12-31 a la(s) 10.17.36

It’s a dead end!


Now, your ship still passes through everything, and it can also leave the stage bounds, which isn’t good. Let’s fix that right now!

A ghost no more

Ok, we want our game objects to collide between each other, so bullets damage enemies and walls are not transparent and irrelevant. For this we are going to add the following at the end of StageState’s update() method:

As you can see we use two methods provided by HaxeFlixel called overlap and collide. They simply do what you expect of them.

Overlap detects when two objects are overlapping each other (one from each of the groups you pass as argument to the method) and when such overlapping occurs calls a callback method. In our case this is the overlapped method. Which we will see in just a moment.

Collide on the other hand, is a simplified version of overlap. It just takes care of collisions in a general way, so any object inside any of the groups won’t be able to pass through each other. Inside it calls FlxG.overlap but sets its callback to FlxObject.separate, which does exactly that, makes sure that those objects stop right in their feet if the try to keep going against each other. Easy, isn’t it?

Now, collide works all right for general collisions where we just want objects to stay away of each other, but in many other cases we want to do something different when objects collide. For example we may want a bullet to damage another object and the disappear. That’s why we built our custom overlapped() method, which looks like this (add it to StageStage.hx):

This function will be called with the both entities that where deemed to be overlapping. But since we don’t know exactly what kind of objects they are we need to ask them for their class name. Once we know that we can just create a Dynamic var and cast each object with its appropriate class and then we can just work with them and use their methods and variables. Sweet. As you can see all we do for now is take care of bullet collisions against Bullets and Enemies, calling their instance damage() methods and destroying the bullets in the process.

You can now run the game again and enjoy some primitive but promising shooting gameplay, since you can at last shoot things down with your bullets! 😀

Captura de pantalla 2014-12-31 a la(s) 10.35.11

Get out of my way, stupid brown blocks!

Well well, looks like we are finally getting somewhere, don’t we? There is still a lot to do, and we will have to tune everything a bit to make the game more interesting, but don’t worry, we will get there soon. For now, enjoy your daily achievements and have a great New Year’s Eve.

See you next year!, Godspeed!

This is part 3 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 III

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.