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

Let’s pick up right from we left things last time. We finally had our “ship” moving around and being able to shoot bullets, right?

That’s great, but now it’s the time to set up a way to load tiled levels and even more, we need at least one level to be able to test everything out!

We will fix that right away, but to do so we need to use a new tool to build our level.

Introducing Tiled editor

Tiled is a simple tilemap level editor. You can use its simple graphic interface to place tiles around, set up different objects and group them inside various layers. It’s really easy to use and you’ll get the hang of it in no time.

Download Tiled fro its website and fire it up. Select File -> new and create an orthogonal tiled level with 32×32 tile size and with a width of 100 tiles by a height of 15 tiles (this will fit the full height of our set up screen, because our vertical resolution is 480 = 15*32).

Captura de pantalla 2014-12-15 a la(s) 22.07.59

Creating our new test map

Now Select Map -> Add new pattern group and select a placeholder image that is 32×32 pixels. (Later you will be able to change this with your own graphic tileset, but for now let’s keep things simple).

With this done, select Layer -> Add new pattern layer. You will see a new layer added to the menu on the right side of the screen. Change the layer name to “scenario”. Right click on the layer and select “Layer attributes”. Create a new attribute with “tileset” as name and your placeholder tileset file’s name as value.

You are now ready to start placing tiles around. Draw a simple map in any way you want, but make sure you close up the floor and ceiling of it.

 

Captura de pantalla 2014-12-15 a la(s) 22.06.55

Draw your map any way you want!

With this done we are going to do one final task before continuing. Select Layer->Add new object layer and create a layer named “block”. Do the same again and create another layer called “enemy”.

Now, in the same way you did before place some objects around the map where you want to place destroyable blocks and enemies. Also, add a “health” attribute to every enemy you add, and assign it an integer value (i.e health – 50).

Captura de pantalla 2014-12-15 a la(s) 22.13.03

“Final” test map with a tower made out of destroyable blocks and some enemies to shoot down!

Ok, great job. We now have what we need to continue. Save your map and place the .tmx file you obtained into our assets folder inside our project.

Loading the map into our game

With our map done and in place we need to build a way for our game to read the file and create the map inside our StageState. For this reason we are going to create a new .hx file called TiledStage. When you are done paste the following inside:

Woah, that’s a lot of code.

Don’t panic, let’s review it bit by bit.

First, note that this class extends an already made HaxeFlixel class called TiledLevel. This class takes care of providing us with tools to parse the tmx file and access its rows and cells in an easy and understandable way.

As you can see we create 3 groups that will hold the scenario tiles, enemies and destroyable blocks that will compose our map.

After this we will loop through every layer inside our tmx file, and depending on its name we will load a specific graphic tilesheet depending on the tilesheet property assigned to that layer (make sure to add the path to this file inside the Reg.hx file).

Notice how the code checks for layers named bg and fg. Don’t worry about them now. For now we only need to add tiles from the scenario layer to our collidableTiles group. This will hold every scenario tile in one place so we can perform collision detection in a more efficient and simple way.

After this you notice how we wrote a “loadObjetcs” method. This will loop through every object layer and call the loadObject method we describe below.

There, we parse every object and determine its class (depending on which layer it belongs to) and therefore we will be able to attach it to state (note that we pass it as an argument).  For every object we create an instance of its specified class, and we initialize it according to the attributes assigned to it on Tiled editor.

As you can see it is quite simple, really. But if you have been paying attention you probably noticed how we didn’t define a class for Blocks and Enemies. Let’s fix that right now.

Here’s the Enemy class:

And here is the block class:

Simple stuff -for now-. Enemies and blocks have health so that we can keep track on when to destroy them. In our next post we will add more functionality to them, and we will also write simple AI code for the enemies.

With all this set up we are just one step away of being able to test out our new level. Go to StageState and add two new variables referencing our map:

And then initialize our map and append its groups to the stage like this (add it on the create method):

Nice and easy. As you can see we have to add each group to the state, and when we call the map’s loadObjects method it will fill up every group with the read object data.

After all this hard work we earned some results, don’t you think?

Run your test project, and if everything went ok you will see something similar to this:

Captura de pantalla 2014-12-15 a la(s) 22.40.37

Even more placeholder graphics. Lovely!

You will be able to move around, but something weird is going on. You can’t destroy anything and you are like a ghost that can fly past everything.

Don’t fret, we will fix that on the next part of this tutorial, where we will start to blast things up while having to dodge things in order to make it to the end of the level.

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

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

 

UPDATE (24-03-15) – Fixed an issue that prevented a different tileset to be used on a map layer. Thanks to Dimitri for pointing it out!

 

4 thoughts on “Haxeflixel tutorial: buidling your first 2D Shoot ’em up. Part II

  1. Hi,
    thank you for the tutorial.
    I’ve found that adding a layer with a different tileset won’t work with this code. What you need to change is:
    in tilemap.loadMap() the last four parameters are 0, tileSet.firstGID, 1, 1 instead of 0, 1, 1, 1
    It burnt me a couple of hours.

Leave a Reply to Marcio Andrey Oliveira Cancel reply

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

Time limit is exhausted. Please reload CAPTCHA.