Best way to use Tiled's collision editor?

Phaser 3
1

Hi all,

I am new to this and trying to find the best way to use the collision editor provided in tiled along with Phaser 3. Is it possible to create collisions that are elipses or other arbitrary (non-tile) shapes using arcade physics, or do you need matter? I’m looking to create a collision such as:

43%20PM

The reason I ask is because I found the method setCollisionFromCollisionGroup(). However, I haven’t seen any good phaser 3 examples with it really, and maybe if you use arcade physics it just ends up creating collisions with the whole tile if there is any overlap from the collision editor dimensions.

tldr: Do I need to use matter? If not, can someone provide a simple example on how to use setCollisionFromCollisionGroup?

Thanks!

2

Hi there, I found this example if it helps you at all;

https://labs.phaser.io/view.html?src=src\game%20objects\tilemap\collision\matter.js
https://labs.phaser.io/view.html?src=src\game%20objects\tilemap\static\tileset%20collision%20shapes.js

3

Hi, I ended up getting the effect I wanted using arcade physics and making physics sprites of arbitrary shapes, using the coordinates of the sprite of map.createFromObjects() from the Tiled object layer.

Thanks for the link though, if I end up needing matter will definitely be useful.

4

Ahhh, I’m having this problem at the moment with map.createFromObjects()
How did you do it? Could you please post some of your code?

5

I ended up making unique objects in tiled, each one also having a Tiled “point”, all with a custom property “objid” set to the same value. This way I could create iterate through the objects, create a physics rectangle around the Tiled “point” as a collision, and set the depth of the rest of the objects for that objid according to where the point is located. Therefore I get the correct depth behavior when going in front of/behind trees and whatnot.

Here is basically the code, hopefully it makes sense out of context:

createStaticObjects() {
        /**
         * Loop through json objects to create static objects.
         * This method loops through objects once to find collision 
         * objects, and create a map of all gid's to make. Then it 
         * loops through the gid map to create the objects and set 
         * the depth according to their collision object.
         * 
         * TODO: 
         * Create array of collideable objects, and add a single collider to the array
         */
        let depthArr = []; //Map collision object id's to their y value
        let gidMap = new Map(); //Map gid's to object id arrays
        let firstGid = this.map.tilesets[1].firstgid;

        // Loop through all objects, create collsion objects and save gid map
        this.map.objects[0].objects.forEach(item=>{
            if (item.properties && item.rectangle) { // Collision object
                let tmpSprite = this.physics.add.sprite(item.x, item.y, "__DEFAULT");
                tmpSprite.setImmovable(true)
                tmpSprite.setSize(13, 7).setOffset(10, 14); //Size/Offset for tree collider
                this.physics.add.collider(this.player, tmpSprite);
                depthArr[item.properties[0].value] = item.y;
            } else if (item.properties && item.gid) { // Static object for gid map
                if (gidMap.get(item.gid)) gidMap.get(item.gid).push(item.properties[0].value);
                else gidMap.set(item.gid, [item.properties[0].value]);
            }
        });
       // Loop through gid map, create the static objects, then set the depth for each one in the object array
        gidMap.forEach((value, key)=>{
            let spriteArr = this.map.createFromObjects("obj_layer", key, {key: "plants", frame: key - firstGid});
            spriteArr.forEach((item, index)=>{
                item.setDepth(depthArr[value[index]]);
            });
        });
}