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

222 lines
6.5 KiB
Markdown
Raw Normal View History

2019-06-05 00:59:56 +00:00
---
title: "Drawing the Score"
date: 2019-06-04T17:21:52-07:00
weight: 40
---
2020-07-16 22:10:12 +00:00
Remember Renderers? Haven't thought about those in a while!
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
All we need to draw new elements to the screen are Renderers. Since displaying the score is a UI element, I think it would be best to do this with a GeneralRenderer.
2019-06-05 00:59:56 +00:00
But first, we're gonna need a font. I liked [this font](https://www.dafont.com/squared-display.font). But you can pick any font you like. It's your world and you can do whatever you like in it.
2020-07-16 22:10:12 +00:00
Place the font of your heart's desire into the directory **PongFE/Content/Fonts**.
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
Now we need to get our font in the game. There are a few different font rendering tools available. SpriteFontPlus has worked pretty well for me so far.
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
In your terminal, do the following commands:
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
```sh
git submodule add https://github.com/rds1983/SpriteFontPlus.git
git submodule update --init --recursive
```
In **PongFE.Framework.csproj**:
```xml
<ItemGroup>
<ProjectReference Include="..\FNA\FNA.csproj"/>
<ProjectReference Include="..\encompass-cs\encompass-cs\encompass-cs.csproj"/>
<ProjectReference Include="..\SpriteFontPlus\src\SpriteFontPlus.FNA.csproj" />
</ItemGroup>
```
And in **PongFE.Core.csproj**:
```xml
<ItemGroup>
<ProjectReference Include="..\FNA\FNA.Core.csproj"/>
<ProjectReference Include="..\encompass-cs\encompass-cs\encompass-cs.csproj" />
<ProjectReference Include="..\SpriteFontPlus\src\SpriteFontPlus.FNA.Core.csproj" />
</ItemGroup>
```
Now we can use SpriteFontPlus.
First, we need to be able to track which player's score is which. Why don't we add our new PlayerComponent to GoalBoundarySpawner?
In **GoalBoundarySpawnMessage.cs**:
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
```cs
using Encompass;
using MoonTools.Structs;
using PongFE.Enums;
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
namespace PongFE.Messages
{
public struct GoalBoundarySpawnMessage : IMessage
{
public PlayerIndex PlayerIndex { get; }
public Position2D Position { get; }
public int Width { get; }
public int Height { get; }
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
public GoalBoundarySpawnMessage(PlayerIndex playerIndex, Position2D position, int width, int height)
{
PlayerIndex = playerIndex;
Position = position;
Width = width;
Height = height;
}
2019-06-05 00:59:56 +00:00
}
2020-07-16 22:10:12 +00:00
}
```
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
**GoalBoundarySpawner.cs**:
```cs
using Encompass;
using PongFE.Components;
using PongFE.Messages;
namespace PongFE.Spawners
{
public class GoalBoundarySpawner : Spawner<GoalBoundarySpawnMessage>
{
protected override void Spawn(GoalBoundarySpawnMessage message)
{
var entity = CreateEntity();
AddComponent(entity, new PositionComponent(message.Position));
AddComponent(entity, new CollisionComponent(new MoonTools.Bonk.Rectangle(0, 0, message.Width, message.Height)));
AddComponent(entity, new CanDestroyComponent());
AddComponent(entity, new ScoreComponent(0));
AddComponent(entity, new PlayerComponent(message.PlayerIndex));
}
2019-06-05 00:59:56 +00:00
}
2020-07-16 22:10:12 +00:00
}
```
Now we can adjust the spawn messages in **PongFEGame.cs**:
```cs
// right boundary
WorldBuilder.SendMessage(
new GoalBoundarySpawnMessage(
Enums.PlayerIndex.One,
new MoonTools.Structs.Position2D(1280, 0),
6,
720
)
);
// left boundary
WorldBuilder.SendMessage(
new GoalBoundarySpawnMessage(
Enums.PlayerIndex.Two,
new MoonTools.Structs.Position2D(-6, 0),
6,
720
)
);
```
Scoring on the right goal increases the score of player one, and scoring on the left goal increases the score of player two.
Now let's write our ScoreRenderer.
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
In **PongFE/Renderers/ScoreRenderer.cs**:
```cs
using Encompass;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using PongFE.Components;
using PongFE.Enums;
using SpriteFontPlus;
namespace PongFE.Renderers
{
public class ScoreRenderer : GeneralRenderer
{
public SpriteBatch SpriteBatch { get; }
public DynamicSpriteFont Font { get; }
public ScoreRenderer(SpriteBatch spriteBatch, DynamicSpriteFont font)
{
SpriteBatch = spriteBatch;
Font = font;
}
public override void Render()
{
int? playerOneScore = null;
int? playerTwoScore = null;
foreach (ref readonly var entity in ReadEntities<ScoreComponent>())
{
ref readonly var scoreComponent = ref GetComponent<ScoreComponent>(entity);
ref readonly var playerComponent = ref GetComponent<PlayerComponent>(entity);
if (playerComponent.PlayerIndex == Enums.PlayerIndex.One)
{
playerOneScore = scoreComponent.Score;
}
else if (playerComponent.PlayerIndex == Enums.PlayerIndex.Two)
{
playerTwoScore = scoreComponent.Score;
2019-06-05 00:59:56 +00:00
}
}
2020-07-16 22:10:12 +00:00
if (playerOneScore.HasValue)
{
SpriteBatch.DrawString(
Font,
playerOneScore.Value.ToString(),
new Vector2(400, 20),
Color.White
);
}
if (playerTwoScore.HasValue)
{
SpriteBatch.DrawString(
Font,
playerTwoScore.Value.ToString(),
new Vector2(880 - 64, 20),
Color.White
);
}
2019-06-05 00:59:56 +00:00
}
}
}
```
2020-07-16 22:10:12 +00:00
What's the question mark on those variables? This creates a *Nullable* value. That means the variable can either contain an int, or be _null_. We don't necessarily have a guarantee that the score values will exist in the world, so we provide a way for the renderer to fail gracefully if the search for the score value fails.
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
Basically, we find each entity with a score component and figure out which player the score belongs to. Then we draw the score component's value to the screen as a string.
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
Let's add our ScoreRenderer to the WorldBuilder. First we need to set up the font.
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
```cs
...
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
DynamicSpriteFont ScoreFont { get; set; }
...
public override void LoadContent()
{
...
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
ScoreFont = DynamicSpriteFont.FromTtf(File.ReadAllBytes(@"Content/Fonts/SquaredDisplay.ttf"), 128);
...
WorldBuilder.AddGeneralRenderer(new ScoreRenderer(SpriteBatch, ScoreFont), 0);
...
```
2019-06-05 00:59:56 +00:00
2020-07-16 22:10:12 +00:00
Now you should be able to see the game score. This is starting to look and feel like a more complete game now.