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

92 lines
2.8 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.
2020-07-18 04:19:06 +00:00
In **PongFE/Renderers/CenterLineRenderer.cs**:
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
```cs
using System;
using Encompass;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using PongFE.Components;
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
namespace PongFE.Renderers
{
public class CenterLineRenderer : GeneralRenderer
{
public SpriteBatch SpriteBatch { get; }
public Texture2D WhitePixel { get; }
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
public CenterLineRenderer(SpriteBatch spriteBatch, Texture2D whitePixel)
{
SpriteBatch = spriteBatch;
WhitePixel = whitePixel;
}
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
public override void Render()
{
ref readonly var playAreaComponent = ref ReadComponent<PlayAreaComponent>();
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
DrawDottedLine(playAreaComponent.Width / 2, 0, playAreaComponent.Width / 2, playAreaComponent.Height, 20, 20);
}
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
private void DrawDottedLine(float x1, float y1, float x2, float y2, int dash, int gap)
{
var dx = x2 - x1;
var dy = y2 - y1;
var angle = Math.Atan2(dy, dx);
var st = dash + gap;
var len = Math.Sqrt(dx * dx + dy * dy);
var nm = (len - dash) / st;
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
SpriteBatch.End();
SpriteBatch.Begin(
SpriteSortMode.Deferred,
null,
null,
null,
null,
null,
Matrix.CreateRotationZ((float)angle) * Matrix.CreateTranslation(x1, y1, 0)
);
for (var i = 0; i < nm; i++)
{
SpriteBatch.Draw(
WhitePixel,
new Rectangle(
(int)(i * st + gap * 0.5),
0,
dash,
1
),
Color.White
);
}
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
SpriteBatch.End();
SpriteBatch.Begin(SpriteSortMode.Deferred, BlendState.NonPremultiplied);
}
2019-06-07 18:17:04 +00:00
}
}
```
2020-07-18 04:19:06 +00:00
I figured out the math for the dotted line procedure so you don't have to. You're welcome.
The main magic to understand here is the matrix transformation - the gist of it is that a matrix transformation lets us apply a translation, rotation, and scaling operation all at once and very efficiently. Here we compose a rotation and a translation matrix together so that we can just draw simple rectangles to create the dashed line. Then every SpriteBatch draw rectangle has this transformation applied to it.
2019-06-07 18:17:04 +00:00
2020-07-18 04:19:06 +00:00
Add our CenterLineRenderer to the WorldBuilder...
2019-06-07 18:17:04 +00:00
```ts
2020-07-18 04:19:06 +00:00
WorldBuilder.AddRenderer(new CenterLineRendereR());
2019-06-07 18:17:04 +00:00
```
2020-07-18 04:19:06 +00:00
![center dashed line](/images/center_line.png)