Objects imported from Tiled are displayed wrong

[SSJ]

Hello, I am trying to import a Tiled map, together with objects. They are wireframed correctly in Tiled, but when imported to my Phaser game they look off. Maybe someone here can help me.

I have attached an image with how it looks in Tiled, and then another image with how it looks in my game. My code is the following (the 'createObstacles' function is the one that I call to start creating the objects). I've added a random color to the graphics that represent those objects so that I can notice the discrepancy easier.

createObstacles: function () {
    // Initializing the obstacle group
    this.obstaclesGroup = game.add.group();
    this.obstaclesGroup.enableBody = true;
    var item;
    result = this.findObjectsByType('obstacle', this.map, 'objectsLayer');
    result.forEach(function (element) {
        this.createFromTiledObject(element, this.obstaclesGroup);
    }, this);
},

//find objects in a Tiled layer that containt a property called "type" equal to a certain value
findObjectsByType: function (type, map, layer) {
    var result = new Array();
    map.objects[layer].forEach(function (element) {
        if (element.type === type) {
            //Phaser uses top left, Tiled bottom left so we have to adjust the y position
            //also keep in mind that the cup images are a bit smaller than the tile which is 16x16
            //so they might not be placed in the exact pixel position as in Tiled
            element.y -= map.tileHeight;
            result.push(element);
        }
    });
    return result;
},

// create a DisplayElement from an object and returns it
createFromTiledObject: function (element, group) {
    var pointsArray = element.polyline.map(function (item) { return { x: item[0], y: item[1] }; });
    var polygon = new Phaser.Polygon(pointsArray);

    var graphics = new Phaser.Graphics();
    graphics.beginFill(0xFF33ff);
    graphics.drawPolygon(polygon);
    graphics.endFill();
    var texture = graphics.generateTexture();
    var sprite = group.create(element.x, element.y, texture);
    sprite.body.immovable = true;

    //var sprite = group.create(element.x, element.y, element.name);
    //sprite.body.immovable = true;

    ////copy all properties to the sprite
    //Object.keys(element).forEach(function (key) {
    //    sprite[key] = element[key];
    //});
},

 

[gnl]

Just a suggestion, could it be that it has to do with scaling?