Hello, I’m learning to use Babylonjs. I wanted to start a project of a small 2d game, I made a tiled map and exported it as a js file. I would like to create an isometric view for my game but I can’t in any way, I’m very new to this xD
I am including an image of the map that I export in js :
I include the tile:
this is the code i use :
export function map(scene, tileMap) {
const grid = {
‘h’: tileMap.height,
‘w’: tileMap.width
};
const tileWidth = tileMap.tilewidth;
const tileHeight = tileMap.tileheight;
// Create the multi material
const multiMaterial = new BABYLON.MultiMaterial("multi", scene);
// Create the different materials
const grassMaterial = new BABYLON.StandardMaterial("grass", scene);
grassMaterial.diffuseTexture = new BABYLON.Texture("assets/grass_n.png", scene);
grassMaterial.diffuseTexture.hasAlpha = true;
// Add the materials to the multi material
multiMaterial.subMaterials.push(grassMaterial);
// Iterate over the tile map and create isometric blocks
const data = tileMap.layers[0].data;
for (let i = 0; i < data.length; i++) {
const x = i % grid.w;
const y = Math.floor(i / grid.w);
// Convert matrix coordinates to isometric coordinates
const isoX = (x - y) * tileWidth / 2;
const isoY = (x + y) * tileHeight / 2;
// Create the isometric block
const block = BABYLON.MeshBuilder.CreatePlane(`block${i}`, { size: tileWidth }, scene);
block.position = new BABYLON.Vector3(isoX, 0, isoY);
// Set the material of the isometric block
block.material = multiMaterial.subMaterials[data[i] - 1];
}
}
my camera :
const isometricCamera = function(scene) {
const camera = new BABYLON.ArcRotateCamera(
“Camera”,
-Math.PI / 2,
Math.PI / 4,
15,
BABYLON.Vector3.Zero(),
scene
);
camera.ortho = true;
// Set Zoom Level
camera.radius = 1000; //this is because if not, the map is not noticeable
camera.setTarget(BABYLON.Vector3.Zero());
return camera
}
and finally the result xD :
Thank you ahead of time