encompass-cs-docs/content/pong/scoring/center_line.md

title	date	weight
Center Line	2019-06-07T10:43:23-07:00	50

Now we need to draw the center line.

This will be a fairly basic GeneralRenderer - it doesn't need to react to anything.

import { GeneralRenderer } from "encompass-ecs";

export class CenterLineRenderer extends GeneralRenderer {
    public layer = 0;

    private middle: number;
    private height: number;

    public initialize(middle: number, height: number) {
        this.middle = middle;
        this.height = height;
    }

    public render() {
        love.graphics.setLineWidth(2);
        this.dotted_line(this.middle, 0, this.middle, this.height, 10, 10);
    }

    private dotted_line(x1: number, y1: number, x2: number, y2: number, dash: number, gap: number) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = math.atan2(dy, dx);
        const st = dash + gap;
        const len = math.sqrt(dx * dx + dy * dy);
        const nm = (len - dash) / st;

        love.graphics.push();

        love.graphics.translate(x1, y1);
        love.graphics.rotate(angle);
        for (let i = 0; i < nm; i++) {
            love.graphics.line(i * st + gap * 0.5, 0, i * st + dash + gap * 0.5, 0);
        }

        love.graphics.pop();
    }
}

I took the dotted line draw procedure from this helpful forum post and modified it slightly. Thanks Ref!

Add it to the WorldBuilder...

world_builder.add_renderer(CenterLineRenderer).initialize(play_area_width * 0.5, play_area_height);