Tekst

Bijna elke game toont wel ergens tekst op het scherm. Tekst kan je gebruiken om bijvoorbeeld de score of een naam te tonen. Maar ook tijdens de ontwikkeling van een spel is tekst een eenvoudige manier om de waarde van een variabele in de gaten te houden. In een console programma is het tonen van tekst heel eenvoudig. Helaas is het in MonoGame (en zowat elke andere game engine) minder gemakkelijk. Ten eerste kan je niet zomaar fonts gebruiken. We moeten eigenlijk van elke letter die je op het scherm wil tonen een afbeelding maken. Gelukkig is er de SpriteFont class om je te helpen.

Een font toevoegen

Voordat je tekst kan tonen moet je eerst een font maken. Dat doe je door de Pipeline Tool te openen. Je voegt een nieuwe item toe en je kiest voor SpriteFont Description. Vergeet ook niet bovenaan je font een naam te geven. Daarna kan je de font definitie openen in een tekst editor. De inhoud lijkt wat op een HTML bestand. Je kan daarin de naam van je font wijzigen en de eigenschappen aanpassen. Let wel op: de naam van het font moet bestaan op je computer. Tot slot kies je de Build actie om je font te genereren. De Pipeline Tool zal je font genereren en daarna kan je dat venster sluiten. Als er fouten in je bestand staan, dan zal je die op het scherm zien.

Font Support

In de Support folder maak je nu ook een static class Font. Er zijn twee variabelen nodig: een font en de scherm positie.

static class Font
{
    static private SpriteFont sFont;
    static private Vector2 sLocation = new Vector2(5, 5);
}

Net zoals de Camera class heeft ook font een setup functie nodig. Die laadt het font in het geheugen. De manier waarop dat gebeurt is gelijkaardig aan de manier waarop je een afbeelding laadt:

static public void Setup()
{
    sFont = Game1.sContent.Load<SpriteFont>("Arial");
}

Een volgende functie laat ons toe om eenvoudig de status van een object op het scherm te tonen. We gebruiken daarvoor de DrawString functie van SpriteBatch. Die heeft een font nodig, samen met een tekst, een locatie, en een kleur. Font en locatie zijn al aanwezig in deze class, maar de tekst en de kleur vragen we als functieargumenten.

static public void PrintStatus(string msg, Color color)
{
    Game1.sSpriteBatch.DrawString(sFont, msg, sLocation, color);
}

De laatste functie laat toe om een tekst eender waar op het scherm te tonen. We gebruiken nu camera coordinaten. Daarom moeten we eerst de functie Camera.ConvertToPosition public maken, want die was voordien private. Ook zitten we met een extra probleem: het resultaat van die functie is een Point, met integer coordinaten. Maar de DrawString functie verwacht een Vector2, met float coordinaten. Dat valt eenvoudig op te lossen:

static public void PrintAt(Vector2 pos, string msg, Color color)
{
    Point p = Camera.ConvertToPosition(pos);
    Game1.sSpriteBatch.DrawString(sFont, msg, new Vector2(p.X, p.Y), color);
}

Drawing Text

Nu de font class klaar is, kunnen we tekst op het scherm tonen. Vergeet niet eerst de setup functie toe te voegen aan Game1.Initialize:

protected override void Initialize()
{
    base.Initialize();
    Support.Camera.Setup();
    Support.Font.Setup();
}

In de Draw functie tonen we tenslotte tekst op het scherm. In het vorige hoofdstuk plaatsten we Textures op het scherm, en via de spatiebalk kunnen we een texture selecteren. We gaan nu de positie van de geselecteerde texture op het scherm tonen. Ook gaan we de tekst Selected tonen op de plaats van de geselecteerde texture. Om dat te kunnen doen moet je wel eerst een public getter voor position maken in de texture class. Want die variabele is private. Je leerde in de vorige cursus hoe dat moet.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    sSpriteBatch.Begin();
    Textures.ForEach(texture => texture.Draw());

    Support.Font.PrintStatus("Selected object is: " + selected + " Location=" + Textures[selected].Position, Color.Black);
    Support.Font.PrintAt(Textures[selected].Position, "Selected", Color.Red);
    sSpriteBatch.End();

    base.Draw(gameTime);
}

Oefeningen

  1. Waarom gebruiken we in de functie PrintStatus de pixel space in plaats van ons eigen coordinaten systeem?
  2. Vervang je font door Times New Roman. Pas ook de grootte van je font aan.
  3. Maak een PrintStatus2 functie, waarmee je tekst kan tonen onder de vorige tekst. Hier toon je het aantal textures dat actief is in je game. (Een toets om Textures toe te voegen moest je in een vorige oefening al gemaakt hebben. Eventueel kan je ook een andere variabele kiezen.)
  4. Nu je een functie hebt om een tweede status line toe te voegen, kan je ook eenvoudig een meer algemene functie maken met een extra argument waarmee je aangeeft op welke hoogte je je tekst wil tonen. Je kan dat positie argument dan vermenigvuldigen met de hoogte van een lijn.

Previous section:
Next section:
Navigatie