Collision shapes into Phaser 3 from Tiled

Recommended Posts

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 =;

    // 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 ( &&
            graphics.lineStyle(5, 0x00ff00, 1);
            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
                    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];
                        x: objectX + point.x,
                        y: objectY + point.y

Properties Player: 

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

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


Share this post

Link to post
Share on other sites

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, haven't used Matter.js much myself.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.