center line

content/pong/scoring/center_line.md

@@ -0,0 +1,59 @@
+---
+title: "Center Line"
+date: 2019-06-07T10:43:23-07:00
+weight: 50
+---
+
+Now we need to draw the center line.
+
+This will be a fairly basic GeneralRenderer - it doesn't need to react to anything.
+
+```ts
+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](https://love2d.org/forums/viewtopic.php?t=83295) and modified it slightly. Thanks Ref!
+
+Add it to the WorldBuilder...
+
+```ts
+world_builder.add_renderer(CenterLineRenderer).initialize(play_area_width * 0.5, play_area_height);
+```
+
+![center line](/images/center_line.png)