Get the X/Y from objects in a layer

Questions
1

Let’s say I have a JSON export of this map:

{
	"compressionlevel": -1,
	"height": 200,
	"infinite": false,
	"layers": [{
			"comment": "// snippet out for clarity"
		},
		{
			"draworder": "index",
			"id": 4,
			"name": "NPCs",
			"objects": [{
					"class": "",
					"gid": 568,
					"height": 64,
					"id": 21,
					"name": "Fred the Town Bum",
					"properties": [{
							"name": "actions",
							"type": "string",
							"value": "examine,talk"
						},
						{
							"name": "examine",
							"type": "string",
							"value": "He stinks."
						}
					],
					"rotation": 0,
					"visible": true,
					"width": 64,
					"x": 4672,
					"y": 7680
				}
			],
			"opacity": 1,
			"type": "objectgroup",
			"visible": true,
			"x": 0,
			"y": 0
		},
		{
			"draworder": "topdown",
			"id": 5,
			"name": "Monsters",
			"objects": [],
			"opacity": 1,
			"type": "objectgroup",
			"visible": true,
			"x": 0,
			"y": 0
		}
	],
	"nextlayerid": 6,
	"nextobjectid": 29,
	"orientation": "orthogonal",
	"renderorder": "right-down",
	"tiledversion": "1.9.0",
	"tileheight": 64,
	"tilesets": [{
			"firstgid": 1,
			"source": "background.tsx"
		},
		{
			"firstgid": 253,
			"source": "foreground.tsx"
		},
		{
			"firstgid": 550,
			"source": "objects\/Monsters.tsx"
		},
		{
			"firstgid": 568,
			"source": "objects\/NPCs.tsx"
		}
	],
	"tilewidth": 64,
	"type": "map",
	"version": "1.9",
	"width": 200
}

As I’m writing my game (in TypeScript), how would I get the X/Y coordinate to snip from the Tileset to paint “Fred the Town Bum” from the NPC tileset. I know it because the gid is 568 which has the source of "source": "objects\/NPCs.tsx". But would it then realize of… get this tileset… clip it at X=n and Y=n.

Basically… how would I get the information from the gid of the tile in the tileset to clip?

2

First, you’d need to make sure you read and clear any flip flags on the tile. The documentation about global IDs has info about this.

Then, for a “Based on Tileset Image” tileset, you can calculate the x, y position in terms of tiles based on the tileset’s columns, and then you’d multiply x and y by the tile size and spacing and add the tileset’s margin to get the pixel location.

I’ve written about this in detail in my tip sheet: Tiled Tip Sheet

1 Like
3

Thank you. Where are you getting the tileset’s columns and margin? When I go the referenced tileset. for example objects/NPCS.tsx, I get:

<?xml version="1.0" encoding="UTF-8"?>
<tileset version="1.5" tiledversion="1.7.2" name="NPCs" tilewidth="64" tileheight="64" tilecount="8" columns="8" objectalignment="topleft">
 <image source="../../../client/src/assets/graphics/actors/npcs.png" width="512" height="64"/>
</tileset>

As for the flag flipping, I have cleared that:

image
image336×610 30.2 KB

4

You get those values from the tileset. Your example tileset has a columns property, looks like its value is 8. If spacing or margin are missing, that means the value is 0 - trivial defaults are not written out.

And by clearing the flags, I mean in your code. You shouldn’t rely on the incoming map files to be devoid of these flags. Even if you don’t want to implement support for flipped tiles, you should at least clear the flags so that you don’t run the risk of trying to use a GID with flip flags to get tile index or position - it’ll give you results way beyond the tileset’s bounds.

1 Like
5

Got it. I’m not using any framework or engine so I’m just reading the data property from the layers property in the json export so I’m good. Thank you