60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
|
---
|
||
|
|
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);
|
||
|
|
```
|
||
|
|
|
||
|
|
|