Isometric 2d map tile

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

// 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(
-Math.PI / 2,
Math.PI / 4,

  camera.ortho = true;

  // Set Zoom Level
  camera.radius = 1000; //this is because if not, the map is not noticeable


  return camera


and finally the result xD :

Thank you ahead of time

Welcome aboard!

It will be easier for us to help if you can move your code in the Playground.

One wrong thing I can see is that to set an orthographic camera you should set camera.mode = camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA. When it’s done, you need to set the size of the orthographic camera, something like:


Hi, thanks for your response! I wrote my code in the playground and managed to make some changes in the camera to achieve the view I expected

the tiles would not be displaying as expected, instead of taking the shape of a block it is still 2d. I think I don’t understand the tool well and I’m missing something.

I think it will be much easier if you create cubes and position them appropriately + using an orthographic camera.

Is there any reason why these should be planes with a false cube perspective? I feel like it might be harder for you to implement your game that way…

But create a cube is not a 3d figure? my textures are png … I don’t understand well, thanks for the help anyway. I am using excaliburjs that has a function to create isometric maps and I will continue with that. Thanks for the help!