Line of sight

[ivasilov]

Hey, does anyone knows if there's a simple way to implement line of sight (https://www.redblobgames.com/articles/visibility/)?

Any ideas on how I would implement this?

[eonarheim]

Hi @ivasilov

One way of implementing line of sight is to use ex.Ray and test for intersection with a collider geometry, but unfortunately nothing as automatic as the redblob article.

If you make something following that article please do share! It would be pretty awesome to have an example in excalibur!

Here is a very rough example of how to use the built in raycasting in excalibur:

const box = new ex.Actor({x: 100, y: 100, width: 100, height: 100});

const ray = new ex.Ray(ex.vec(0, 0), ex.Vector.fromAngle(Math.PI / 4))

const maxLength = 100; // pixels

// Returns vector (50, 50) that is the top left corner of the box actor
const maybeCollisionPoint1 = box.collider.get().rayCast(ray, maxLength);

// Returns null when no collision when ray casting only 10 pixels
const  maybeCollisionPoint2 = box.collider.get().rayCast(ray, 10);

I have some really old code we made for ludum 29 that does some simpler line of sight that probably would need some updating to work with latest excalibur. The gist of this code is it ray casts looking for the kraken box geometry every update().

The game link, you can drop game.isDebug = true in that old version to see the debug lines in that game (caveat this debug drawing is very different in latest excalibur).

[divinitas-art]

I used https://github.com/Petah/2d-visibility i rewrote it a little to use excaliburs Vector instead of their Point.

I take my tilemap and I extract only those tiles that are solid and only around the player, I extract colliders from those, that way I get polygons that I use for the algorithm. Output is used to build the shadows

the output looks like this

my game has all around the player sight, but you can easily change the line of sight by "building" fake walls before giving it to the algorhitm

and ofc you can use output of the algo to check collisions with other objects to see if they are in your sight or not

[eonarheim]

@divinitas-art WOW! This is so cool!

How did you achieve the soft blur on the shadows, and the decreasing brightness with distance?

[divinitas-art]

drawSightShadows(ctx: CanvasRenderingContext2D) {
    if (!this.hasValidSight()) {
        return;
    }
        
    //shadow blur
    ctx.filter = 'blur(5px)';
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, 1024, 1024);
         
    const SIGHT_RANGE = 400;
    const CENTERING_COMPENSATION = 112;

    // subtract the sight polygon from the canvas
    ctx.globalCompositeOperation = 'destination-out';       
    ctx.beginPath();        
    ctx.moveTo(this.sightPolygon[0][0].x + CENTERING_COMPENSATION, this.sightPolygon[0][0].y + CENTERING_COMPENSATION);
    for (let i = 1; i < this.sightPolygon.length; i++) {
        ctx.lineTo(this.sightPolygon[i][0].x + CENTERING_COMPENSATION, this.sightPolygon[i][0].y + CENTERING_COMPENSATION);
        ctx.lineTo(this.sightPolygon[i][1].x + CENTERING_COMPENSATION, this.sightPolygon[i][1].y + CENTERING_COMPENSATION);
    }
    ctx.lineTo(this.sightPolygon[0][0].x + CENTERING_COMPENSATION, this.sightPolygon[0][0].y + CENTERING_COMPENSATION);
    ctx.closePath();        
    ctx.fill();

    //descreasing brightness
    ctx.globalCompositeOperation = 'source-over';
    const gradient = ctx.createRadialGradient(
        CENTERING_COMPENSATION + SIGHT_RANGE,
        CENTERING_COMPENSATION + SIGHT_RANGE,
        10,
        CENTERING_COMPENSATION + SIGHT_RANGE,
        CENTERING_COMPENSATION + SIGHT_RANGE,
        SIGHT_RANGE,
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(0.25, 'rgba(0,0,0,0)');
    gradient.addColorStop(0.45, 'rgba(0,0,0,0.3)');
    gradient.addColorStop(0.65, 'rgba(0,0,0,0.6)');
    gradient.addColorStop(0.9, 'rgba(0,0,0,0.95)');
    gradient.addColorStop(1, 'rgba(0,0,0,1)');

    ctx.fillStyle = gradient;
    ctx.fillRect(
        CENTERING_COMPENSATION - 50,
        CENTERING_COMPENSATION - 50,
        SIGHT_RANGE * 2 + CENTERING_COMPENSATION,
        SIGHT_RANGE * 2 + CENTERING_COMPENSATION);
}