1. Graphical Output
Graphical Text

2. Introduction
In non gaming programs, most of our text output has been to the Console. Which serves a simple purpose, but is not very attractive
In games we expect things to catch our eye and be easy to spot in order to find information quickly.
One method to display information to the user is to use actual artwork created in software like Photoshop. These can look beautiful, but cannot be changed during gameplay.
This would work well for a title screen, but would be useless as a timer or a score.
This topic is all about how to do text output using standard installed fonts, but with a little flare

3. What Can We Do?
Graphical Text allows us to display any text with the following options:
The text itself
The font, any font that is installed on the computer (check Word for options)
The location, it can be placed anywhere on the screen
The colour, you may use one of the preset colours or create your own
The transparency, you can make the text as opaque or transparent as needed

4. Where & How?
Displaying graphical text is a drawing operation and therefore must be done in the Draw command
One simple command that takes the general form:
Draw.Text(gfx, text, x, y, font, colour, transparency)
The next few slides will cover these options and how you can play with them to achieve different results.
NOTE: gfx, is simply the graphics device the Text will be drawn to and will remain unchanged as gfx.

5. Option 1: Text
The text can be a String in any of the following formats:
A literal value, e.g. “Hello World!”
A variable, e.g. userName
An expression, e.g. “Name: “ + userName
A function that returns a String, e.g. GetUserName()
It is up to you to ensure the text you are displaying will fit on the screen using the text you choose and the font you create.

6. Option 2: Location (x, y) Hello World!
As you saw in the Basic Graphics lesson, the screen is basically a Cartesian coordinate system where the origin is in the top-left of the screen.
Meaning x grows as you move right and y grows as you move down
This top-left idea is consistent in all graphical components as you will see later.
For example, when placing an image on the screen, the coordinate you specify represents where the top-left corner of that image will be located
The one exception to this rule is Graphical Text. When placing graphical text, the location specified represents the bottom left corner of the text being placed, not top-left.
Hello World!
(x, y)

7. Option 3: Font
The font is simply the style and look of text. For example, a font you may see in Word is Times New Roman with a Bold style
When drawing graphical text, we must specify the
Font name
Style
Size
But we don’t simply do this when we draw the text, we have to define a Font as a variable for future use.
This allows us to reuse the font for multiple text outputs, e.g. all of the HUD elements like name, score, time, etc. or the names in a scoreboard would use the same font for consistency.

8. Option 3: Font - Continued
We can define a new Font (as a global variable) using the following general command:
Font fontVariableName = new Font(font name, font style, font size);
Font name can be any font type installed on the computer, e.g. Calibri
Font Style can be one the following preset options:
Font.PLAIN
Font.BOLD
Font.ITALIC
Font.BOLD + Font.ITALIC
Font size is how tall in pixels you want the text to be
Full Example Font Definition:
Font titleFont = new Font(“Calibri”, Font.BOLD + Font.ITALIC, 120);
This variable is then inserted in the font choice section of the Draw.Text command
Remember that the titleFont variable can be reused in multiple Draw.Text commands

9. Option 4: Colour
This is exactly what it sounds like, the colour of the text to be displayed.
You can use any of the predefined options from Helper in the Draw.Text command.
However you can also create your own custom global colour variable that can be reused in multiple Draw.Text commands
Much like creating a Font variable, we simply need to call one command
Color colourVariableName = Helper.GetColor(red, green, blue, transparency);
All of red, green, blue and transparency are values between 0 and 255.
A value of 255 for transparency will make it fully opaque.
Example Colour creation: (NOTE the American spellings of colour)
Color scoreColour = Helper.GetColor(200, 100, 0, 255);
This will create a fully opaque dark orange colour that can be used in the Draw.Text command

10. Option 5: Transparency
This is a float (similar to double) value between 0 and 1 that represents how transparent the text will be drawn as.
0 will be completely invisible where 1 will be opaque
When writing float values as literal numbers we follow the value with a small f to tell the compiler to treat it as a 32-bit float and not a 64-bit double, e.g. 0.5f
NOTE: This transparency value will take precedence over the transparency in the colour your may have created.
Meaning, if you have this value at fully opaque, the text will be opaque even if you chose half transparent when created the colour.

11. Full Graphical Text Example
Below is a full example of graphical text with the following options:
Text: “Hello World!”
Location: (100, 100)
Font: Uses a created font named titleFont
Colour: Uses a pre-created Helper colour
Transparency: 0.5f (half transparent)
Draw.Text(gfx, "Hello World!", 100, 100, titleFont, Helper.WHITE, 0.5f);