Jump to content

Objects imported from Tiled are displayed wrong


SSJ
 Share

Recommended Posts

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];
    //});
},

 

2016-11-17_2314.png

2016-11-17_2316.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...