diff --git a/content/pong/scoring/center_line.md b/content/pong/scoring/center_line.md new file mode 100644 index 0000000..1a10fc0 --- /dev/null +++ b/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) diff --git a/static/images/center_line.png b/static/images/center_line.png new file mode 100644 index 0000000..4ea361d Binary files /dev/null and b/static/images/center_line.png differ