Jump to content

Trouble with tilemaps


udisun
 Share

Recommended Posts

I'm trying to load a tilemap i've created with tiled using a free tile sprite.

This should be the end result:

http://d.pr/i/WX4s

For some reason only the top row of the map is rendered:

http://d.pr/i/oDRZ

 

The code i have in the preload function is:

this.load.tilemap('battleGround', 'assets/tiles/BattleMap.json', null, Phaser.Tilemap.TILED_JSON);this.load.tileset('groundSet', 'assets/tiles/forestgroundSet.png', 35, 35);this.load.image('tree', 'assets/images/treeTrunk.png');

The code i have in the create function is:

this.tree = this.add.sprite(this.game.width / 2, this.game.height / 2 - 50, 'tree');this.tree.anchor.setTo(0.5, 0.5);map = this.add.tilemap('battleGround');tileset = this.add.tileset('groundSet');layer = this.add.tilemapLayer(0, 0, this.game.width, this.game.height, tileset, map, 0);layer.resizeWorld();

this is the BattleMap.json code:

http://pastebin.com/EKF8pEns

 

and the sprite is attached.

 

I'm using phaser 1.1.3 on master branch.

 

I would appreciate any help in this issue.

 

post-6297-0-44308300-1390035623.png

Link to comment
Share on other sites

Disclaimer: I'm still a beginner and I don't had much time looking into it... but here are my thoughts ;)

this.load.tileset('groundSet', 'assets/tiles/forestgroundSet.png', 35, 35);

edit: 35x35 does not sound right for your tileset?

 

Your tileset (forestgroundSet.png) is 629px * 679px

I'm not sure but I think you need a image dimension that is a multiple of your tile dimensions (32px).

It look like the engine has trouble loading all tiles (if you fill your whole map with tiles from your current top row it works just fine)

Link to comment
Share on other sites

I was just trying to figure this out as well. based just on the two above scrnshots in the op I don't think the dimensions are wrong because the layer that is shown is being displayed properly.

layer = this.add.tilemapLayer(0, 0, this.game.width, this.game.height, tileset, map, 0);

the last argument is the layer index, it is set at 0 and so displays only that layer. If you change that number it will display another. I can't figure out how to display multiple layers in one invocation BUT...

 

layer0 = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);

layer1 = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 1);
layer2 = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 2);
 
this totally works for displaying multiple layers.
Link to comment
Share on other sites

Hi Udinsun,

 

It would be easier to find out what is going wrong, if you post a full demo of the problem (for example index.html + resources, so we can download an run/debug).

 

Anyway I think I know what the problem could be without debugging:

 

I think the tileset must be an image containing only one row of tiles with no padding or margings.

 

Your sprite file does not contain all tiles in one row but  "all over the place".

 

To test if this is indeed the correct solution I would create a Picture with the dimentions

 

width = maximum_tile_index * 32

height = 32

 

Just put a gradiant in this image, load it instead of the forestGroundSet (fix the tile dimention to 32x32) and then run your program.

I think you will then see, that the whole map is rendered.

 

The big work will then be, to get the forestGroundSet into the correct format (all tiles in one row).

 

ps: The reason why only your top row of the map is renderd:

- it's the only row that contains low tile-indexes

- phaser only loads 35x35 tiles from the first row of the forstGroundset, so it only loads 17 tiles

that's why everything else is empty. (Should be filled if you use the test tileimage with the gradient.)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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