Using Text Graphics

Most video games are going to need text eventually, and Otter has two main classes to help out with rendering text: Text and RichText.  This example will go over the basic uses of these classes.  First let's take a look at an example using the basic Text class.  The example uses the font Yardsale, but you can substitute any font you want.

using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TextStuff {
  class Program {
    static void Main(string[] args) {
      // Create a Game.
      var game = new Game("Text Example");

      // Create a Scene.
      var scene = new Scene();

      // Create a Text object using the default font with size 16.
      var text1 = new Text("Just some basic text.", 16);
      // Position the Text.
      text1.SetPosition(20, 20);
      // Add it to the Scene's Graphic list for rendering.
      scene.AddGraphic(text1);

      // Create a Text object using the deafult font and a size of 32.
      var text2 = new Text("Bigger text!", 32);
      // Position the Text.
      text2.SetPosition(20, 50);
      // Add it for rendering.
      scene.AddGraphic(text2);

      // Create a Text object using the font yardsale.ttf and a size of 40.
      var text3 = new Text("Using a font", "yardsale.ttf", 40);
      // Position the Text.
      text3.SetPosition(20, 120);
      // Add it for rendering.
      scene.AddGraphic(text3);

      // Create a Text object using the font yardsale.ttf and a size of 40.
      var text4 = new Text("Using a shadow!", "yardsale.ttf", 40);
      // Set the shadow color of the Text.
      text4.ShadowColor = Color.Red;
      // Position the Shadow.
      text4.ShadowX = 1;
      text4.ShadowY = 3;
      // Position the Text.
      text4.SetPosition(20, 170);
      // Add it for rendering.
      scene.AddGraphic(text4);

      // Create a Text object using the font yardsale.ttf and a size of 40.
      var text5 = new Text("Using an outline!", "yardsale.ttf", 40);
      // Set the outline color of the Text.
      text5.OutlineColor = Color.Green;
      // Set the thickness of the outline.
      text5.OutlineThickness = 3;
      // Position the Text.
      text5.SetPosition(20, 220);
      // Add it for rendering.
      scene.AddGraphic(text5);

      // Start the Game using the created Scene.
      game.Start(scene);
    }
  }
}

For big chunks of text, or large amounts of text that is changing a lot, it is highly recommended to use the Text class.  The Text class performs much more efficiently than the RichText class.  The RichText class is more designed for smaller chunks of text that need some extra effects, like motion on individual letters, color highlighting, and more.  Here's an example of using RichText to make some text that has some special effects.

using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace RichTextStuff {
  class Program {
    static void Main(string[] args) {
      // Create a Game.
      var game = new Game("Rich Text Example");

      // Create a Scene.
      var scene = new Scene();

      // Create a RichText object with the default font and size 16.
      var richText1 = new RichText("Basic Rich Text", 16);
      // Position it.
      richText1.SetPosition(20, 20);
      // Add it for rendering.
      scene.AddGraphic(richText1);

      // Create a RichText object using yardsale.ttf font and size 40.
      var richText2 = new RichText("Using a font.", "yardsale.ttf", 40);
      // Position it.
      richText2.SetPosition(20, 60);
      // Add it for rendering.
      scene.AddGraphic(richText2);

      // Create a RichText object using yardsale.ttf, font size 30, and coloring some text.
      var richText3 = new RichText("Change the {color:f00}color{clear}.", "yardsale.ttf", 30);
      // Position it.
      richText3.SetPosition(20, 120);
      // Add it for rendering.
      scene.AddGraphic(richText3);

      // Create a RichText object with multiple lines.
      var richText4 = new RichText("Multiple lines.\nIt will be center aligned.\nThat's fine!", 20);
      // Use center alignement.
      richText4.TextAlign = TextAlign.Center;
      // Position it.
      richText4.SetPosition(20, 180);
      // Adjust the line height to 125%.
      richText4.LineHeight = 1.25f;
      // Add it for rendering.
      scene.AddGraphic(richText4);

      // Create a RichText object using wave and shake effects on specific words.
      var richText5 = new RichText("I am {waveAmpY:5}wavy!{clear} and {shake:4}{color:ff0}mad!", "yardsale.ttf", 40);
      // Position it.
      richText5.SetPosition(20, 300);
      // Add it for rendering.
      scene.AddGraphic(richText5);

      // Create a RichTextConfig object to use for creating a RichText object later.
      var config = new RichTextConfig() {
        CharColor0 = Color.White,
        CharColor1 = Color.Cyan,
        CharColor2 = Color.White,
        CharColor3 = Color.Yellow,
        FontSize = 24,
        SineAmpY = 5,
        SineRateY = 6,
        ShadowColor = Color.Red,
        ShadowX = 1,
        ShadowY = 1,
        ShakeX = 1,
      };
      // Create a RichText object using the config.
      var richText6 = new RichText("Preconfigured Text!!\nLookin' good, yeah yeah!", config);
      // Position it.
      richText6.SetPosition(20, 360);
      // Add it for rendering.
      scene.AddGraphic(richText6);

      // Star the game and look at all the cool text.
      game.Start(scene);
    }
  }
}

With the RichText example code you should end up with something that looks like this

RichText has many more effects than just regular Text, but it is more performance intensive, so don't use it for large paragraphs of text.

Examples