We've come across the concept of z-sorting a few times already in this chapter, and now we can finally discuss it in detail. Once again, z-sorting is the term used to describe the creation of the stacking order of movie clips. If two movie clips are overlapping, of course they can't both be on top. The one on top is said to have a higher depth. You are probably familiar with the concept of depth in Flash, but let's review a little bit and go over a few things you may not know about depths in Flash. Each timeline in a Flash movie can have up to 16,384 depths, and each depth can hold only one movie clip. When you manually place movie clips in a timeline, they are assigned a depth starting at -16,383. Each additional movie clip manually placed in the timeline has a depth higher than the previous one, with numbers moving closer to 0. When you use ActionScript to create instances of movie clips, you assign them a depth. It is recommended by Macromedia (and is common practice) to assign positive depths to movie clips created with ActionScript. Depth 1 does not have to be filled before depth 2. This means that you can, for instance, use
The goal of z-sorting in our isometric world is to assign each movie clip to a specific depth so that the objects in the world appear to be stacked correctly. With z-sorting we can make it so that a character can walk around an object like a tree. The tree's depth remains constant, while the character's depth changes as it moves. Isometric worlds in Flash are usually also tile-based worlds. All of the files presented in this chapter from now on use tiles to create the world. In addition to all the advantages of tile-based worlds that were introduced in Chapter 7, "Tile-Based Worlds," we can add z-sorting. Z-sorting in a tile-based world is much easier to handle than it is in a non-tile-based world. What we do is assign a depth to each tile, with a gap of something like 5 between depths. So one tile might have a depth of 100, and the next tile might have a depth of 105. Then as the character moves onto the first tile, we give it a depth of 101, and when the character moves onto the next tile, we give it a depth of 106. Next, we'll discuss how to assign the depth to each tile. As you know, in order to create a grid of tiles, you must use nested loops. One way to assign depth is to base it on where you are in the loop. But that's a limited technique that we won't use here. Instead, we use an equation that will give us a unique depth for each cell. This equation works for any y position. So if you decide to create a complicated isometric world in which there are multiple levels (such as the inside of a two-story house), then this equation will still work perfectly, giving you the correct depths to use. First we establish a boundary of the largest x tile number we expect to use. If it is a 10-by-10 tile-based world, then this boundary is 10. In the following mathematical exercise we use the letters a and b to represent the maximum number of tiles that can be found in the x and z directions. a = 10 b = 10 Then, assuming we are trying to find the depth of the tile specified by (x, y, z), we can write the following: floor = a*(b - 1) + x depth = a*(z - 1) + x + floor*y In order for these equations to give a valid final result (depth), x, y, and z must all be positive values. So when we write this with ActionScript, we make use of the Each tile contains its depth.
1 isometricAS.prototype.calculateDepth = function(x, y, z) { 2 var leeway = 5; 3 var x = Math.abs(x)*leeway; 4 var y = Math.abs(y); 5 var z = Math.abs(z)*leeway; 6 var a = this.maxx; 7 var b = this.maxz; 8 var floor = a*(b-1)+x; 9 var depth = a*(z-1)+x+floor*y; 10 return depth; 11 }; This method contains the math equations we discussed earlier, translated into ActionScript. In line 2 we create a variable called Now let's look at the function that creates the tiles, 1 function buildFloor(path) { 2 path.tile._visible = false; 3 world.tiles = []; 4 var y = 0; 5 for (var j = 1; j<=10; ++j) { 6 for (var i = 1; i<=10; ++i) { 7 if (j == 1) { 8 world.tiles[i] = []; 9 } 10 var depth = iso.calculateDepth(i, y, j); 11 var name = "cell"+i+"_"+j; 12 path.attachMovie("tile", name, depth); 13 var clip = path[name]; 14 world.tiles[i][j] = {x:i, y:y, z:j, depth:depth, clip:clip}; 15 var x = (i-1)*world.cellWidth; 16 var z = -(j-1)*world.cellWidth; 17 temp = iso.mapToScreen(x, y, z); 18 clip._x = temp[0]; 19 clip._y = temp[1]; 20 } 21 } 22 } There is an object in the timeline called Next let's take a look at the function used to place the ball on the screen: 1 function placeBall() { 2 ball.x = ball.x; 3 ball.y = ball.y; 4 ball.z = ball.z; 5 var temp = iso.mapToScreen(ball.x, ball.y, ball.z); 6 ball.clip._x = temp[0]; 7 ball.clip._y = temp[1]; 8 var cellx = Math.ceil(ball.x/world.cellWidth); 9 var cellz = Math.ceil(Math.abs(ball.z)/world.cellWidth); 10 var depth = iso.calculateDepth(cellx, 0, cellz); 11 var depth = depth+1; 12 ball.clip.swapDepths(depth); 13 } Take a look at lines 8 12. In lines 8 and 9 we find the tile that the ball is currently on top of by using the trick learned in the "Precision Detection" section of Chapter 7 (a method for determining where the character is located, so that we then had to perform collision detection only in that cell). We then determine the tile's depth in line 10 by invoking the That isn't all of the ActionScript in this file. We don't explain all of the ActionScript because you have seen the techniques used in the rest of this file before. In the next section we will discuss some more of the Action Script, as well as add some more to this file. Generate a SWF from this file to see z-sorting in action. Two plants will appear on the screen, along with a grassy tile-based ground and a sidewalk. The ball will appear at the edge of the floor. You can then use the arrow keys to move the ball around. Watch the ball move around the plants and the blocks sticking up through the floor; it appears in front of or behind the plant and the blocks as appropriate. You may notice that nothing is stopping you from moving the ball directly onto a cell that has an object, so the z-sorting can look a little bit odd if you move through an object. In the next section we add a character who can walk around in this world. We also add some collision detection to make sure the character doesn't move onto a tile that contains an object. |

Macromedia Flash MX Game Design Demystified: The Official Guide to Creating Games with Flash -- First 1st Printing -- CD Included

ISBN: B003HP4RW2

EAN: N/A

EAN: N/A

Year: 2005

Pages: 163

Pages: 163

Authors: Jobe Makar

Similar book on Amazon

- Integration Strategies and Tactics for Information Technology Governance
- Linking the IT Balanced Scorecard to the Business Objectives at a Major Canadian Financial Group
- Measuring and Managing E-Business Initiatives Through the Balanced Scorecard
- Managing IT Functions
- Governance in IT Outsourcing Partnerships

flylib.com © 2008-2017.

If you may any questions please contact us: flylib@qtcs.net

If you may any questions please contact us: flylib@qtcs.net