<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mantra.js Gallery Page - tilemap from-labyrinthos</title>
<script src="https://yantra.gg/mantra.js"></script>
<script src="https://yantra.gg/worlds.mantra.js"></script>
</head>
<body>
<script>
let game = new MANTRA.Game({
graphics: ['css'],
defaultMovement: true,
camera: 'follow',
plugins: ['RBush', 'Tile', 'Gamepad', 'GamepadGUI', 'Bullet', 'Boomerang'],
useFoV: true,
});
game.start(function () {
game.zoom(2.5);
game.createPlayer();
let tileMap = new game.TileMap({
x: 0,
y: 0,
width: 16,
height: 16,
tileWidth: 16,
tileHeight: 16
});
tileMap.fill(2);
tileMap.seed(12345);
let tileset = new game.TileSet({
tiles: [
{ id: 0, name: 'grass' },
{ id: 1, name: 'bush', body: true, isStatic: true },
{ id: 2, name: 'tree' },
{ id: 3, name: 'block', body: true },
{ id: 4, name: 'path-green' },
{ id: 5, name: 'path-brown' }
]
});
let forest = new game.Biome({
name: 'forest',
tileset: tileset,
distribution: {
'grass': 0.5,
'bush': 0,
'tree': 0.15,
'block': 0,
'path-green': 0.2,
'path-brown': 0.2
}
});
console.log('forest', forest);
game.terrains.PerlinNoise(tileMap, {});
tileMap.applyBiome(forest);
tileMap.data = tileMap.data.map((tile) => {
if (tile === 0) {
return 1;
}
return tile;
});
console.log("tileMap", tileMap)
</script>
</body>
</html>