Jump to content

Collection of Images in Tiled and Phaser 3.


Mono2692
 Share

Recommended Posts

Hi, and thank you for reading this. I'm new to Phaser so my experience using it is almos zero. I'm using Tiled so I can create a Tile set using a Collection of Images because I need to create a custom collision for each one of the images so I can use it with the Matter physics engine. I created a new Tile set in Tiled using the Collection of Images option and created the Collision for each one of them, when I export the Tile set it give me a .json file that I should use with Phaser. The problem is that I don't have sprite sheet with all the sprites I'm using,  each sprite or Tile  in the Tile set created by Tiled is in a separate .png file. I want to know how to use the .json generated by Tiled and each separate .png file. How do I tell Phaser wich image belongs to a specific tile in the .json. I hope i made my self clear. Any help would be apreciated, thanks. Here is the .json generated by Tiled.

{ "columns":0,
"grid":
{
"height":1,
"orientation":"orthogonal",
"width":1
},
"margin":0,
"name":"phaser_test_tileset",
"spacing":0,
"tilecount":4,
"tiledversion":"1.2.0",
"tileheight":210,
"tiles":[
{
"id":0,
"image":"phasertest-master\/phaser3-project-template\/assets\/main_block_1_1.png",
"imageheight":70,
"imagewidth":70,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":70,
"id":2,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":70,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
},
"properties":[
{
"name":"collide",
"type":"bool",
"value":true
}]
},
{
"id":1,
"image":"phasertest-master\/phaser3-project-template\/assets\/main_block_2_1.png",
"imageheight":140,
"imagewidth":140,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":0,
"id":1,
"name":"",
"polygon":[
{
"x":0,
"y":0
},
{
"x":0,
"y":140
},
{
"x":140,
"y":140
},
{
"x":140,
"y":70
},
{
"x":70,
"y":70
},
{
"x":70,
"y":0
}],
"rotation":0,
"type":"",
"visible":true,
"width":0,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
},
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":2,
"image":"phasertest-master\/phaser3-project-template\/assets\/main_block_3_1.png",
"imageheight":210,
"imagewidth":140,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":0,
"id":1,
"name":"",
"polygon":[
{
"x":0,
"y":0
},
{
"x":70,
"y":0
},
{
"x":70,
"y":66
},
{
"x":140,
"y":67
},
{
"x":140,
"y":210
},
{
"x":70,
"y":210
},
{
"x":69,
"y":145
},
{
"x":0,
"y":144
}],
"rotation":0,
"type":"",
"visible":true,
"width":0,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
},
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":3,
"image":"phasertest-master\/phaser3-project-template\/assets\/main_block_4_1.png",
"imageheight":140,
"imagewidth":210,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":0,
"id":1,
"name":"",
"polygon":[
{
"x":0,
"y":0
},
{
"x":0,
"y":140
},
{
"x":210,
"y":140
},
{
"x":210,
"y":0
},
{
"x":136,
"y":-1
},
{
"x":136,
"y":68
},
{
"x":70,
"y":68
},
{
"x":69,
"y":-2
}],
"rotation":0,
"type":"",
"visible":true,
"width":0,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
},
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
}],
"tilewidth":210,
"type":"tileset",
"version":1.2
}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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