How to draw an obstacle/polygon based on tilemap object layer?

[tfkfan]

Hi, didn't find some efficient way to implement this, I have a list of polygons parsed from tilemap and It should be drawn on scene

[eonarheim]

Hi @tfkfan

Sorry for the delay, there isn't a built in way yet in the Tiled plugin to draw the polygons automatically. This does sound like a useful feature to add though!

Currently the polygon objects are accessible in the TiledMap data structure after loading, the core excalibur Polygon graphic can then be used to draw the polygon.

const map = new TiledMapResource(...);
const loader = new ex.Loader([map]);
game.start(loader).then(() => {
  ...

  const objectLayer = map.data.getObjectLayerByName('Objects');
  const polygons = objectLayer.getPolygons();
  for (let tiledPolygon of polygons) {
     const offset = ex.vec(tiledPolygon.x, tiledPolygon.y);
     const points = tiledPolygon.polygon;
     const polyGraphic = new ex.Polygon({
        points: points.map(p => ex.vec(p.x, p.y)),
        color: ex.Color.Yellow,
     });

     const star = new ex.Actor({
        pos: offset
     })
     star.graphics.anchor = ex.vec(0, .5);
     star.graphics.use(polyGraphic);
     game.add(star);
  }

...
});

Result:

[eonarheim]

To increase the quality of the polygon graphic you can also increase it's scale artificially, a good start can be your camera's zoom (the reason is it produces a bitmap under the covers before drawing)

const polyGraphic = new ex.Polygon({
    points: points.map(p => ex.vec(p.x, p.y).scale(ex.vec(4, 4))),
    color: ex.Color.Yellow
 });

 const star = new ex.Actor({
    pos: offset,
    scale: ex.vec(1/4, 1/4)
 })

[eonarheim]

I've added a new feature to do this quality scaling. It will be released in v0.26.0 very soon!

#2315