drawLine uses <RectangleRenderer> instead of <LineRenderer>

[robknopf]

Drawing a line from a starting position other than (0,0) renders an incorrect line. Looks like drawLine is using RectangleRenderer instead of LineRenderer:

Excalibur/src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts

Lines 524 to 526 in 30bd1c5

	public drawLine(start: Vector, end: Vector, color: Color, thickness = 1) {
	this.draw<RectangleRenderer>('ex.rectangle', start, end, color, thickness);
	}

[eonarheim]

Thanks @robknopf this definitely looks wrong...

Can you send me an example screenshot of where it's going wrong for you and what you expected

[robknopf]

I threw together a codepen to demonstrate it here. If this doesn't suffice, let me know!

[eonarheim]

@robknopf Okay I think I know what's up. I'm going to be adding an explainer and some diagrams to the docs to help prevent this issue in the future. I'm labelling this as a docs+bug until I resolve that.

The reason I think this is confusing is actors have a center anchor by default vec(.5, .5) which means they will center their graphics around their pos.

1. The white square has position (0, 0), but the white box graphic is centered by default using the (.5, .5) anchor, so the top left corner is actually (-25, -25)

   

2. The line Actor has is position relative to the parent, with relative offset (0, 0) so effectively on the same spot in red above.

3. The Line graphic is relative to that new child's position, not the top left of the white box. But additionally has an anchor of (.5, .5) by default.

4. Confusingly line graphics are also subject to the anchoring calculation, so ex.Line({start: vec(25, 25), end: vec(50, 50)}) having bounds with width ~= 25.7 and height ~= 25.7 gets shifted to apply anchor by .5 * -width and .5 * -height. Resulting in the current output.

Setting the anchor to vec(0,0) on lines makes them make more sense generally (not sure if automatically doing this would make it better or extra magically unexpected). So doing that zero anchoring the line is relative to the center of the white box producing this, which is what I expect:

Here is the code, I used to tweak it to be what you wanted where the line goes from the center of the box to the edge. Line relative to the center so starting at 0, and out to the edge at 25.

const line = new ex.Actor({
  pos: vec(0, 0)
});
line.graphics.anchor = vec(0, 0);
line.graphics.use(
  new ex.Line({
    start: vec(0, 0),
    end: vec(25, 25),
    color: ex.Color.Red
  })
);

[robknopf]

Wow.. impressively detailed response. The line isn't a child (in this case), so placing that actor it in the same position as the square and not changing the anchor (for either of them) feels like it should behave like I expected: A line from (0,0) to (25, 25) draws from the anchor (center) to the corner. There separate coordinate spaces between the actor and the associated graphic is a little confusing, but perhaps some documentation around the relationship will help.

Regardless, now I know and knowing is half the battle (so I hear). Thank you! I'll leave this open if you want any additional followup discussions, but I consider it closed.

[eonarheim]

Thanks for digging into this with me! It does feel confusing for lines 100% I'll be chewing on this for a while.

Totally missed that line wasn't a child 🤦 but luckily doesn't change the math whew!

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.