Jump to content

Load an Isometric tilemap


Nikow
 Share

Recommended Posts

Hi everyone !

 

I'm trying to use isometric plug in with phaser, and i create an isometric maps with Tiled to test it, but without any doc or exemple it s impossible for me, i'm looking for the best way to load an isometric json tilemap ?

 

Thank !

Link to comment
Share on other sites

Hello Nikow, I'd be glad to help as I am currently developing an isometric game in Phaser. I recommend that you do not use Phaser's native tilemap system. It's just too constrained and will hinder you from writing succinct code for tiling in ISO. Instead, create a group of Phaser.Images placed underneath your game objects to be used as tiles. 

 

There's a couple different methods you can use to tile your images. 

 

1) 2D tiling. a simple nested for loop will allow you to tile in an isometric view IF your tiles are modular (square or rectangular). There are ways to convert textures into isometric perspective while still maintaining modular dimensions. 

2) The "zig-zag" method. Must start out with isometric artwork (example). Essentially you place the tiles using procedural logic to shift odd/even rows, so that the placement of the tiles is correct. 

3) A transformation matrix. I don't think this is possible to do in Phaser because you need to rotate and scale an image programmatically (I've discovered Phaser is only able to scale first, then rotate). Using a transformation matrix, the basic idea is that you can mathematically determine where each tile will be placed with a formula which converts 2D coordinates to isometric.. but if you start out with the image already transformed (rotate 45 degrees and 1/2 height) and the dimensions of the image are modular (just because the image looks like a rhombus doesn't mean it is, because the edges are transparent), this formula won't work. You really need to start out with a 2D tile and transform it programmatically, otherwise you end up with white space around the image. At least that's the conclusion I've come to after a few months of research. 

 

If you can get away with using method #1, I recommend you do so. Creating the artwork is more difficult, but you really can get away with tiling the 2D way if you're tiles aren't going to be used for pathfinding (or you can simply create a separate invisible grid for pathfinding). The problem with #2 is that images with alpha layer tend to be much large (in comparison to JPEGs) so it somewhat limits how large you can make the map. 

 

Hope this help. Also, I recommend this read as a primer. 

Link to comment
Share on other sites

Hello Nikow, I'd be glad to help as I am currently developing an isometric game in Phaser. I recommend that you do not use Phaser's native tilemap system. It's just too constrained and will hinder you from writing succinct code for tiling in ISO. Instead, create a group of Phaser.Images placed underneath your game objects to be used as tiles. 

 

There's a couple different methods you can use to tile your images. 

 

1) 2D tiling. a simple nested for loop will allow you to tile in an isometric view IF your tiles are modular (square or rectangular). There are ways to convert textures into isometric perspective while still maintaining modular dimensions. 

2) The "zig-zag" method. Must start out with isometric artwork (example). Essentially you place the tiles using procedural logic to shift odd/even rows, so that the placement of the tiles is correct. 

3) A transformation matrix. I don't think this is possible to do in Phaser because you need to rotate and scale an image programmatically (I've discovered Phaser is only able to scale first, then rotate). Using a transformation matrix, the basic idea is that you can mathematically determine where each tile will be placed with a formula which converts 2D coordinates to isometric.. but if you start out with the image already transformed (rotate 45 degrees and 1/2 height) and the dimensions of the image are modular (just because the image looks like a rhombus doesn't mean it is, because the edges are transparent), this formula won't work. You really need to start out with a 2D tile and transform it programmatically, otherwise you end up with white space around the image. At least that's the conclusion I've come to after a few months of research. 

 

If you can get away with using method #1, I recommend you do so. Creating the artwork is more difficult, but you really can get away with tiling the 2D way if you're tiles aren't going to be used for pathfinding (or you can simply create a separate invisible grid for pathfinding). The problem with #2 is that images with alpha layer tend to be much large (in comparison to JPEGs) so it somewhat limits how large you can make the map. 

 

Hope this help. Also, I recommend this read as a primer. 

 

Oh thanks ! Very usefull !

 

My tiles are not in iso view, si i have to transform them with code ?

Link to comment
Share on other sites

There is no way to transform them with code in Phaser (that I know of) because if you rotate and scale an image, the scaling will always occur first (but you want the scaling to occur second for ISO view). 

 

Instead you need to make the transformations to the image beforehand, in something like photoshop. Try this. In photoshop or whatever program you are using, rotate your tile 45 degrees, then scale down the height by 1/2. Make sure there is no space around the tiles after you perform the rotation/scaling (in photoshop, use Trim). End result should look like this (note that it's a PNG with an alpha layer). Then tile your image with the following (zig zag method):

 

function evenOrOdd(i) {if(i & 1){    return 'odd';}else{    return 'even';}}function tileZigZag(key, layer) {var tile = game.make.sprite(0, 0, key);xOffset = 0;yOffset = 0;rowSize = fnRound((game.world.width / tile.width) + 4);xAcross = -1;xRowOffset = 0;rowNum = 1;var numTiles = ((game.world.width / tile.width) * (game.world.height / tile.height)) * 4;for(var i = 0; i < numTiles; i++) {if(evenOrOdd(rowNum) == 'odd') {xRowOffset = (tile.width / 2) - 5;} else {xRowOffset = 0;}if((i % rowSize) == 0) {rowNum++;yOffset = (yOffset + (tile.height / 2) - 5);xAcross = -1;} else {xAcross++;}var placeX = (((tile.width - xOffset) * xAcross) + xRowOffset);var placeY = (tile.height * -1) + yOffset;var tile = new Phaser.Image(game, placeX, placeY, key);tile.anchor.setTo(.5, .5);layer.add(tile);}} 

Key is the image key (string) and layer is the layer you want to tile into (can be game.world). So, in your create function:

 

tileZigZag('tileimagekey', game.world);

Link to comment
Share on other sites

There is no way to transform them with code in Phaser (that I know of) because if you rotate and scale an image, the scaling will always occur first (but you want the scaling to occur second for ISO view). 

 

Instead you need to make the transformations to the image beforehand, in something like photoshop. Try this. In photoshop or whatever program you are using, rotate your tile 45 degrees, then scale down the height by 1/2. Make sure there is no space around the tiles after you perform the rotation/scaling (in photoshop, use Trim). End result should look like this (note that it's a PNG with an alpha layer). Then tile your image with the following (zig zag method):

 

function evenOrOdd(i) {if(i & 1){    return 'odd';}else{    return 'even';}}function tileZigZag(key, layer) {var tile = game.make.sprite(0, 0, key);xOffset = 0;yOffset = 0;rowSize = fnRound((game.world.width / tile.width) + 4);xAcross = -1;xRowOffset = 0;rowNum = 1;var numTiles = ((game.world.width / tile.width) * (game.world.height / tile.height)) * 4;for(var i = 0; i < numTiles; i++) {if(evenOrOdd(rowNum) == 'odd') {xRowOffset = (tile.width / 2) - 5;} else {xRowOffset = 0;}if((i % rowSize) == 0) {rowNum++;yOffset = (yOffset + (tile.height / 2) - 5);xAcross = -1;} else {xAcross++;}var placeX = (((tile.width - xOffset) * xAcross) + xRowOffset);var placeY = (tile.height * -1) + yOffset;var tile = new Phaser.Image(game, placeX, placeY, key);tile.anchor.setTo(.5, .5);layer.add(tile);}} 

Key is the image key (string) and layer is the layer you want to tile into (can be game.world). So, in your create function:

 

tileZigZag('tileimagekey', game.world);

 

i'm going to try ! And come back soon to show the result !

 

Thanks :)

Link to comment
Share on other sites

Pooya, unfortunately I don't see much in the isometric plugin and its documentation about tiling. 

i know there is no way to handle tilemaps like this directly with Phaser Isometric Plugin

 

post-13445-0-96386300-1429120354.png

 but in the example in this page , developer used a trick which make it easier to work without tilemaps handler 

 

post-13445-0-89319500-1429120453.png

 

post-13445-0-96386300-1429120354.png

post-13445-0-89319500-1429120453.png

Link to comment
Share on other sites

The tiles in that example are isoSprites (not tiles) - positioned (presumably) with a transformation matrix built-into the phaser isometric plugin. I really don't think this particular method is feasible in the long term because sprites are large, expensive objects as opposed to tiles or images (which can safely be used in large quantities). I think this was just intended as an example.  

Link to comment
Share on other sites

  • 9 months later...
On 15/04/2015 at 11:55 PM, feudalwars said:

The tiles in that example are isoSprites (not tiles) - positioned (presumably) with a transformation matrix built-into the phaser isometric plugin. I really don't think this particular method is feasible in the long term because sprites are large, expensive objects as opposed to tiles or images (which can safely be used in large quantities). I think this was just intended as an example.  

I am at the planning stage to move to Phaser for an isometric game project.

I was looking at this plugin and was going to start from it's examples.

However you discouraged me with this statement :) 

I am sure you are right, as I have seen how big the maps can be in Feudal Wars.

I want my isometric maps to be big too. At least 64x64 tiles.

What approach should I take to make large isometric maps?

The only requirement for my game is that tiles can have offsets so that I can use larger images that go outside of the tile but use it as point of origin.

 

Link to comment
Share on other sites

  • 3 weeks later...

Thank you for all of the helpful suggestions and discussion thus far.

I am also in the planning stages of an isometric game in Phaser. I wonder whether there is perhaps another method that could be used:

Could a tileset be created with equilateral triangles. There would be a need for more tile artwork, but perhaps this would load faster as they could be smaller image files.. I am not sure but i wonder whether it may make pathfinding difficult in the future. I have included an example concept image, sorry for the colours I hoped they would further illustrate my point.

equilateral triangle tiles example.jpg

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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