Collision shapes into Phaser 3 from Tiled

[Scrooler]

Hello!
I'm found 'collision shapes parser from Tiled(full example)' for example, but  there have only drawn shapes, without collision. Help me get collision into example for my Player.

Code from Example: 

function create ()
{
    var map = this.add.tilemap('map');
    var tileset = map.addTilesetImage('kenny_platformer_64x64');
    var layer = map.createStaticLayer('Tile Layer 1', tileset);

    var graphics = this.add.graphics();

    // Loop over each tile and visualize its collision shape (if it has one)
    layer.forEachTile(function (tile)
    {
        var tileWorldPos = layer.tileToWorldXY(tile.x, tile.y);
        var collisionGroup = tileset.getTileCollisionGroup(tile.index);

        if (!collisionGroup || collisionGroup.objects.length === 0) { return; }

        // You can assign custom properties to the whole collision object layer (or even to
        // individual objects within the layer). Here, use a custom property to change the color of
        // the stroke.
        if (collisionGroup.properties && collisionGroup.properties.isInteractive)
        {
            graphics.lineStyle(5, 0x00ff00, 1);
        }
        else
        {
            graphics.lineStyle(5, 0x00ffff, 1);
        }

        // The group will have an array of objects - these are the individual collision shapes
        var objects = collisionGroup.objects;

        for (var i = 0; i < objects.length; i++)
        {
            var object = objects[i];
            var objectX = tileWorldPos.x + object.x;
            var objectY = tileWorldPos.y + object.y;

            // When objects are parsed by Phaser, they will be guaranteed to have one of the
            // following properties if they are a rectangle/ellipse/polygon/polyline.
            if (object.rectangle)
            {
                graphics.strokeRect(objectX, objectY, object.width, object.height);
            }
            else if (object.ellipse)
            {
                // Ellipses in Tiled have a top-left origin, while ellipses in Phaser have a center
                // origin
                graphics.strokeEllipse(
                    objectX + object.width / 2, objectY + object.height / 2,
                    object.width, object.height
                );
            }
            else if (object.polygon || object.polyline)
            {
                var originalPoints = object.polygon ? object.polygon : object.polyline;
                var points = [];
                for (var j = 0; j < originalPoints.length; j++)
                {
                    var point = originalPoints[j];
                    points.push({
                        x: objectX + point.x,
                        y: objectY + point.y
                    });
                }
                graphics.strokePoints(points);
            }
        }
    });

Properties Player: 

player = this.physics.add.sprite(400, 300, 'Player', 14);
player.setCollideWorldBounds(true);

this.physics.add.collider(player, Layer);

 

[16patsle]

I haven't looked too much into your code, what physics system are you using? If it's Arcade Physics, you can't really use custom shapes for collisions, as it only supports rectangles and circles. You'll have to use Matter.js I think. There might be an example on how to do this at labs.phaser.io, haven't used Matter.js much myself.

[jdotr]

As far as I know Patrick has it right.  If you look at the example which actually uses the collisions shapes to perform collisions it uses the matter physics system: Tiled collision shape example (with Matter). Your usage of this.physics suggests you are intending to use the Arcade system which supports a much less complex simulation and as was called out doesn't support the arbitrary shapes that are pulled from the map.

The reason that you're seeing outlines of what you want to collide is because you explicitly call graphics functions which draw them -- this was used in the example to highlight the shapes that were detected and are unrelated to using them in your physics simulation.