Jump to content

Isometric tiling in babylon


Recommended Posts

Hello. I am new to babylon.js. I have used phaser before for isometric. I want to create a isometric tiled map, similar to this in babylon.map.png

I have set up an isometric camera view with setTarget at ground.position (I created a ground). I want a similar view the one on the image. I don't actually know how do you generate isometric maps like those in babylon. Is with a for loop like:

For some reason the tiles are spawning all in the same place despite xx and zz being always different.

function spawnGrassTiles (half_tile_width,half_tile_height,size_x,size_y) {
        for (var xx = 0; xx < size_x; xx += half_tile_width) {
            for (var zz = 0; zz < size_y; zz += half_tile_height) {
                var grass_tile = new BABYLON.Sprite("grass_tiles", grassTilesCreator);
                grass_tile.position.x = xx;
                grass_tile.position.z = zz;

// do I need to specify the y position?

Or do I create a ground and edit it somehow? Thank you 

Link to comment
Share on other sites

2 hours ago, Milton said:

Using Sprites in a 3D engine sort of defeats the purpose you're looking for.
Use meshes for your tiles, and sprites for eye candy.
For an Isometric example, take a look at this.

Concerning your actual problem, maybe it's a scale/zoom thing? Ask @Deltakosh

I know about meshes. I just didn't know you do "tilemaps" with them in 3D engines... Is it the same logic? Just exchange the tiles for meshes with a texture? I think you are right. It is a problem of zoom because the values I did console.log (the coordinates) were very small (0.0121, etc). I need to change the camera zoom or something like that I think.

As for isometric example you linked it doesn't seem to load because it can't find some of the assets (I don't know if it is because of that, just saw it on the console). I get a black screen with a loading.

Link to comment
Share on other sites

Hmm, the example works fine for me. Just download the zip, unzip it in your www directory, and behold:


This is the perfect example of how to make an Isometric game.
TileMap is just a 2D render term. It means uploading all Tile images to the GPU, and then whatever you draw, it can do it *fast*.
A 'tilemap' in 3D just means you have some sort of internal representation of what your world is supposed to look like. It has *nothing* to do with your renderer.
You can load a Tiled map, but you'll have to do the rest yourself.

Link to comment
Share on other sites

I think I got the concept... well the game is structured in a different way than what I am used to see (not that I have seen lots of things already :D). I haven't still been able to run the game but I am exploring the files and trying to adapt the logic to my purposes. Anyway the errors I am getting when running are these: Captursssssar.PNG


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...