How to load levels in a Flash tile based game

This tutorial, that comes in one single part, will cover the topic about loading levels in a Flash tile based game.

Let’s start explaining what is a tile based video game.

From Wikipedia: A tile-based video game is a type of video or computer game where the playing area consists of small rectangular, square, or hexagonal graphic images, referred to as tiles. The complete set of tiles available for use in a playing area is called a tileset. Tiles are laid out adjacent to one another in a grid; usually, some tiles are allowed to overlap, for example, when a tile representing a unit is overlaid onto a tile representing terrain. Tile-based games usually simulate a top-down or isometric view on the playing area and are almost always two dimensional.

In the example I am covering, the tiles are the bricks in a game like Arkanoid, but it could be a sokoban level or some other kind of game I will cover in future.

Basically, if a game map does not require you to draw anything but just putting some elements (tiles) one next to another, this is a tile based game.

Let’s start with the arkanoid clone.

Array method

I created a movieclip with 3 frames, each frame containing a “brick” of a different color and with a stop() in every frame.

Then I linkaged the movieclip as (guess what?) “brick”.

The actionscript in the first frame of the main scene will be:

Line 1: Declaring level variable as a new array

Lines 2-4: Every level item is an array made of numbers from 1 to 3. I assumed number 1 represents the first type of brick, 2 for the second and so on.

So we can say that level is the entire stage, level[n] is the n-th row of bricks, and level[n][m] is the m-th brick in the n-th row of bricks.

Lines 5-6: Performing a loop trhough all bricks

Line 7: Attaching the movieclip in the right position according to x and y values and brick’s height and width

Line 8: Calls a gotoAndStop to show the right brick type

And that was very easy…

But let’s imagine we have 1000 levels, each one much bigger than this one… the array method would make the movie heavy, containing levels that you will never see perhaps…

Moreover, with the array method we cannot store other information about level (level name, author, time limit…) unless we create another array.

And, last but not least, we cannot allow people to design their own levels.

In other words, coding levels with arrays is not a good idea if we plan to make a good game.

So we are going to try with XML.

Levels with XML

First, we need a XML file, that I am calling level_list.xml, containing all level names. This is because we may need to allow the player to select which level he wants to start playing.

So we will code the first file in this way

I saved the file at this position, for you to check it will work.

Now we need to tell our movie there is a level called level_list.xml with such information.

So the new actionscript, at the moment, is:

Line 1: to create an instance of a XML object called main_xml

Line 2: with ignoreWhite I decide text nodes that only contain white space are discarded during the parsing process. It’s not so necessary, but may prevent some errors if I code the XML in a wrong way

Line 3: reading the file

Lines 4-6: once the file is loaded, I display its content in a text area called xml_output.

As you may notice, the entire XML file has been loaded.

Time to parse it now.

What to do once an XML file is loaded

Let’s introduce the firstChild property. You should think about an XML file as a tree with branches and children. Every branch is child of an unique branch and could have n branches as children.

XML

For thir reason, if we try to trace main_xml.firstChild, the result will be the entire file

Because the first child of the XML is level_list that includes the entire file

If we trace main_xml.firstChild.firstChild instead the result will be

Because it’s the first child of level_list.

To have all XML parsed, since we know its structure, we need this actionscript:

Line 5: Select the first child of the first child of the XML file (the row containing the level name)

Lines 6-9: Output the child nodes of the XML file selected (in this case, the level name) and move though the children of the same level until there are not children left

The difference between firstChild and nexSibling is explained in this picture

XML

and this is the swf file:

Now it’s time to make levels selectable by the user.

I inserted a ComboBox component instanced as xml_combo and changed the actionscript this way:

This is basically the same actionscript as before, with the only change that lines 5 and 8 add an item to the combo box.

That main_xml.attributes.filename is the name of the XML file we want to load when the item is selected.

Consider that actionscript xml_combo.addItem("label",value) is the same of html

Now the final touch… we want to load a XML level when the user selects a level.

First of all we need… the level(s)…

This is level 1

And it’s located here, while level 2 is this one:

And you can find it here

Obvioulsy there isn’t a standard rule about coding levels into XML, and the one I used is one of many rules you may use.

Just try to remember which rule you used when you’ll add levels in a later time…

Let’s see the actionscript:

Line 12: Listener added to the combo box that triggers when an item is selected

Line 13: Function called every time a combobox item is selected

Lines 14-15: Creation of a new XML instance

Line 16: Declaration of the y position of next brick we are going to place

Line 17: Get the combo box selected item

Line 18: Loading the XML level according to the selected combo box item (this may give an error if you select the “Select a level” item because it has not data assigned, but you can easily avoid this with an if…then statement)

Lines 19-34: Parsing of the level XML file in the same way explained before and placing the bricks in the same way explained before. The only glitch is that when you load a new level, the existing one isn’t removed, but since you are supposed to destroy all bricks before moving onto next level…

And that’s all with XML loading levels.

It’s not that much hard than array method, but is much much more professional and will let users to publish their levels in that “Web 2.0” style.

Download all source codes and give me feedback

  • Thanks for this, I’ve been looking for a nice easy way to do xml parsing for game design, and this will do nicely.

    Oh, and for what it’s worth.. an index page of all your tutorials would be mighty handy. Thanks!

  • bill

    thats soooo beautiful

  • Nic

    Great tutorial. I was wondering how do you make a rope interactive. For instance http://ishi.blog2.fc2.com/blog-entry-211.html?new the rope that is attached to the cat is constantly redrawing itself. How is this done?

  • Wow, I would have never thought of using XML to dynamically create levels! I always had the odd idea that no matter what you would have to create a new frame/scene for each level. Now I see how much easier everything is when you can apply XML. =)

    Great tutorial.

  • Pingback: Create a Flash ball game with visual from above tutorial at Emanuele Feronato()

  • Pingback: Creation of a platform game with Flash - step 1 at Emanuele Feronato()

  • i’m a newbie and i can’t figure out how to “linkage” a movie clip…

    can someone help please?

    thanks.

  • Gadi

    Thank you so much – this was verry helpfull!

  • connz

    dude i cant tell you how happy i am that i can do this now!

  • jebus

    i’ve tried everything nothing works, plz tell me simply what to do from the start

  • Patrick

    Great tutorial!
    I learned a lot.

    Vinnie:
    In order to linkage a movie clip, you can press CTRL + L to open the library and right click on the movie clip you use as a block, then select Linkage. Mark the checkbox “Export as Actionscript” and specify a name (ID).

  • Michael

    I copied and pasted the code the code (as well as followed all the directions on this tutorial by the letter), but I keep getting a bunch of compiler errors. Also, the result looks nothing like what’s being shown in the tutorial. Any reason why that would be?

  • Would it be possible to use different file types? like a .Dat file, instead of XML?

  • marc0

    these tutorials are excellent – you’re time is much appreciated… i second ‘Mzamara’s’ request for an index page of all you tutorials.

    cheers…

  • catnap

    i dont understand what you are saying half the time.
    also for the action script that starts with: level = new Array();
    level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1); and so on, flash doesnt let me load i t properly. i am so confused to what i have to do, can you be more precise and stop skipping the smaller steps so i can understand.

  • Pingback: Ultimate List Of 40 Quality Flash Tutorials For Your Animated Desire | The Theme Blog()

  • Pingback: Understanding AS3 and XML : Emanuele Feronato()

  • I have one question…
    After you compile the program (swf),
    it attaches the XML file and the .AS classes into the SWF file?
    or the XML file always will be external?…

    if you’re planning to distribute your game, it’s better to have everything in the swf file (for viral games)

  • Pingback: How to load levels in a Flash tile based game | Tutorial Collection()

  • Will

    I was able to get the array method to work, but for some reason I couldn’t get the XML method to. I don’t know much about XML or Actionscript yet so I have no clue as to why. I tried writing the code myself and copy and pasting directly from here. I guess I’ll keep trying to figure out what I’m doing wrong. This is a good tutorial even with my problems.

  • Good tutorial, I’m doing something similar. Keep up the good work!

  • nojaf

    Hi,

    euhm to be honest I don’t get the following code

    place_brick = attachMovie(“brick”, “brick_”+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:x*50, _y:y*15});
    place_brick.gotoAndStop(level[y][x]);

    Is place_brick a function? Is it an object?

  • nojaf

    Wauw,

    this is amazing after some searching and adjusting I figured your code out.
    You rock man, you realy do!

  • Darkness

    I dont know if its ok or not, but can you make a video tutorial for all that, cause i’m new in mecromedia flash professional 8 and i watched some video tutorials about making a platform game and i made one, but i dont know how to make other stages, so please if u can make a video tutorial please make one and tell me :)

  • Pingback: How to load tile levels in AS3 by using Arrays - Flash Solutions - Developers Q & A()