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.