Overlapping on a Tilemap Object Layer

[sharks]

Hi guys,

I have several layers on my map and I have an "Overlap" object layer which has a rectangle created around tiles. Now when the player (physics sprite) walks on it, I would like to trigger events. I'm unable to detect if the user is walking on it or not and would like some help.

Thanks.

[B3L7]

Did you convert the tiled object into an object in phaser?

If not you will need to as phaser does not automatically do anything with tiled objects.

See:

https://labs.phaser.io/edit.html?src=src\game objects\tilemap\static\create from objects.js

 

Or check out my template where I created my own object conversion method in the level scene:

 

Phaser 3 Tilemap & File Pack Project Template

 

I'm assuming you are using arcade physics. Once you have made the tiled objects into objects in phaser(I think for your case perhaps an image with alpha set to 0 and an arcade body attached) you can set up an arcade overlap check with a callback to your overlap function:

https://phaser.io/tutorials/making-your-first-phaser-3-game/part8

 

I do the same thing in the player class of my template. If the player walks over one of my custom pickup objects I created from tiled objects it calls a pickup method in the player class.

 

Hope that makes sense.

 

 

[sharks]

Thanks, that makes sense. When it says object ID 26, what does it mean? Could you please share a screenshot of it from tiled? 

 

And your object conversion method looks nice. I'll give it a try shortly.

[B3L7]

Based on my experience working with Phaser 2, the object ID is a number assigned to the object when exported to json by Tiled.

I believe it's this property:

Screenshot

When working with phaser 2 with tiled IDs I found them difficult to predict and inconsistent between maps which is why I began writing my own methods to access the properties of the objects directly and use them to create my phaser objects. The only problem I have run into is that Tiled does not automatically export default property values so you have to go in and manually override the property you want to export on each object (such as type or name) so that Tiled exports those properties. In the end it's a slight inconvenience.

I will say that it is entirely possible that working with ID numbers is the easiest way to do it and that I am missing something. I've just found my way to be the easiest once it is set up and gives me the most control. I know you can also register custom game objects with the plugin manager which would allow you to call those object constructors from .createFromObjects() but it seems to me that that would be just creating more code in one place to save a few lines in another. Of course I may just not be seeing the value yet, I'm sure it has many many possible applications.

[sharks]

Alright that was correct indeed regarding Tile ID. It's such a weird solution though, considering we may have any number of objects in a layer and we won't possibly know the IDs assigned to them.

Right now, the overlap works. But the coordinates shown in Tiled for the object and the map are off. It's above where it should be on the map. I tried converting the coordinates using WorldToTileX/Y but didn't work. Any thoughts?

For anyone who has the same question in the future, this is how a single large object in object layer can be scaled (minus the position offset issue)

 

 var overlapObjects = this.map.createFromObjects('Overlap', 2, { key: 'overlap_item' });

        var ladders = this.game.physics.add.group({
            key: 'ladders',
            setXY: { x: overlapObjects[0].x, y: overlapObjects[0].y },
            setScale: { x: overlapObjects[0]._scaleX, y: overlapObjects[0]._scaleY }

        }); //obviously this needs to be looped as there might be multiple objects

 

[B3L7]

Phaser used .5 as an image origin. That basically means objects by default are centred on their point. Tiled assumes everything has an origin of 0, or aligned left. There are two ways to address this.

1. Set the origin of the object to 0...   object.setOrigin(0).

2. Hard code the adjustment to the point to reflect an origin of .5. So if you are creating an object that is 16x16 you would have {x: object.x + 8, y: object.y -8}

 

I prefer the second solution as I like to have .5 be my origin for almost every object.

[sharks]

That makes sense, you're a lifesaver!

I'm unsure how to setOrigin on a layer created using `game.physics.add.group`  as it's body so for now, hardcoding works.

[B3L7]

I wouldn't set origin on the layer. I'd set it on the children.