Terrain Shapes

We're going to stick with a single TerrainType, but add all the shapes that the engine supports, including ramps and 'edge' tiles. We're going to use a larger map this time and it's going to be an outside map, so we're using the Lowland0 type: one that would translate to low-level ground that probably a bit moist (more on that in the next section).

import * as WT from "./demos/lib/world-tree.mjs";

const worldDescriptor = {
  canvasName: "demoCanvas",
  projection: "TwoByOneIsometric",
  heightMap: [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 1, 2, 2, 2, 2, 1, 1, 1, 1, 0],
    [0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
    [0, 1, 2, 3, 3, 4, 3, 2, 2, 1, 0],
    [0, 1, 2, 3, 4, 6, 4, 2, 2, 1, 0],
    [0, 1, 2, 3, 4, 4, 3, 2, 2, 1, 0],
    [0, 1, 2, 3, 3, 2, 2, 2, 2, 1, 0],
    [0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ],
  numTerraces: 3,
  floor: WT.TerrainType.Lowland0,
  wall: WT.TerrainType.Lowland0,
  terrainSpriteDescriptor: {
    spriteWidth: 161,
    spriteHeight: 125,
    spriteSheetName: "demos/graphics/png/outside-tiles-muted-161x125",
    tileRowTypes: [
      WT.TerrainType.Lowland0,
    ],
    tileColumnShapes: [
      WT.TerrainShape.Flat,
      WT.TerrainShape.FlatWest,
      WT.TerrainShape.FlatNorth,
      WT.TerrainShape.FlatEast,
      WT.TerrainShape.FlatSouth,
      WT.TerrainShape.FlatNorthWest,
      WT.TerrainShape.FlatNorthEast,
      WT.TerrainShape.FlatSouthEast,
      WT.TerrainShape.FlatSouthWest,
      WT.TerrainShape.FlatWestOut,
      WT.TerrainShape.FlatNorthOut,
      WT.TerrainShape.FlatEastOut,
      WT.TerrainShape.FlatSouthOut,
      WT.TerrainShape.FlatAloneOut,
      WT.TerrainShape.FlatNorthSouth,
      WT.TerrainShape.FlatEastWest,
      WT.TerrainShape.RampUpSouth,
      WT.TerrainShape.RampUpWest,
      WT.TerrainShape.RampUpEast,
      WT.TerrainShape.RampUpNorth,
    ],
  },
};
          

The TerrainBuilder will automatically add edge and ramp tiles into the map if the correct sprites have been provided. The location of a ramp is determined by the height map:
- The TerrainBuilder will find a location that is the exact mid-point between two terrace heights.
- It will then attempt to convert the, directly, adjacent tiles into a ramp.
- The only restriction on whether a tile becomes a ramp is that the new ramp will lead to flat terrain tile (we don't want ramps to a cliff or into the air!)

Our map now has more considerably more detail in the cliff edges and ramps join up the terraces. The code is running in the canva below (if your screen is big enough), so use mouse click to move the camera around.