# 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
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

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:

2 Likes

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!