island coast
Biomes

Biomes are the different types of environments that we find in the world, which are defined by their temperature, light, elevation and how much water is around. World Tree creates biomes based upon how much water is in the area and this can be defined by the geometry of the land and how much rain is added, and from what direction the wind blows.

Moisture based biomes
As usual, the first in changing the world is providing some more graphics to represent those variations. For an outside map, we've already seen the 'Lowland0' type, and the engine supports breaking the map into two main regions: Lowland and Upland, and then each of these can be sub-divided into six parts. We'll stick with a single tile shape for simplicity.


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, 2, 3, 3, 3, 2, 2, 1, 0],
    [0, 1, 2, 3, 3, 4, 3, 2, 2, 1, 0],
    [0, 1, 2, 2, 3, 3, 3, 2, 2, 1, 0],
    [0, 1, 2, 2, 2, 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.Lowland3,
  wall: WT.TerrainType.Lowland3,
  // How biomes are chosen, here:
  // - Any tile with a height of '0' or less is considered water.
  // - We're adding 50 units of rain.
  // - The rain will start at the bottom of the map and move towards the top.
  // - Any tile with a height of 4 or above will be considered 'upland'. 
  biomeConfig: {
    waterLine: 0,
    rainfall: 50,
    rainDirection: WT.Direction.North,
    uplandThreshold: 4,
  },
  terrainSpriteDescriptor: {
    spriteWidth: 322,
    spriteHeight: 270,
    spriteSheetName: "demos/graphics/png/outside-terrain-tiles-muted",
    // Support all the TerrainTypes
    tileRows: [
      WT.TerrainType.Lowland5,
      WT.TerrainType.Lowland4,
      WT.TerrainType.Lowland3,
      WT.TerrainType.Lowland2,
      WT.TerrainType.Lowland1,
      WT.TerrainType.Lowland0,
      WT.TerrainType.Upland5,
      WT.TerrainType.Upland4,
      WT.TerrainType.Upland3,
      WT.TerrainType.Upland2,
      WT.TerrainType.Upland1,
      WT.TerrainType.Upland0,
      WT.TerrainType.Water,
    ],
    tileColumns: [
      WT.TerrainShape.Flat,
    ],
  },
};
          
The code is running in the canva below (if your screen is big enough), so use mouse click to move the camera around.