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

60 lines
1.6 KiB
Markdown
Raw Normal View History

2019-06-07 18:17:04 +00:00
---
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)