Externalizing the World Data

One of the best features of TBWs is the ease with which you can store the data that represents a world. For instance, for a game of Pac-Man (without the ghosts) you can easily create a text document to store the type of each cell. This text document is usually XML formatted. At a later date this information can be loaded into your game and the world can be built. In this section we'll look at a simple example of how to do this. (We're going to assume that you have some knowledge of XML and how to work with extracting data from XML objects in Flash.)

Here is the XML structure we will use to store the world data:


The XML listed above only describes a two-by-two grid. We're going to create an XML file that describes a ten-by-ten grid. So there will be ten <row> nodes, and ten <cell> nodes in each <row> node. In the XML above, the first <row> node represents the first row of cells in a grid. The two <cell> nodes in the <row> node represent the two cells in that row in a grid. The type attribute in the <cell> node represents the frame that that cell should show.


Open game.fla from the CD. Take a look at the tile movie clip in the library. It's got a simple new addition a movie clip with an instance name of dot on frame 1. As the ball moves over the dots, they disappear, much as they do in Pac-Man. There are three frame labels in this movie, Start, Create Game, and Play Game. The Start frame gives you two choices, Create Game or Play Game. If you click the Create Game button, then you are taken to the Create Game frame. On this frame you can configure a level and then click to have the XML for this level generated. If you choose Play Game, you are taken to the Play Game frame. On this frame the data for the level is loaded from an XML file and the level is created. You can then move the ball around on this level, collecting dots.

Let's look at the Create Game label first. This is a very simple level editor. On this frame you can click each cell individually to change its type. Once you are happy with the configuration of the board, you can click the Generate XML button, and an XML document representing this map will be generated and then shown in the Output window. The Generate XML button calls a function called generateXML(). Here is the ActionScript in this function:

 1   function generateXML() { 2      var xml = "<map>"; 3      for (var j=1; j<=game.rows; ++j) { 4         xml += "<row>"; 5         for (var i=1; i<=game.columns; ++i) { 6            var name = "cell"+i+"_"+j; 7            var type = game[name].type; 8            var temp = "<cell type=\""+type+"\" />"; 9            xml += temp; 10         } 11         xml += "</row>"; 12      } 13      xml += "</map>"; 14      trace(xml); 15   } 

This function creates an XML document like the one shown earlier in this section, except that it has ten <row> nodes, and ten <cell> nodes per <row> node. First, a local variable called xml is defined with "<map>" as its value. Then we loop through the entire board. At the beginning of every outer loop, we append "<row>" to the xml variable. For each iteration of the inner loop, we create a <cell> node with a "type" attribute that stores the value of the current cell's type. This node is then appended to the xml variable. At the end of each outer loop, we append "</row>" to the xml variable, closing the current <row> node. After all the loops, we close the root node by appending "</map>" to the xml variable. Finally, we trace the xml variable so that its contents are shown in the Output window.

Generate a SWF file from this, and test the XML generation. Once you have created a level you're happy with, copy the contents from the Output window and save it to a file called game.xml in your current working directory. Now how will this file of yours get used? You're about to find out. Next we're going to discuss the Play Game frame; that's where this file will be loaded, and your level will be created from it.

Close the SWF file and look at the FLA file again. Move to the Play Game frame. This frame loads the game.xml file, interprets it, and builds the level. Once the level is built, the character can move around the level collecting dots. There are a few ActionScript additions to this frame that you have not yet seen. There is a simple collision-detection function that checks for ball-dot collisions, and there is the code that loads and interprets the XML. Here is the code that loads the XML and defines the event handler for the onLoad event:

 1   board = new XML();  2   board.onLoad = buildGrid; 3   board.load("game.xml"); 

An XML document must be loaded into an XML object, so first we're going to create an XML object called board. Also, so that we will know when the file is finished loading, in line 2 we set an event handler for the onLoad event for the board XML object. When the file is finished loading, the function buildGrid() is called. In line 3 we load a file into the XML object, passing in the path to the file.

The buildGrid() function is changed substantially from the one you've gotten used to seeing in our previous examples. Here it interprets the XML and builds the level from it.

 1   function buildGrid() { 2       board = board.firstChild; 3       var tempArray = []; 4       tempArray = board.childNodes; 5       for (var j=1; j<=game.rows; ++j) { 6           var tempArray2 = []; 7           tempArray2 = tempArray[j-1].childNodes; 8           for (var i=1; i<=game.columns; ++i) { 9               var name = "cell"+i+"_"+j; 10              var x = (i-1)*game.spacing; 11              var y = (j-1)*game.spacing; 12              var type = tempArray2[i-1].attributes.type; 13              game.path.attachMovie("cell", name, ++game.depth); 14              game.path[name]._x = x; 15              game.path[name]._y = y; 16              game[name] = {x:i, y:j, name:name, type:type,                 clip:game.path[name],                 dot:game.path[name].tile.dot}; 17              game[name].clip.tile.gotoAndStop(type); 18         } 19      } 20      initializeBall(); 21  } 

Line 2 of this function sets the contents of the XML object to that of its first child node. The next two lines create an array of the child nodes of the <map> node. That means that every element in this array contains a <row> node. Lines 6 and 7 create an array that contains the child nodes of the jth <row> node from the tempArray array. The child nodes of a <row> node are the <cell> nodes. In line 12 we set a local variable called type that stores the number extracted from the type node of the ith <cell> node in the tempArray2 array.

There is one more addition to the ActionScript on this frame the detectDot() function. A reference to a cell movie clip is passed into this function, and a hitTest() is performed between ball and dot. If the hitTest() method returns a value of true, then a collision occurred, and dot has its visibility set to false.

 1   function detectDot(tempCell) { 2      if (game.ball.clip.hitTest(tempCell.dot)) { 3         tempCell.dot._visible = false; 4      } 5   } 

This function is called from the moveBall() function. You may remember that in the moveBall() function there are four chunks of code, one for each arrow key. If the place where you attempt to move the ball is valid, then the detectDot() function is called.


Generate a SWF from this file. When you click the Play Game button, you'll notice that your XML file has been loaded and interpreted. You can now move the ball around the map and collect dots! This is a very simple example of a TBW with an editor.

In this chapter you have learned what makes up a tile-based world. You have also seen the main benefits of using TBWs reuse of graphical assets and some programming advantages. With the knowledge gained in this chapter, you will be able to build more-complicated tile-based worlds. In the third section of this book you will see more TBW examples.

Macromedia Flash MX Game Design Demystified(c) The Official Guide to Creating Games with Flash
Macromedia Flash MX Game Design Demystified: The Official Guide to Creating Games with Flash -- First 1st Printing -- CD Included
Year: 2005
Pages: 163
Authors: Jobe Makar

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net