equivilant of Phaser 3 Graphics.lineBetween ?

[airtonix]

https://phaser.io/examples/v3/view/game-objects/graphics/primitives/line-between

var config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create ()
{
    var graphics = this.add.graphics();

    graphics.lineStyle(128, 0x00ff00, 1);

    graphics.lineBetween(100, 100, 600, 500);
}

What's the equivilant? drawing a polygon with only one face?

        new Polygon({
          strokeColor: Color.Green,
          lineWidth: 10,
          points: [vec(path[0].x, path[0].y), vec(path[1].x, path[1].y)],
        })

[eonarheim]

Hi @airtonix

Great question! A 1-face'd polygon does work. There isn't a dedicated line graphics primitive object similar to the Polygon (yet).

There are a couple options open to you to draw a line:

1. Quickest & highest quality line: It is possible to drop to the excalibur graphics context and perform drawing

   const game = new ex.Engine({...})
   
   // draw using an actor
   const lineActor = new ex.Actor({
     pos: ex.vec(0, 0),
   });
   lineActor.graphics.localBounds = ex.BoundingBox.fromDimension(200, 200, ex.Vector.Zero);
   lineActor.graphics.onPostDraw = (ctx: ex.ExcaliburGraphicsContext) => {
     ctx.drawLine(ex.vec(0, 0), ex.vec(200, 200), ex.Color.Green, 10);
   }
   game.add(lineActor);
   
   game.start();

2. Build an LineFragment primitive. A possible excalibur graphics pimitive using that might look like this (I might add this into Excalibur so let me know what you think)

   interface LineFragmentOptions {
     start: ex.Vector;
     end: ex.Vector;
     color?: ex.Color;
     thickness?: number;
   }
   class LineFragment extends ex.Graphic {
     readonly start: ex.Vector;
     readonly end: ex.Vector;
     color: ex.Color = ex.Color.Black;
     thickness: number = 1;
     constructor(options: LineFragmentOptions) {
       super();
       const { start, end, color, thickness } = options;
       this.start = start;
       this.end = end;
       this.color = color ?? this.color;
       this.thickness = thickness ?? this.thickness
       const { width, height } = ex.BoundingBox.fromPoints([start, end]);
       this.width = width;
       this.height = height;
     }
    
     protected _drawImage(ctx: ex.ExcaliburGraphicsContext, x: number, y: number): void {
       ctx.drawLine(this.start, this.end, this.color, this.thickness);
     }
   
     clone(): ex.Graphic {
       return new LineFragment({
         start: this.start,
         end: this.end,
         color: this.color,
         thickness: this.thickness
       });
     }
   }
   
   const lineActor2 = new ex.Actor({
     pos: ex.vec(100, 0),
   });
   // Graphics center by default (.5, .5), set to (0, 0) to draw from top left
   lineActor2.graphics.anchor = ex.Vector.Zero;
   lineActor2.graphics.add(new LineFragment({
     start: ex.vec(0, 0),
     end: ex.vec(200, 200),
     color: ex.Color.Green,
     thickness: 10
   }));
   game.add(lineActor2);

3. Totally use a 1-face'd polygon! Currently Polygon's are a Raster type in Excalibur, which means they are drawn to an 2D canvas and "raster" before being drawing to the screen using webgl. One caveat, line's drawn this way might not be the highest quality depending on the size (smaller is worse) and antialiasing when the raster is sampled for webgl.

   const lineActor3 = new ex.Actor({
     pos: ex.vec(200, 0)
   });
   lineActor3.graphics.anchor = ex.Vector.Zero;
   lineActor3.graphics.add(new ex.Polygon({
     lineWidth: 10,
     // padding: 5, Polygon is currently a Raster and clips corners padding can help
     strokeColor: ex.Color.Green,
     points: [ex.vec(0, 0), ex.vec(200, 200)]
   }));
   game.add(lineActor3);

[eonarheim]

I've added a new ex.Line type that will be released as part of v0.26.0 very soon!

#2314

[airtonix]

🙌👍🎉