Jump to content

Isometric tile map


enriqueto
 Share

Recommended Posts

I suspect this would require quite a lot of work to get it to the level of feature-completeness that the standard orthographic Tiled projection enjoys in Phaser. Putting together an isometric renderer isn't hugely difficult but collision detection, scrolling and depth sorting are all far trickier in isometric projections than they are in orthographic ones.

Link to comment
Share on other sites

Hello,

 

I've just been working an isometric Tiled Editor map importer function for a custom game engine.

Here's a code dump of the function's  current state:

 

https://gist.github.com/kittykatattack/e3e2505a50686bbdeef9

 

It's written in ES6, and very pre-alpha, but it works (for me) and also includes isometric tile-based collision functions.

Hopefully the comments and structure will give you some ideas for your own project... you can think of it as pseudo-code :)

It also includes search functions so that you can grab objects from the world and use them to make sprites or arrays of sprites.

But if you wanted to use it with Phaser you might be able to replace my custom sprite and group objects with Phaser's own sprites and groups.

(I don't know Phaser well so unfortunately I can't advise you on this.)

 

The only custom map properties you need to set in Tiled Editor are:

cartTilewidthcartTileheight 

These are the Cartesian (flat) dimensions of each tile. The tile sprites themselves are displayed twice as wide and high (usually) because of the perspective. I found having a these two Cartesian values available made some of the calculations less brain bending :).  

 

Here's an example. Your 2D tile map data array might based on tile dimensions of 32x32. But the isometric sprite dimensions on the screen would be 64x32 for those same tiles. (That's because the sprite width is stretched.)  If your sprites had 3D height, they could be 64x64. But the 2D map array would still stay the same: 32x32: those are the `cartTilewidth` and `cartTileheight` dimensions.

 

Except for delicately working between the isometric and cartesian coordinates, I found that writing this interpreter really wasn't more difficult than doing a regular 2D map interpreter. All of your calculations, including collision tests, are done using regular 2D coordinates and functions. The sprites then just map the 2D coordinates to isometric coordinates as final step in rendering them to the screen. It's like projecting a flat 2D surface through an isometric distortion lens. 

 

 

The script I linked above is intended to be used to create a new isometric world like this:

var world = makeTiledIsoWorld(data.json, tileset.png);

If you want to retrieve a layer group, sprite, or object from the world, you can do it like this:

var elf = world.getObject(“elf”);

You can retrieve a collection of objects as an array like this:

var items = world.getObjects(“heart”, “skull”, “marmot”);

If you have many sprites that share the same tileset name property, you can retrieve all of them in an array

var walls = world.getObjects(“wall”);

This will give you an array of any objects in the world that have their custom "name" properties as "wall".

 

Anything in Tiled Editor that has a custom `name` property shows up in these searches: layers, sprites, or objects.

 

I would really like to encourage you with your project because, if you're comfortable working with 2D tile-based worlds, adding an isometric display feature is really trivial - good luck :)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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