1 Reply Latest reply on Sep 15, 2009 5:08 PM by kglad

    Putting A Layer Over Drawing Canvas - Tile Map

    TheBrody-yooWmS Level 1

      I want to make it so that a layer will be above the map when its drawn.

       

      Like I want a layer over this, cause im making a menu for the game, but the game is above the layer.

       

       

       


      var tiles:Object = new Object({width:52, height:26}); // The size of the 'flat' tile. Tiles are allowed to be different dimentions, to give the '3D' effect.
      var offset:Object = new Object({x:130, y:100}); // This object helps center the 'hero' to the stage.
      var hero:Object = new Object({x:1, y:5}); // The starting position of the 'hero'
      var canvas:Object = new Object({mc:_root.createEmptyMovieClip("canvas", _root.getNextHighestDepth())}); // Contains the primary movie clip and map information.

       

      canvas.map = new Array( // Dictates the topography of the environment
                              // The reason I decided to to use 200 for walls and 100 for ground is to leave
                              // the option open add more tiles, such as 86 for another type of tile that is
                              // walkable. Since the collision detection code checks to see if the tile is
                              // less then 200 (less is walkable, 200 or above is not), there is no need to change
                              // the code toenable new tiles, simply name them a number between 0 and 200.
                              new Array(200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,193,196,196,196,196,189,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,194,187,182,182,179,190,100,200),
                              new Array(200,100,100,199,199,199,199,199,199,199,199,199,199,186,183,183,180,190,100,200),
                              new Array(201,199,199,199,100,100,100,100,100,100,100,100,194,186,183,183,180,190,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,194,186,183,183,180,190,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,194,186,183,183,180,190,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,194,185,181,181,178,190,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,192,195,195,195,195,188,100,200),
                              new Array(200,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,200),
                              new Array(200,100,100,100,100,100,200,200,200,200,200,200,200,200,200,200,200,200,200,200),
                              new Array(200,200,200,200,200,200,200)
                          );

       

      _root.onLoad = function():Void
      {
          initmap(canvas.map); // Draw the map
          initplayer(); // Draw the player
         
          return;
         
      };

       

      _root.onEnterFrame = function():Void
      {
          input(); // Handle keyboard movement
         
          return;
         
      };

       

      function input():Void // Modifies the 'hero' object, handles collision detection ('hero' and wall)
      {
          // Any tile less then 200 is walkable, anything above is not.
          // No need to change this code handle more tiles, just name the tiles a number.
          // (not the best way to do this but simple, quick, and easy to do)
          if(Key.isDown(Key.LEFT) && canvas.map[hero.y - 1][hero.x] < 200) hero.y--;
          else if(Key.isDown(Key.RIGHT) && canvas.map[hero.y + 1][hero.x] < 200) hero.y++;
          else if(Key.isDown(Key.UP) && canvas.map[hero.y][hero.x - 1] < 200) hero.x--;
          else if(Key.isDown(Key.DOWN) && canvas.map[hero.y][hero.x + 1] < 200) hero.x++;
         
         
          move();
         
         
         
         
          return;
         
      };

       

      function move():Void // Moves the background and the hero
      {
          // These three lines handle swapping the tile depths to give the '3D' effect
          var d:Number = (hero.y * tiles.height) + (hero.x * tiles.width) + hero.y;
          hero.mc.swapDepths(d);
          canvas.mc["tile_" + hero.y + "_" + hero.x].swapDepths(d - 1);
         
          // Move the hero in the opposite direction the environment moves
          hero.mc._x = (tiles.width / 2) * (hero.y - hero.x) + offset.x;
          hero.mc._y = (tiles.height / 2) * (hero.y + hero.x) + offset.y;
         
          // Move the environment
          canvas.mc._x = (tiles.width / 2) * (-hero.y - -hero.x) + offset.x;
          canvas.mc._y = (tiles.height / 2) * (-hero.y + -hero.x) + offset.y;
         
          return;
         
         
         
             
                 
         
      };

       

      function initplayer():Void // Self-expalanatory
      {
          var d:Number = (hero.y * tiles.height) + (hero.x * tiles.width) + hero.y;
         
          hero.mc = canvas.mc.attachMovie("hero", "hero_mc", d + 1, {_x:hero.x * tiles.width, _y:hero.y * tiles.height});
         
          move();
         
          return;
         
      };

       

      function initmap(map:Array):Void // Render map
      {
          var map_height:Number = map.length; // Determine height of the map
          var map_width:Number = map[0].length; // Determine width of the map
         
          for(var y = 0; y < map_height; y++)
          {
              for(var x = 0; x < map_width; x++)
              {
                  // Movieclip depth is everything when doing an isometric game
                  var depth:Number = (y * tiles.height) + (x * tiles.width) + y;
                 
                  // Attach tile to 'canvas'
                  var tile:MovieClip = canvas.mc.attachMovie("tile" + map[y][x], "tile_" + y + "_" + x, depth);
                 
                  tile._x = (tiles.width / 2) * (y - x) + offset.x;
                  tile._y = (tiles.height / 2) * (y + x) + offset.y;
                 
              };
             
          };
         
          return;
         
         
         
      };

        • 1. Re: Putting A Layer Over Drawing Canvas - Tile Map
          kglad Adobe Community Professional & MVP

          there are no layers when your fla is published (or tested).  all displayobjects are assigned depths based on code used to assign depths and compiler code that assigns depths to objects you place on-stage in the authoring environment.

           

          all objects placed on-stage in the authoring environment are placed at negative depths starting with about -16,380.   that's why your menu (which is probably added to some layer in the authoring environment is below the movieclip you placed at nextHighestDepth() (which adds to no depth less than zero)

           

          to change a movieclip's depth use the swapDepths() method of movieclips.