SSJ Posted November 17, 2016 Share Posted November 17, 2016 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]; //}); }, Link to comment Share on other sites More sharing options...
gnl Posted November 18, 2016 Share Posted November 18, 2016 Just a suggestion, could it be that it has to do with scaling? Link to comment Share on other sites More sharing options...
Recommended Posts