Macromedia Flash MX Game Design Demystified phần 4 pptx

The tiles in the world of this game have numerous frames. This simple technique is very powerful. You can create a whole city using tiles for grass, road, sidewalks, bushes, walls, and so on. This allows you to reuse your graphical assets efficiently and conveniently. In the case of puzzle games that use TBWs, such as Pac-Man and Minesweeper, the complexity of the tiles is low. They usually just have a few different items that they need to show, such as a dot to be collected, or a maze wall. These games profit from the use of TBWs mostly because TBWs reduce the amount of processing that occurs by using a simple math trick. This trick is explained in the next section. One of the most convenient programmatic benefits of using TBWs is their ability to easily store information about certain areas of the map. To take advantage of this, I use a two-dimensional array in which each represents a tile in the world. An object is stored in each element, and then information about the tile that it represents is stored in this object. For instance, if a tile were of a rock, then information might be stored in object to say there was a rock in this spot and that the character could not move through it. Or if the tile sand, then information might be stored to specify that the character should be slowed to half its regular when passing through this cell. In a game like Pac-Man, in which there might be a 15-by-15 g rid, there would be a two-dimensional array with an object that represented each tile. That's 225 (15 times 15) objects. Each object would contain information saying if it was a wall, if it was empty, or if it contained a dot to be How this information is stored (in this case, the two-dimensional array) is called a data structure. A common alternative to the two-dimensional–array data structure is to store and name the objects logically. In the Man example, the 225 objects would be created and given logical names, each based on the cell it So, for instance, the name of the object representing the cell in the third column and eleventh row would something like cell3_11 . This is the way we store data in the example game we're working with in this chapter. Another very useful feature of TBWs is their ability to store the information needed to build the world in an external file or a database. Using a standardized protocol like XML, you can easily store such information. is great news, because it means you can create a game and load in an unlimited number of levels! Usually you'll need a level editor—an application you build, and that assists you in creating a level. You usually "program" the level editor to output information in savable form, such as an XML document (which is just you can store in a file or a database. That file can be loaded into the game, and Flash will interpret it and the information in it to dynamically build the level. In the final section of this chapter we'll look at a simple example of a level editor. The example mentioned earlier, Shark Attack!, loads its levels from external XML files. You can see them in the same directory. They are level1.xml, level2.xml, and level3.xml. You can and view them with a normal text editor like NotePad or SimpleText. Board games like chess and checkers are not usually considered tile-based worlds, but they can be treated such. You can use the same two-dimensional–array data structure to store information about the tiles, such the tile color, or which piece is sitting in the tile. If you are really itching to see how all this looks and works in an actual game, just hang on. In the third of this book we'll see this information applied in the tile-based game called Don't Fall! ActionScript Review: Arrays and Two-Dimensional Arrays An array is a type of object that can store multiple pieces of data. Each piece of data is called an element. For instance, names = ["Jobe", "Kelly", "Wendy"] is a line of ActionScript that creates an array called name that contains three elements. The length of this array is 3, and it is considered a one-dimensional array. Each element has a number called an index associated position, starting with 0. So in our example, "Jobe" has an index of 0 and "Wendy" has an of 2. To retrieve the contents of an index in an array, you must use the index like this: myName names[0] . That line of ActionScript would create a variable called myName with a value of Each element in an array can store any data type, including objects, strings, and other arrays. you store another array as an element in the array, then you are creating a two-dimensional For instance, names = [["Jobe", "Kelly"],["Free", "Chance"]] is a two-dimensional array. The main array contains two elements, each of which stores another array with two elements. You access an element of the main array the same way as above—by using the You then access an element of the array that is being stored in that element by the same So to access the name "Free" from this two-dimensional array, I use this syntax, names[1] That points to the array that has an index of 1 (which is the second array) and then points to the first element of that array. With all of this in mind, if we had a 20-by-20 TBW that had all of its objects stored in a two-dimensional array called cells , then we could access the object that represents the cell in the 17th column and 9th row by using the syntax cells[17][9] . I l @ve RuBoard I l @ve RuBoard Top-Down Tile Creation and Management In Chapter 8, "The Isometric Worldview," we'll continue our discussion about TBWs Most TBWs in Flash are going to be in either top-down view or 3D isometric view, like Shark Attack! The way you store and manipulate the tile data is exactly the same for both of those views, but the way you display tiles on the screen is not. In this chapter we look at how to create the tiles in the top-down view and how to store information about those tiles. In the last part of this section, we'll introduce a very powerful but simple math trick that can greatly reduce the processing needed to use a TBW. Creating the Grid and Storing Information To build the grid of tiles on the screen, you must use nested loops—loops within loops. If you wanted to build j ust one strai g ht line of ten tiles, you would only need to use one loop. In each iteration of that loop that in this example there would be ten iterations per outer loop) you would use attachMovie() to create instance of a movie clip, and then you would place it in the correct spot on the stage. Since a grid has of these types of lines ri g ht under each other, we loop the loop to create the entire g rid. Remember that we have one loop to create a row of tiles, so then we run this loop one time for each row we want to add. We have an outer loop set to loop, say, ten times. For each loop there is an inner loop that adds the movie- tiles to the row. Here is sample ActionScript that would handle j ust addin g one line of ten movie clips to the stage. 1 11 1 for (var i=1; i<=10; ++i) { 2 22 2 //code to add and place the movie clip 3 33 3 } That would add one horizontal line of ten movie cli p s. To make this a g rid, we need to start this loo p one time for each row that we want to add. So we add an outer loop. 1 11 1 for (var j=1; j<=10; ++j) { 2 22 2 for (var i=1; i<=10; ++i) { 3 33 3 //code to add and place the movie clip 4 44 4 } 5 55 5 } What happens is this: z The outer loop starts at j=1 (which is row 1). While j=1 , the inner loop runs from i=1 to i=10 placin g movie clips. Row 1 is now complete. z The outer loop moves to j=2 (which is row 2). While j=2 , the inner loop runs from i=1 to i=10 movie clips. Row 2 is now complete. z And so on, eight more times. we explore their role in isometric-view games. Think of the inner loop as a day and the outer loop as a week. The inner loop loops through 24 hours in a day, but it does this from start to finish for each day (the outer loop). So over the course of one week, there would be 7*24 iterations. Open grid.fla in the Chapter07 directory on the CD to see an example. You will see movie clips on the stage. One of them has an instance name of grid , and the other has no instance name but has a library name of tile. This movie clip also has a identifier of tile so that we can create instances of it on the sta g e usin g ActionScript. addition, the tile clip has eight frames, each with a different tile. The grid movie clip was placed there so that we can attach the movie clips to it. Building the grid in a movie clip is cleaner than attaching dozens of movie clips to the main timeline. This the first in a strin g of example files we'll look at in this chapter, each one buildin g on 1. Creates an object called game that we use to store information about the grid. 2. Creates a function called buildGrid() that builds the grid on the stage and builds the data structure that we use to store information about each tile. 3. Executes the buildGrid() function. Here is the ActionScript used to create the game object. 1 11 1 game = {}; 2 22 2 game.columns = 10; 3 33 3 game.rows = 10; 4 44 4 game.spacing = 30; 5 55 5 game.depth = 1000; 6 66 6 game.path = _root.grid; 7 77 7 game.numberOfTypes = 8; Line 1 creates the game object, and all of the following lines add information to that object. Lines 2 and 3 define the dimensions of the grid; line 4 defines the spacing (the number of units between the registration points of the tiles). The next line sets a variable to the object called depth . This value will be incremented used to assign a depth to each newly created movie clip. As we have seen in the previous chapters, we are starting to make it a habit to store references to movie clips in an object. That makes our code more oriented. So in line 6, you can see that a reference to the grid movie clip is created. Whenever we want to anything with the grid, we don't have to type _root.grid—we type game.path. The reference game.path will interpreted as _root.grid since that is the reference we pointed it to in line 6 above. If at some point the game-design process we had to change the name or location of the grid movie clip, then all we would to do to update the code would be to change the game.path reference to point to the new grid location. If did not use this game.path reference, then chan g in g the name or path to g rid would be a lar g e undertakin g , because we'd have to update a lot of code. The final line of ActionScript above sets a variable called numberOfTypes on the game object. This variable stores the number of tile types there are in this game definition. Since we have eight frames in the tile clip, each a different tile, then we give numberOfTypes a value of 8. Next, a function called buildGrid() is defined. 1 11 1 function buildGrid() { 2 22 2 for (var j=1; j<=game.rows; ++j) { 3 33 3 for (var i=1; i<=game.columns; ++i) { 4 44 4 var name = "cell"+i+"_"+j; 5 55 5 var x = (i-1)*game.spacing; 6 66 6 var y = (j-1)*game.spacing; 7 77 7 var type = 1; 8 88 8 game.path.attachMovie("cell", name, ++game.depth); 9 99 9 game.path[name]._x = x; 10 1010 10 game.path[name]._y = y; 11 1111 11 game[name] = {x:i, y:j, name:name, type:type, clip:game.path[name]}; 12 1212 12 } 13 1313 13 } 14 1414 14 } This function uses nested loops, as described earlier in this section. The outer loop loops through the number rows. In each iteration of the outer loop, the inner loop loops through for each column. Each tile (which we a cell here) is named uniquely by using the row and column of the cell as part of that cell's name. For if the cell belongs to column 8 and row 6, the name would be cell8_6 . In lines 5 and 6, the intended of the new movie clip is calculated. Then a variable called type is created with a value of 1. This refers to frame that the tile will display. In this example we start each tile on frame 1. Next, the movie clip is and positioned. In line 11 we do something really important—we create an object to store information the cell that was just created, such as its type, its name, and a reference to the movie clip it represents. the previous. By the end of the chapter you'll have a very simple Pac-Man–like start a game. The ActionScript in this file does three things: The final line of ActionScript in this file (not shown) is buildGrid() . It calls the function that we j ust to create the grid. Precision Detection Now it's time to introduce the trick I mentioned: a simple but powerful maneuver that lightens the processor load in TBWs tremendously. Imagine this: If the game of Pac-Man were written in Flash, how would you if the Pac-Man character was colliding with a dot to be collected (or eaten, or whatever it is that Pac-Man with it)? First of all, in Pac-Man everything moves fairly slowly, and precision isn't important, so hitTest() would not be a bad choice. Many early game programmers (including myself at one time) have guessed you'd need to loop through the entire board, constantly performing hitTest(), to see if Pac-Man has with any dots. That is not a very efficient process. Luckily there is a trick that allows us to easily know cell Pac-Man is in, and therefore only check for a collision in that cell. And of course, one collision detection lot less CPU-intensive than 100 collision detections. Let's see how to determine which cell Pac-Man is in. First, let's look at only one direction, horizontal. In the figure above, you can see that there are five cells, with a width of 20. Pac-Man's x position is 53. Which cell is he in? 1 11 1 spacing = 20; 2 22 2 x = 53; 3 33 3 cell_column = Math.ceil(x/spacing); In line 1, we set a variable called spacing . That is the width of each cell. Line 2 creates a variable called x stores the position of Pac-Man. In line 3 we employ the simple math trick by dividing the position by the spacing. We then round that number up to the nearest integer. With this trick we can easily find which cell Man is in! This works in the same way for a vertical situation. Like the horizontal example, this one also contains five cells, each with a width of 20. The y position of Pac- is 30. Here is how you find the number of the cell he's in: 1 11 1 spacing = 20; 2 22 2 y = 30; 3 33 3 cell_row = Math.ceil(y/spacing); By putting both of these together, we can locate Pac-Man's position in the grid. We find the row and the he's in, and that specifies the cell in the grid. 1 11 1 spacing = 20; 2 22 2 x = 53; 3 33 3 y = 30; 4 44 4 cell_column = Math.ceil(x/spacing); 5 55 5 cell_row = Math.ceil(y/spacing); Now that we know which cell Pac-Man is in, we can perform a hitTest() between the Pac-Man movie clip a dot in that tile. Perhaps you can now understand why this is such a powerful trick. If you are making a in which the character is walking around, and a few tiles contain water, then when your character is in one those cells, you can make him swim, or drown, or just slow down a little bit. What typically happens is the following: 1. You detect which cell the character is in. 2. You look up the object that represents that cell. 3. You look at the type of cell that your character is in. If it is a cell of fire, then your character might get hurt. If it is a cell with a secret key, then your character can pick it up and gain points. 1 11 1 function gameClicked(mx, my) { 2 22 2 var x = Math.ceil(mx/game.spacing); 3 33 3 var y = math.ceil(my/game.spacing); 4 44 4 var cell = "cell"+x+"_"+y; 5 55 5 var ob = game[cell]; 6 66 6 if (ob.type<game.numberOfTypes) { 7 77 7 ++ob.type; 8 88 8 } else { 9 99 9 ob.type = 1; 10 1010 10 } 11 1111 11 ob.clip.tile.gotoAndStop(ob.type); 12 1212 12 } Now let's look at a simple example of this trick. Open grid_click.fla in the Chapter07 directory. This file is a modified version of grid.fla. With the added ActionScript in this file, you click a cell and its type changes. If you click one cell enough times, it arrives back at its original cell type. I've used the trick I just introduced to determine which cell was clicked when the mouse button was pressed. Here is the added ActionScript: 13 1313 13 _root.onMouseDown = function() { 14 1414 14 var mx = _xmouse; 15 1515 15 var my = _ymouse; 16 1616 16 if (game.path.hitTest(mx, my)) { 17 1717 17 gameClicked(game.path._xmouse, game.path._ymouse); 18 1818 18 } 19 1919 19 }; Look at lines 13–19 first, the onMouseDown event. When the mouse button is pressed, the coordinates of the mouse are saved. If these coordinates are over the grid movie clip (referenced by game.path ), we call the gameClicked() function above, passing the coordinates of the mouse into gameClicked() . In lines 2 and we use the trick described in this section to determine the cell that was clicked. In the following line we construct the name of the object that contains information about this cell, and then in line 5 we create a reference to that object called ob . Lines 6–10 check to see if ob.type is less than 8, and if it is, we it; otherwise we set it back to 1. Finally, on line 11, we change the frame where the movie clip is to match of the tile type. Create a SWF from this file and test it out. Click the cells to change the cell types. Types 2–8 are walls. You easily create unique configurations of the board. In the next section we will go over how to add a character to this TBW. A character can be anything from a ball to a human. In most games, a character is something the game player can relate to, usually some living being. In the example given in the next section, the character is a ball. I l @ve RuBoard I l @ve RuBoard Adding a Character to the World In this section we're going to add a character to the simple world we have just created. Our character is nothing more than a ball. The goal is to be able to move the ball around the grid using the arrow keys. If a has a type of greater than 1, it is a wall, and we will not let the ball enter this cell. When an arrow key is pressed, we look ahead to see where the edge of the ball would be if we were to move there. If the edge is in an acceptable cell (type = 1), then we move the ball there; if not, then we disregard key press. More specifically, if the right arrow key is pressed, then we look at the ball's current position, plus the ball's speed, plus the ball's radius to form a number that represents the far right edge of the ball if it to be moved one quantity (or unit) of speed to the right. We then check to see in which cell that far-right is. If it is in a cell of type = 1, then we move the ball there. Looking ahead:where is he going to go? 1. A function called initializeBall() that creates an object to hold the information about the (which is a ball). This function also creates a few new variables on the game object. 2. A function called moveBall() . When this function is called, it moves the ball to a new position if that new position is valid. 3. An onEnterFrame event. This checks for key presses in every frame. If one of the arrow keys is pressed, then the moveBall() function is called. Here is the initializeBall() function: 1 11 1 function initializeBall() { 2 22 2 game.speed = 3; 3 33 3 game.path.ball.swapDepths(10000); 4 44 4 game.ball = {startx:1, starty:1, clip:game.path.ball}; 5 55 5 var x = (game.ball.startx-1)*game.spacing+game.spacing/2; 6 66 6 var y = (game.ball.starty-1)*game.spacing+game.spacing/2; To see this in action, open character_in_grid.fla in the Chapter07 directory. You will a new movie clip inside the grid movie clip. It is the character and has an instance name of ball . The ActionScript has three additions: 7 77 7 game.ball.clip._x = x; 8 88 8 game.ball.clip._y = y; 9 99 9 game.ball.x = x; 10 1010 10 game.ball.y = y; 11 1111 11 game.ball.radius = game.ball.clip._width/2; 12 1212 12 } The purpose of this function is to initialize all objects and variables needed to hold information about the ball. Line 2 above sets a variable called speed to the game object. This represents the speed at which the ball can move. If a key press is detected on any frame, then the ball will be moved that amount. The next line the ball movie clip to a high depth. This is done so that we can see it over the tiles that were attached to stage. If we do not send the ball to a higher depth than the tiles, then it will be hidden behind the tiles. In 4 an object called ball is defined on the game ob j ect. This ob j ect is used to store information about the ball, such as the startin g position of the ball and a reference to the movie clip it represents. You'll notice that we the variables startx and starty both to 1. This is because we are going to start the ball in the first tile. next two lines use the startx and starty position to calculate the place on the stage where the ball needs be placed. We add game.spacing/2 to both positions so that the ball will be centered in the tile rather than on its registration point. In lines 9–11 we store the x and y positions of the ball and its radius on the ball object. Next, let's look at the onEnterFrame event. We'll save the moveBall() function for last. 1 11 1 _root.onEnterFrame = function() { 2 22 2 if (Key.isDown(Key.RIGHT)) { 3 33 3 moveBall("right"); 4 44 4 } else if (Key.isDown(Key.LEFT)) { 5 55 5 moveBall("left"); 6 66 6 } 7 77 7 if (Key.isDown(Key.UP)) { 8 88 8 moveBall("up"); 9 99 9 } else if (Key.isDown(Key.DOWN)) { 10 1010 10 moveBall("down"); 11 1111 11 } 12 1212 12 }; There are two conditional chunks of code in here. One checks to see if either the right or left arrow key is pressed; the other checks to see if either the up or down arrow is pressed. If the right or left arrow key is detected as being pressed, then the moveBall() function is called, and the name of the pressed key is in as a string. Likewise, if the up or down arrow key has been detected as being pressed, then the function is called, and the pressed key is passed in as a string. Now let's look at the moveBall() function. It is not complicated, but it is fairly long. This is because we the same sorts of actions for each arrow key (four times). 1 11 1 function moveBall(dir) { 2 22 2 ob = game.ball; 3 33 3 if (dir == "right") { 4 44 4 var tempx = ob.x+ob.radius+game.speed; 5 55 5 var tempy = ob.y; 6 66 6 var cellx = Math.ceil(tempx/game.spacing); 7 77 7 var celly = Math.ceil(tempy/game.spacing); 8 88 8 var tempCell = game["cell"+cellx+"_"+celly]; 9 99 9 if (tempCell.type != 1) { 10 1010 10 return; 11 1111 11 } else { 12 1212 12 ob.x += game.speed; 13 1313 13 ob.clip._x = ob.x; 14 1414 14 } 15 1515 15 } else if (dir == "left") { 16 1616 16 var tempx = ob.x-ob.radius-game.speed; 17 1717 17 var tempy = ob.y; 18 1818 18 var cellx = Math.ceil(tempx/game.spacing); 19 1919 19 var celly = Math.ceil(tempy/game.spacing); 20 2020 20 var tempCell = game["cell"+cellx+"_"+celly]; 21 2121 21 if (tempCell.type != 1) { [...]...22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 } return; } else { ob.x -= game. speed; ob.clip._x = ob.x; } } else if (dir == "up") { var tempx = ob.x; var tempy = ob.y-ob.radius -game. speed; var cellx = Math.ceil(tempx /game. spacing); var celly = Math.ceil(tempy /game. spacing); var tempCell = game[ "cell"+cellx+"_"+celly]; if (tempCell.type... "cell"+i+"_"+j; var x = (i-1) *game. spacing; var y = (j-1) *game. spacing; var type = tempArray2[i-1].attributes.type; game. path.attachMovie("cell", name, + +game. depth); game. path[name]._x = x; game. path[name]._y = y; game[ name] = {x:i, y:j, name:name, type:type, clip :game. path[name], dot :game. path[name].tile.dot}; game[ name].clip.tile.gotoAndStop(type); } } initializeBall(); } Line 2 of this function sets the contents... 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 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 you two choices, Create Game or Play Game If you click the Create Game button,... builds the level from it 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function buildGrid() { board = board.firstChild; var tempArray = []; tempArray = board.childNodes; for (var j=1; j< =game. rows; ++j) { var tempArray2 = []; tempArray2 = tempArray[j-1].childNodes; for (var i=1; i< =game. columns; ++i) { var name = "cell"+i+"_"+j; var x = (i-1) *game. spacing; var y = (j-1) *game. spacing; var type = tempArray2[i-1].attributes.type;... if (tempCell.type != 1) { return; } else { ob.y -= game. speed; ob.clip._y = ob.y; } } else if (dir == "down") { var tempx = ob.x; var tempy = ob.y+ob.radius +game. speed; var cellx = Math.ceil(tempx /game. spacing); var celly = Math.ceil(tempy /game. spacing); var tempCell = game[ "cell"+cellx+"_"+celly]; if (tempCell.type != 1) { return; } else { ob.y += game. speed; ob.clip._y = ob.y; } } This function accepts... With this in mind we will discuss 3D in games in general and then specifically talk about isometrics It is rare today to find professionally created games for sale that are not 3D Even games that are typically two-dimensional, such as card games, often have some sort of 3D element As mentioned in Chapter 1, "First Steps," 3D can be applied to a game in many ways Games like Unreal Tournament use a real... Generate XML button calls a function called generateXML() Here is the ActionScript this function: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function generateXML() { var xml = ""; for (var j=1; j< =game. rows; ++j) { xml += ""; for (var i=1; i< =game. columns; ++i) { var name = "cell"+i+"_"+j; var type = game[ name].type; var temp = ""; xml += temp; } xml += ""; } xml += "";... helps to give us an idea of an object's dimensions Courtesy of Blizzard Entertainment® The well-known game Diablo II is a good example of a game with an isometric viewpoint Games that use an isometric view do not use perspective Why is this so important? Imagine creating a firstperson-view 3D game in Flash As a car drives by your character, the perspective of the car is constantly changing New parts... the Flash system Before it is rotated, the new coordinate system is aligned with Flash' s coordinate system Now let's assume that the isometric system is completely aligned with the Flash system In this case, there is no difference between the Flash system and the isometric system; in fact, it is not yet isometric What has to happen to this second system to make it appear isometric, as seen from the Flash. .. the isometric system and the Flash system We know that the isometric system is related to the Flash system by the two rotations (30° and 45 °) in the previous section Using our knowledge of trigonometry, we can map (project) any point from the isometric system into the Flash system This is done in two steps, one for each rotation To map from the isometric system to the Flash system we start with the . ob.x; 41 41 41 41 var tempy = ob.y+ob.radius +game. speed; 42 42 42 42 var cellx = Math.ceil(tempx /game. spacing); 43 43 43 43 var celly = Math.ceil(tempy /game. spacing); 44 44 44 44 var tempCell = game[ "cell"+cellx+"_"+celly];. game[ "cell"+cellx+"_"+celly]; 45 45 45 45 if (tempCell.type != 1) { 46 46 46 46 return; 47 47 47 47 } else { 48 48 48 48 ob.y += game. speed; 49 49 49 49 ob.clip._y = ob.y; 50 5050 50 }. create the game object. 1 11 1 game = {}; 2 22 2 game. columns = 10; 3 33 3 game. rows = 10; 4 44 4 game. spacing = 30; 5 55 5 game. depth = 1000; 6 66 6 game. path = _root.grid; 7 77 7 game. numberOfTypes