Extending graphics off screen

[davobutt]

Hi,

Been experimenting with excalibur, and part of my game includes firing solid beams, which I'm doing as a Line. The problem is that when I'm trying to draw my beam from on screen to off screen, once the end is offscreen the line no longer renders.

More specifically. I'm recalculating the beam in onPreUpdate in my class and replacing the graphics with the new Line that I've calculated.

This simplified codepen -> https://codepen.io/davobutt/pen/VwqdBJy
Shows the issue. As soon as longBeam length goes outside the canvas, it no longer renders.

A line drawn on a plain Actor and added to the graphics draws perfectly fine, even if the end is way outside of the bounds.

Any help would be gratefully received. Also happy to hear I'm doing this in completely the wrong way!

[eonarheim]

@davobutt Great question! I think you found a bug with Lines!

After digging into this, there is a zero dimension bound when creating horizontal lines (if the line is slightly askew the bound is non zero). In the case of longBeam it's bound is 1001x0. That zero height is playing havoc with the offscreen culling routine and causing it to think it's offscreen when it really isn't.

I've created an issue and should be able to work this soon!

To workaround this you can manually set a height on the line longLine.height = 26 or make the line slightly askew:

class Beam extends ex.Actor {
  public length;

  constructor(options, length) {
    super(options);
    this.graphics.anchor = ex.Vector.Zero;
    this.length = length;
    const longLine = new ex.Line({
      start: ex.vec(0, 0),
      end: ex.vec(this.length, 0),
      thickness: 26,
      color: ex.Color.White
    });
    longLine.height = 26; // workaround bug
    //console.log(longLine.width, longLine.height);
    //console.log(this.graphics.localBounds);
    
    this.graphics.use(longLine);
  }

• Side note: there is no need to remake the line in preupdate as long as the line doesn't change size, the graphic will be drawn relative to the actor's position. But you might be intending to do that so ignore me if so 👍

Hope this helps!

[eonarheim]

@davobutt Issue to fix #2773

I've got a few bugs I'm shipping in a patch soon, this will be included 👍

[davobutt]

Thanks for this.. I hadn't actually spotted that it worked when the line wasn't horizontal! My game is on a grid and in the pre-update I'm actually extending the beam one grid space at a time, so it is changing length.

[Joshuahelmle]

This seems to be hiding another potential bug or maybe its a feature?
I also dug a bit into the code, trying to learn a bit more about excalibur and its inner workings and was wondering why the behaviour didn't occur when the lines are attached as graphics object to another actor.

The culprit seems to be here:

Excalibur/src/engine/Graphics/GraphicsSystem.ts

Line 83 in 021c099

if (entity.hasTag('ex.offscreen')) {

As I said, I'm not really sure if this classifies as a bug or not, but it would theoretically be possible to add graphics to an actor that are completely offscreen (not only partially like the line in this example where the offscreen check failed due to the 0 height) and those would then be proccessed and tried to be drawn (offscreen) by the GraphicsSystem since the Actor itself is on the screen.

Side note: my first instinct to workaround the long Beam not beeing drawn, before diving into the implementation details was to override isOffScreen() in the Beam class, but that method isn't really called anywhere but during testing.
The GraphicsSystem internally checks if the Tag exists on the entity, could that be an indication to Lift the method from actor into Entity and start using it internally, if for some reason somebody wanted to override the check if something is offscreen?