Understanding the coordinate space for Lines vs Polygons

[davobutt]

Just beginning using excalibur and I have a question about drawing..
In my actor I'm using polygon to draw a hexagon:

this.graphics.use(
      new Polygon({
        points: [vec(0, 50), vec(-43, 25), vec(-43, -25), vec(0, -50), vec(43, -25), vec(43, 25), vec(0, 50)],
        color: Color.Green,
      })
    );

Say I want to outline the polygon using the Line graphic.. it doesn't seem to obey the same coordinate space...

const line = new Line({ start: vec(0, 50), end: vec(-43, 25), color: Color.Blue });

When rendered it looks like this

It seems to centre the line on the end coordinate?
Obviously I'm missing something, can someone point me in the right direction?

[eonarheim]

Hi @davobutt this is a great question!

Graphics do indeed live in their own local space and are completely separate from each other.

The actor graphics component centers by default around around the actor's position. The property that controls this is the ex.Actor.graphics.anchor which is set to (0.5, 0.5) by default. The tricky thing about layering graphics like ex.Line and ex.Polygon is it is currently done using their bounds.

If you align the graphics to the top left corner you can layer them (but requires some tweaks to the original math)

hexagon.graphics.anchor = ex.vec(0, 0);
hexagon.graphics.use(
  new ex.Polygon({
    points: [
      ex.vec(0, 50),
      ex.vec(-43, 25),
      ex.vec(-43, -25),
      ex.vec(0, -50),
      ex.vec(43, -25),
      ex.vec(43, 25),
      ex.vec(0, 50)],
    color: ex.Color.Green,
  })
);
var line = new ex.Line({
  start: ex.vec(43, 100),
  end: ex.vec(0, 75),
  color: ex.Color.Blue,
  thickness: 2 });
hexagon.graphics.show(line);

If your goal is to get and outline on the hexagon you can also do this with the ex.Polygon:

hexagon.graphics.use(
  new ex.Polygon({
    strokeColor: ex.Color.Blue,
    lineWidth: 2,
    padding: 2,
    points: [
      ex.vec(0, 50),
      ex.vec(-43, 25),
      ex.vec(-43, -25),
      ex.vec(0, -50),
      ex.vec(43, -25),
      ex.vec(43, 25),
      ex.vec(0, 50)],
    color: ex.Color.Green,
  })
);

You can also use the ex.Canvas graphic to do more complicated drawing on a Canvas2d context if need be

const canvas = new ex.Canvas({
    width: 200,
    height: 200,
    cache: true,  // If true draw once until flagged dirty again, otherwise draw to Canvas every frame
    draw: (ctx) => {
        console.log('With cache=true I draw once');
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 200, 200);
    }
})

actor.graphics.use(canvas);

[davobutt]

Thanks for taking the time to reply! Great answer