Graphical Output GRAPHICAL TEXT Introduction In non gaming

Graphical Output GRAPHICAL TEXT

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

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

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.

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. user. Name An expression, e. g. “Name: “ + user. Name A function that returns a String, e. g. Get. User. Name() 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.

Option 2: Location (x, y) 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)

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.

Option 3: Font - Continued We can define a new Font (as a global variable) using the following general command: ◦ Font font. Variable. Name = 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 title. Font = 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 title. Font variable can be reused in multiple Draw. Text commands

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 colour. Variable. Name = Helper. Get. Color(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 score. Colour = Helper. Get. Color(200, 100, 0, 255); This will create a fully opaque dark orange colour that can be used in the Draw. Text command

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. 5 f 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.

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 title. Font Colour: Uses a pre-created Helper colour Transparency: 0. 5 f (half transparent) Draw. Text(gfx, "Hello World!", 100, title. Font, Helper. WHITE, 0. 5 f);