FlashPunk, DAME and Lua Tutorial (Part 2)

01/22/2011

Welcome back to the next step in this tutorial series.  Here are the first two parts, where I covered the different software and languages being used.

The last part briefly went over the level design concept, so let's go further into each "Template" before moving on.

Template 1

Each "template" in this tutorial consists of a tilemaps layer, sprites layer, and shapes layer.  The first four templates are all 15 x 15 tiles.  Since each tile is 32px wide, templates 1-4 are all 480px by 480px.  In this first image, you are seeing the tilemap, sprite and shape layers titled "template1."  As you can see, it consists of a few obstacles on the tilemap layer, four balloons and two clouds on the sprite layer, and a circle on the shape layer.  The circle will not be used, other than to show how we export it into XML via Lua.   Also, notice the settings window on the right, which reflects the 15x15 tiles in the tilemap, and the 32px by 32px size of the tiles.  The rest of the settings are either default, or calculated automatically by DAME.

Template 2

Moving on, this template consists of the tilemap layer and sprite layer named "template2."  As you can see in the settings, every thing is about the same, except for the "x" variable, which is set to 480.  This is the offset of the map.  Since the last map was 480px wide, we need to offset template2 in order to see all the templates side-by-side within DAME.  The "x unit" parameter is automatically calculated by DAME.  It's basically the same offset, but in tiles.

Template 3

If you are detecting a pattern, you may already know that this image shows the tilemap and sprite layers named "template3."  This map has a flying horse, and a UFO.  As far as DAME is concerned, these two enemy objects are just different sprite images.  Again, all of the settings are very similar to the last few screenshots, but you can see the "x" variable has increased again.  This is the third map, and since the first two maps were 480px wide each, 480 x 2 = 960.  Again, the "x unit" parameter is calculated automatically.

Template 4

This is the last 480x480 template, and again the settings are following the same pattern as the first 3.  What's different is that this template contains two different shapes.  You can see the semi-transparent rectangles on the top right and bottom right of the template.  These don't mean anything special within DAME, but within the ActionScript code, we will translate these into spawning areas.  Instead of just placing enemy sprites on the map manually, maybe we want to make sure that they appear in a random position, but within certain bounds.

There are many different ways we could link an enemy object (in this case, the flying pig) to a shape.  In fact, DAME has a cool linking feature where you can just connect two objects together - sprites, shapes and paths can all be linked to each other.  However, the getting the links to export in Lua was taking more time than I wanted, so I took a different route.  By right clicking on any sprite or shape within the DAME editor, you will get a pop-up menu with a few options.  Each object inside of DAME has a unique id, which you can copy to the clipboard by selecting the "Copy GUID" option.  In this case, I've clicked on the rectangle I want to use as a spawning area for the flying pig sprite.  Notice that the shape layer called "template1" is selected in the layers tab.  Ignore the name, as the shape layer applies to all maps - but note that in order to select shapes or sprites, the layer they are on must be selected, and you must be using the selection tool (to the right of the paintbrush, which looks like four arrows points in all directions).

Now that we've copied the GUID of the rectangle we're using as a spawning area to the clipboard, we select the sprite layer that our flying pig is on, and then select him.  On the bottom right of the DAME editor, there are options to add and remove properties.  I've simply clicked  "Add Property," then added a property called "spawnShape" and pasted in the GUID on the clipboard.  Again, this doesn't mean anything to DAME - it's up to us to export that information into an XML with Lua, and then make it happen with ActionScript.  You can also see I added a property called "spawnAmount," which I've set to 5.   This will create 5 different flying pig sprites randomly within the spawnShape area (the rectangle right below the pig).

Template 5

That last template was probably the most complicated.  These next two are simple, and used to demonstrate that the maps can be of different widths.

The settings for this layer look just like the rest.  As you can see, the "x" and "x unit" offset variables are still increasing.  The first four templates were all 480 x 480.  Since 4 x 480px = 1920px, that's what we set "x" to.  You can also see that this template is much bigger than the previous ones, with the "width" set to 47 (tiles).

Template 6

This tilemap layer is even simpler.  In fact, it doesn't have any sprites on it - and by looking at the layers panel, you will notice that I haven't even created a sprite layer called "template6."  When we get all of this into Flash, we'll just be checking for a tilemap layer, and then if there's a sprite layer to go along with it, we parse that too.  If not, we'll just move along.  More on that later.  Just take a look at the last template in this file:

Again, very simple, and the settings are similar to the previous 5.  Our last offset was 1920, but the last template was 47 tiles wide.  47 tiles x 32 pixels = 1504 pixels, and 1504 + 1920 (the offset of template 5) = 3424.  And look at that, "x unit" has gone and calculated itself for us again, how thoughtful.

Part 2 Conclusion

So in this part we went over each template within the FPDameTemplatesTutorial.dam file in detail.  In the next part we will actually export the file into XML, and cover the XML string that is generated by Lua.  Hope that this part wasn't too redundant - I just felt that having a good idea of what I had in mind when designing these maps would help as we get a bit deeper into the process.  Let me know in the comments what you think!

Continue to Part 3