Tilemap not applying offset between layers?

[DanielP565]

Hey,

I'm trying to create a tilemap and it doesn't seem to put them in the right places. This is my first time using Tiled and I'm only guessing that you use the offset tool to move them to your liking. I have also tried setting the offset manually but it didn't seem to work.

		map = this.game.add.tilemap('map');
		map.addTilesetImage('dungeon_tiles_compact_and_varied', 'tiles');
		collision = map.createLayer('Collision');
		map.createLayer('Floor');
		map.createLayer('Border');
		map.createLayer('Stones');
		map.createLayer('Shade');
		map.createLayer('Water');
		map.createLayer('Leftside');
		map.createLayer('Objects');
		map.createLayer('Objects2');
		map.createLayer('Objects3');
		map.createLayer('Objects4');

 

[drhayes]

I've never used the offset tool. What's that?

[WombatTurkey]

Yeah, what do you mean offset tool? Your map looks fine? Those are some tiny tiles, holy crap!

[drhayes]

Check out the barrels in the lower right or the boxes stacked in the upper left. Tiny elements are getting moved around, it looks like.

[WombatTurkey]

25 minutes ago, drhayes said:

Check out the barrels in the lower right or the boxes stacked in the upper left. Tiny elements are getting moved around, it looks like.

Oh wow. Didn't even notice.

It looks like an issue of not reloading your browser cache to be honest. Those boxes look like a totally different map was generated, not changed just by offsets.

[DanielP565]

I don't think its an issue with my browser cache, the offset tool is the one at the end, is there another way to move the layers?

[DanielP565]

Any ideas?

[drhayes]

I have no idea what that tool does. Until I updated Tiled from 0.13 to 0.16 it never even became enabled.

Using it on one of my maps I'm still not clear what it's doing for me. From its name I'd guess that it's moving a layer around, but it looks like it's moving the whole map around. It generated some new properties in the JSON: offsetx and offsety, but only for one layer.

Searching the Phaser source I'm not finding any reference to "offsetx" or "offsety". I'm guessing these params aren't using Phaser's Tilemap implementation. You should probably not use that tool, I'm guessing.

[DanielP565]

6 minutes ago, drhayes said:

I have no idea what that tool does. Until I updated Tiled from 0.13 to 0.16 it never even became enabled.

Using it on one of my maps I'm still not clear what it's doing for me. From its name I'd guess that it's moving a layer around, but it looks like it's moving the whole map around. It generated some new properties in the JSON: offsetx and offsety, but only for one layer.

Searching the Phaser source I'm not finding any reference to "offsetx" or "offsety". I'm guessing these params aren't using Phaser's Tilemap implementation. You should probably not use that tool, I'm guessing.

Oh right!, do you know any other ways to recreate the effects this guy did with the barrels and boxes stacking?

 

[drhayes]

BTW: these are cool graphics. Where did they come from? And can I get them for that roguelike I'm probably never gonna make?

My solution for this is two-fold: I have a bunch of Phaser.Groups that are created in a specific order with specific names: background, player, enemies, projectiles, foreground, lighting, etc. The code that loads my maps puts tilemap layers into those groups depending on properties in the layers.

When I need things to stack in Tiled I make multiple layers. I end up having layers with names like "far_background", "background", "foreground", "far_foreground"... If I need a layer to be in front of the player I put a map property on it called "foreground". If that property is present on the Tiled map layer then my map code puts the Phaser tilemap layer created from it in the foreground group. Whew! Words words words. Does that make sense?

Additionally, if the Tiled layer has a property called "distance" I use that to change the scroll factor properties of the Phaser tilemap layers for a neato parallax effect.

[DanielP565]

You can get the tileset from opengameart.org/content/dungeon-tileset, its a really nice tileset.

I will go back and remove the offset from them, thanks for all the help!

[harmal]

I also tried to make an offset layer in tiled, and noticed the offset didnt show up when I loaded the game. I was able to get the layer offset with "layer2.cameraOffset.x=numberOffset". But I had to put that offset number in manually. Logging the layer, it did not contain the "offsetx" property that was set in the JSON file. Later I was able to find it, but not in a very clean way with "game.cache._cache.tilemap.YourTileMapNameHere.data.layers[1].offsetx". So my question is...

Is there a built way built into phaser to access properties, such as 'offsetx' for a layer, without going into the cache?

[DanielP565]

17 hours ago, harmal said:

I also tried to make an offset layer in tiled, and noticed the offset didnt show up when I loaded the game. I was able to get the layer offset with "layer2.cameraOffset.x=numberOffset". But I had to put that offset number in manually. Logging the layer, it did not contain the "offsetx" property that was set in the JSON file. Later I was able to find it, but not in a very clean way with "game.cache._cache.tilemap.YourTileMapNameHere.data.layers[1].offsetx". So my question is...

Is there a built way built into phaser to access properties, such as 'offsetx' for a layer, without going into the cache?

You could set a custom preference and then just do layer.properties.offsetX

[WombatTurkey]

Oh... So the offset tool let's you position things pixel perfectly without items being constraint to a grid?

[harmal]

my custom properties still seem to be ignored. i added two custom properties to my JSON. thes first being "offsetX":32, and the second being "test":"justTesting". neither of these make it into the layer object when i log it. for instance console.log(layer2.offsetX) just shows 0, console.log(layer2.test) is undefined, and console.log(layer2.properties) is also undefined. ill put my JSON below if that helps.

 

{ "height":32,
	 "layers":[
	        {
	         "data":[187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 187, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 187, 187, 187, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 187, 187, 187, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 187, 187, 187, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 186, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 186, 183, 186, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 186, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 189, 188, 189, 188, 189, 188, 189, 188, 189, 183, 183, 183, 1965, 1965, 183, 183, 183, 183, 183, 183, 183, 1965, 1965, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183],
	         "height":32,
	         "name":"layer1",
	         "opacity":1,
	         "type":"tilelayer",
	         "visible":true,
	         "width":32,
	         "x":0,
	         "y":0
	        }, 
	        {
	         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 0, 0, 0, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 0, 0, 0, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 459, 459, 1964, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 2148, 0, 0, 0, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 2057, 459, 459, 550, 550, 1873, 3509, 3510, 3511, 3512, 3513, 3514, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1875, 550, 550, 459, 459, 1873, 3600, 3601, 3602, 3603, 3604, 3605, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1875, 459, 459, 550, 550, 1873, 3691, 3692, 3693, 3694, 3695, 3696, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1875, 550, 550, 459, 459, 1873, 3782, 3783, 3784, 3785, 3786, 3787, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1875, 459, 459, 550, 550, 1873, 3873, 3874, 3875, 3876, 3877, 3878, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2930, 2931, 2932, 2933, 2934, 2935, 2936, 2937, 0, 1875, 550, 550, 459, 459, 1873, 3964, 3965, 3966, 3967, 3968, 3969, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3021, 3022, 3023, 3024, 3025, 3026, 3027, 3028, 0, 1875, 459, 459, 550, 550, 1873, 4055, 4056, 4057, 4058, 4059, 4060, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3112, 3113, 3114, 3115, 3116, 3117, 3118, 3119, 0, 1875, 550, 550, 459, 459, 1873, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3203, 3204, 3205, 3206, 3207, 3208, 3209, 3210, 0, 1875, 459, 459, 550, 550, 1873, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3294, 3295, 3296, 3297, 3298, 3299, 3300, 3301, 0, 1875, 550, 550, 459, 459, 1873, 0, 0, 0, 4212, 4213, 4213, 4213, 4213, 4213, 4213, 4213, 4214, 0, 0, 0, 0, 0, 3385, 3386, 3387, 3388, 3389, 3390, 3391, 3392, 0, 1875, 459, 459, 550, 550, 1873, 0, 0, 0, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 0, 0, 0, 0, 0, 3476, 3477, 3478, 3479, 3480, 3481, 3482, 3483, 0, 1875, 550, 550, 459, 459, 1873, 0, 0, 0, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1875, 459, 459, 550, 550, 2146, 1965, 1965, 1965, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 2149, 550, 550, 459, 459, 459, 459, 459, 459, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 550, 550, 550, 550, 550, 550, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 459, 459, 459, 459, 459, 459, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 459, 550, 550, 550, 550, 550, 550, 4303, 4304, 4304, 4304, 4304, 4304, 4304, 4304, 4305, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550, 550],
	         "height":32,
	         "name":"layer2",
	         "opacity":1,
	         "type":"tilelayer",
	         "visible":true,
	         "test":"justTesting",
	         "offsetX":32,
	         "width":32,
	         "x":0,
	         "y":0
	        }],
	 "nextobjectid":1,
	 "orientation":"orthogonal",
	 "renderorder":"right-down",
	 "tileheight":16,
	 "tilesets":[
	        {
	         "columns":91,
	         "firstgid":1,
	         "image":"..\/Downloads\/tileset-alistair.png",
	         "imageheight":1056,
	         "imagewidth":1456,
	         "margin":0,
	         "name":"tileset-alistair",
	         "spacing":0,
	         "tilecount":6006,
	         "tileheight":16,
	         "tilewidth":16
	        }],
	 "tilewidth":16,
	 "version":1,
	 "width":32
	}

[DanielP565]

You need to do layer.properties then the property so in your case layer.properties.offsetX & layer.properties.test

[harmal]

does that work for you? layer.properties is undefined for me, so layer.properties.anything just gives me an error.

[DanielP565]

How are you referencing your layer? Example:

this.layer = this.map2.createLayer("mylayer");

this.layer.properties.offsetX

[harmal]

heres an abridged version of my create function...

	function create() {
	    game.physics.startSystem(Phaser.Physics.ARCADE);
	    game.stage.backgroundColor = '#787878';
	    map = game.add.tilemap('alistair');
	    map.addTilesetImage('tileset-alistair', 'tiles');
	    
	    layer1 = map.createLayer('layer1');
	    layer2 = map.createLayer('layer2');
	    layer1.resizeWorld();
	    layer2.resizeWorld();
	    
	    console.log(layer2);
	    console.log(layer2.properties);  // returns undefined 
	}
	

[SSJ]

You can import the layers like this - check out the attached image.

The Phaser Tilemap does not include the "offsetx" and "offsety" fields for layers, which is why I loaded my map JSON file separately and then I iterate through that and apply the offsets to the "cameraOffset" property of each corresponding Phaser map layer.

I hope this helps!