Isometric Terra-Forming and Animated Tiles


We're not going to go into detail about how best to draw isometric tiles here, but we will show you how you can create interesting virtual worlds even with the simplest of tiles. You're also going to see how you can create an animated tile.

  1. You'll continue with the framework built up in the previous example ( diamond_map.fla ). This extension is called diamond_terra.fla , which you'll find in this chapter's samples folder, available for download from www.friendsofed.com as usual.

  2. In addition to the short wall movie clip symbol that's already in the Library, you're going to create two new blue blocks called tall wall and really tall wall. Again, those interested can follow the instructions in steps 3 to 17 of the Laying out isometric tiles with ActionScript example to create both movie clip symbols. For the tall wall , move the guide 10 pixels up from its original position ( y = -10 ), and for the really tall wall , move it 40 pixels up ( y = -40 ) in step 6. Make sure that you give them linkage IDs that match their movie clip symbol names ( tall wall and really tall wall , respectively).

  3. Now that you've got more than two tiles to manage, it makes sense to keep track of the linkage IDs of the tiles in an array. So, you're going to add a tiles_array to your script, just before the section where you define the map_array , and you're going to modify your map to use these new tiles you have at your disposal.

    So, first off, add the following code above the map_array definition:

     // an array to hold tile symbol IDs  tiles_array = [   "grass",   "short wall",   "tall wall",   "really tall wall"   ]:  
  4. Next up, modify the map_array so that it now looks like this:

     // map of our lovely garden  map_array = [   [1, 1, 1, 2, 0, 0, 0, 2, 1, 1, 1],   [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],   [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],   [2, 0, 0, 1, 1, 1, 1, 1, 0, 0, 2],   [0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0],   [0, 0, 0, 1, 2, 3, 2, 1, 0, 0, 0],   [0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0],   [2, 0, 0, 1, 1, 1, 1, 1, 0, 0, 2],   [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],   [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],   [1, 1, 1, 2, 0, 0, 0, 2, 1, 1, 1]  ]; 
  5. Finally, replace the line in the inner loop where you decide the tileID of the tile to load in with the following one, so that it uses your new tiles_array when deciding which tile to display:

      var tileID = tiles_array[ map_array[ gridY ][ gridX] ];  
  6. Now take a look at your new isometric garden. Test the movie with the usual CTRL/CMD+ENTER.

    click to expand
  7. No, we haven't forgotten about the animated tile we promised you and, furthermore, it's going to be very simple to create and add to your movie since you now have a tiles_array and map_array to work with. Start out by creating the animated tile. Create a new movie clip symbol using Insert > New Symbol (CTRL/CMD+F8) and call it anim wall .

  8. Rename Layer 1 as tiles .

  9. Using the timeline below as a guide, place new keyframes at the 1st, 6th, 11th, 26th, and 32nd frames by clicking on the frames and pressing F6. Now you can drag the movie clips from the Library onto specific frames (specified below) and set their x- and y-coordinates using the Property Inspector:

    Frame

    Movie Clip Symbol

    x-coordinate

    y-coordinate

    1

    short wall

    -4

    6

    tall wall

    -10

    11

    really tall wall

    -45

    26

    tall wall

    -10

    32

    short wall

    -4

  10. Finally, click on frame 36 and select Insert > Frame (F5) to extend the timeline to that frame. Your timeline should now look like this:

    click to expand
  11. Your animated tile is nearly finished. Click on the Scene 1 link to return to the main timeline. Right-click (CMD-click) on your newly created anim wall movie clip in the Library and select Linkage... from the context-sensitive menu. Give it the linkage ID anim wall .

  12. Next, you need to add this linkage ID reference to your tiles_array near the start of the code:

     tiles_array = [     "grass",     "short  wall",     "tall wall",     "really tall wall",  "anim wall"  ]; 
  13. Then you can modify the map to use the new animated tiles. Replace the map_array definition with the one below:

     map_array = [     [1, 1, 1, 2, 0, 0, 0, 2, 1, 1, 1],     [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],     [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],  [2, 0, 0, 1, 1, 4, 1, 1, 0, 0, 2],  [0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0],  [0, 0, 0, 4, 2, 4, 2, 4, 0, 0, 0],  [0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0],  [2, 0, 0, 1, 1, 4, 1, 1, 0, 0, 2],  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],     [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],     [1, 1, 1, 2, 0, 0, 0, 2, 1, 1, 1]    ]; 
  14. Finally, test the movie (CTRL/CMD+ENTER). Notice how even the taller, animated tiles display properly with regard to the z-order . This is, again, due to the order in which you draw the tiles.

    click to expand

The richness and realism of a tile-based isometric world is very much dependent on the quality of its tiles. If you want to take your isometric tile drawing skills further than the techniques described in this chapter, take a look at the wonderful tutorial by Zoggles over at www. indie -rpg.net/pixel-zone/shtml/tut-isometric.shtml .

In the final example, coming up next, you'll place an interactive character in your isometric world (in this case, your beloved sphere from the scaling chapters). There, you will need to take control of the z-order manually. Don't worry, though ”it's not complicated.




Flash 3D Cheats Most Wanted
Flash 3D Cheats Most Wanted
ISBN: 1590592212
EAN: N/A
Year: 2002
Pages: 97

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