Phaser Tilemaps and Tiled

[Franzeus]

Hi devs,

I got some questions about the way to work with phaser and tiled and I haven't really found answers yet and hope that you guys can help me

My goal is to create a simple tilebased game (top down view) with walls, towers and later add player objects.

I am using Tiled to create the map. The tilesize is 16x16.

Using Arcade Physics for collision.

 

# Map (16x16) and rendering

My tower-sprites are 32x32px. So basically 2 columns, 2 rows.

 

Rendering-Problem:

The towers (32x32) have some kind of an offset when I place them into the 16x16 grid. If I import them in Tiled and specify they are 16x16, then it works.

I tried to set the TILE RENDER OPTION to "Left Up" but it didn't help. What am I doing wrong here?

 

Collision-Problem:

Only the top left cell of the tower seems to have a bounding box for collision. The other cells are ignored.

Is there a way to tell phaser that the tile is actually not 16x16, but 32x32 and occupies more cells?

# Map creation:

this.map = this.phaser.add.tilemap('map');
this.map.addTilesetImage('wall');
this.map.addTilesetImage('tower');
this.layer = this.map.createLayer('World');


# Tower JSON

{
         "columns":2,
         "firstgid":2,
         "image":"..\/game\/tower.png",
         "imageheight":32,
         "imagewidth":32,
         "margin":0,
         "name":"tower",
         "spacing":0,
         "tilecount":4,
         "tileheight":16,
         "tileproperties":{},
         "tilewidth":16,
}

 

# Object creation

The players are not included in the tilemaps json-data but created "dynamically" with their own class (extends Sprite):

Unit = function (index, game, opts) {
  opts = opts || {};
  var x = opts.x || game.world.randomX;
  var y = opts.y || game.world.randomY;
  this.game = game;
  // etc ...

  Phaser.Sprite.call(this, game, x, y, 'player');
};

Unit.prototype = Object.create(Phaser.Sprite.prototype);
Unit.prototype.constructor = Unit;

 

I wonder how it would work to create a Tower class for each tower-tile I encounter.

Basically link tiles to an object:

// Something like:
for each tile:
  if tile == 'tower'
     new Tower()

 

 And when a player collides with a tower I can call my own defined methods like: Tower.collidesWith(player_sprite)

Thank you very much!

[jonteferm]

About the collision: you can specify a custom bounding box by calling sprite.body.setSize(width, height, offsetX, offsetY).

[Franzeus]

Ok thanks, but how do I access "sprite"?

I think what I am missing is how to access the created Sprites (or Tileset objects) which were generated by the json-data.

Is the Tilemap.createFromObjects something which could work?

[jonteferm]

1 minute ago, Franzeus said:

Ok thanks, but how do I access "sprite"?

I think what I am missing is how to access the created Sprites (or Tileset objects) which were generated by the json-data.

Is the Tilemap.createFromObjects something which could work?

Ah, I see what you mean. If you should be able to call the sprite body in that way - the sprite must be it's own sprite object like the player Unit you got. So if I were you - I would create the towers in the object layer in tiled.

[jonteferm]

If you want to get a specific tile out of a layer though. You can call this on the tilemap: getTile(x, y, layer, nonNull) . But that will be a tile object and not a sprite. Yes maybe the createFromObjects will work. Maybe iterating trough the tilemap and call that for every tile as it requires the layer array index.

[Franzeus]

Perfect, its exactly what I wanted! Didn't really understand the objects layer in Tiled

var Tower = function () {
  Phaser.Sprite.apply(this, arguments);
};
Tower.prototype = Object.create(Phaser.Sprite.prototype);
Tower.prototype.constructor = Tower;


// Creation:
this.towers_group = this.phaser.add.group();
this.towers_group.classType = Tower;
this.towers_group.enableBody = true;

// name, gid, key, frame, exists, autoCull, group, CustomClass, adjustY
this.map.createFromObjects('Object Layer 1', 1, 'tower', 0, true, false, this.towers_group, Tower);

this.towers_group.setAll('body.immovable', true);
this.towers_group.setAll('body.moves', false);

 

[jonteferm]

2 minutes ago, Franzeus said:

Perfect, its exactly what I wanted! Didn't really understand the objects layer in Tiled

var Tower = function () {
  Phaser.Sprite.apply(this, arguments);
};
Tower.prototype = Object.create(Phaser.Sprite.prototype);
Tower.prototype.constructor = Tower;


// Creation:
this.towers_group = this.phaser.add.group();
this.towers_group.classType = Tower;
this.towers_group.enableBody = true;

// name, gid, key, frame, exists, autoCull, group, CustomClass, adjustY
this.map.createFromObjects('Object Layer 1', 1, 'tower', 0, true, false, this.towers_group, Tower);

this.towers_group.setAll('body.immovable', true);
this.towers_group.setAll('body.moves', false);

 

Awsome! Yes, this works just as fine in this case. I use to create backgroundLayer and blockLayer in tiled and set collision on the whole block layer (because everything is just walls). Then I have an object layer for doors, items, npc starting positions and stuff that is going to be interacted with. Though, the tiles in the object layer are only placeholders to which I - in Tiled - assign properties with the name of the sprite/sprites that I should use in phaser as most of the stuff in my object layer use sprite-sheets for animation.