1. CHAPTER 5 Text XNA Game Studio 4.0

2. Objectives Discover how text is drawn using Microsoft XNA. Add some font resources to your XNA program. Draw some funky text. Create the biggest clock you’ve ever seen. Find out how to fake 3-D images.

3. Text as a Resource The design of the shape of the characters is described in a font file. The font file gives the shape of each of the characters. To get an XNA program to display text in a particular font, you need to add a reference to that font file to the program project. You then use the XNA Content Management System to bring the font into the program for use when you want to draw text.

4. CREATING THE XNA CLOCK PROJECT Create a project called BigClock

5. Adding a Font Resource In Solution Explorer, right-click the Content item in the BigClockContent project (not the BigClock project), then select Add, New Item. Select the Sprite Font item This creates a sprite font reference. When you do this, you find that XNA Game Studio has filled in the Name information at the bottom of the dialog box with SpriteFont1.spritefont. This is the name that you use within your program to refer to this item of font content. Normally you would want to change the name to be more appropriate.

6. Adding a Font Resource When Visual Studio builds the BigClockContent project, it reads an existing font on your Windows PC to build the SpriteFont that is used when the game runs. When a new font resource is created, it is initially set to use a font called Kootenay, which is supplied with XNA Game Studi Note: You can use a different font if you want, but if the name you give does not match a font that’s installed on your computer, you won’t be able to build your program because the Content Manager will be unable to find the requested item.

7. Adding a Font Resource You can have more than one font in your game if required, but you need to add each font that you want to use as another resource. Remember, though, that adding extra fonts makes your output program bigger because the character designs need to be made part of the program. The name that you give must match a font available on the computer that’s being used to build the game because the XNA Content Manager uses the font file on the host computer to build the sprite design for use in your XNA program.

8. Adding a Font Resource Note It’s important you understand what’s happening here. When you add a resource to a project, you simply add a reference to the item that you want to use. You can think of the reference as an item on a shopping list. Just like an item on a shopping list would remind you to buy a new toothbrush the next time you were shopping, a resource reference tells the Content Manager that a certain resource must be fetched when the program is to be built.

9. Adding a Font Resource When the project is built, the Content Manager follows the reference to the required item and then adds it to the program that’s being built. The purpose of the resource information is to tell the Content Manager what to retrieve and how to use the resource in the project. This reference file is not written in C#, nor is it plain text. It’s written in a format called Extensible Markup Language (XML).

10. The XML File Format A markup language is used to describe things. It contains the names of these things and information about them. As its name indicates, XML is extensible, so you can use it to XML Example Rob Miles 1500 describe just about anything.

11. The XML File Format This high score information is for the Breakout game; it shows the name of the player and the score the player reached. The format of the lines and the way that the open bracket ( ) characters are used to denote the names of the values and the values themselves are defined in the XML standard. The first line of the snippet identifies which version of XML you’re using for the rest of the data. In the case of your font, the XML tells the Content Manager the name of the font to fetch, the size of the font, whether it’s to be drawn as bold or italic, and other font-related information.

12. Loading a Font The Content Manager fetches a font and make it available for use in a very similar way to the images that you’ve used before. Each character design is delivered to your program as a little image that the Draw method displays on the screen. For your clock, the game world consists of a variable called font, which is of type SpriteFont. This holds a reference to the font the program will have loaded. SpriteFont is another XNA type (there are many more). Your SpriteFont will hold information about a font that the Content Manager loads for you.

13. Declaring a Font Variable Declare the variable for the game world as follows: // Game World SpriteFont font; The font can be loaded in the LoadContent method: protected override void LoadContent() { // Create a new SpriteBatch, // which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); font = Content.Load ("SpriteFont1"); }

14. Drawing with a Font You will use a vector, which tells the Draw method where on the screen to start. “Vector” is a fancy word that means “direction and distance.” You’re using the 2-D (x and y value) version of the vector. A 2-D vector is given as two coordinates: the x value and the y value. In a text-drawing program, you’re using a vector like a coordinate in that it specifies the top left corner of the text you’re about to draw.

15. Drawing with a Font protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); Vector2 textVector = new Vector2(20, 30); spriteBatch.Begin(); spriteBatch.DrawString(font, "Hello World", textVector, Color.Red); spriteBatch.End(); base.Draw(gameTime); } 20 across 30 d o w n

16. Changing the Font Properties It is possible to scale text sprites, but at the moment it’s easiest to get larger text simply by changing the XML in the SpriteFont resource file. To get hold of the file that describes the font, open it by double-clicking it in Solution Explorer for the BigClock project.

17. Changing the Font Properties The left window in XNA Game Studio changes to show you the XML that describes the font to be loaded. The font and the size of the text are set as shown here: <!-- Modify this string to change the font that will be imported. --> Kootenay <!-- Size is a float value, measured in points. Modify this value to change the size of the font. --> 14

18. Changing the Font Properties You can change the name of the font that you want to use and the size of the font by adjusting the items shown in bold in this code. You can also adjust the style and the spacing between letters. A font size of 100 gives nice large text using the Kootenay font on an Xbox or a Windows PC screen. If you are using a Windows phone a size of 30 works well.

19. Getting the Date and Time The PC, the Windows Phone, and the Xbox have internal clock hardware that is used by some games to change the way they play so that, for example, if it’s dark outside, it’s dark in the game as well. To accomplish this, the XNA Framework must provide a way of finding the date and time. The date and time values are held in a special structure called DateTime.

20. Getting the Date and Time The DateTime type holds all the information about the date and time of a particular instance. The structure is not part of XNA as such; rather, it’s part of the Microsoft.NET Framework. For your clock, you need a DateTime structure that’s set to the current date and time. It turns out that DateTime provides a property that creates one for you. A property is a value or setting that an object in a C# program can expose for you to use.

21. Getting the Date and Time To get a DateTime value that holds the current time and use that to drive your clock, use the following statement. DateTime nowDateTime = DateTime.Now; The Now property of the DateTime structure is always set to the current date and time. This works by taking values from an internal hardware clock, which means that after a while, the value will be out of date. You could use a DateTime variable to record the time at which the game was started.

22. Getting the Date and Time To get a string that contains the time in text form // Create DateTime object DateTime nowDateTime = DateTime.Now; // Use ToLongTimeString() method to convert the // date and time information inside the object // into a string string nowString = nowDateTime.ToLongTimeString();

23. DateTime String Methods

24. DRAW METHOD THAT DISPLAYS THE CURRENT TIME ON YOUR SCREEN XNA Game Studio 4.0

25. Draw Method protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); DateTime nowDateTime = DateTime.Now; string nowString = nowDateTime.ToLongTimeString(); Vector2 nowVector = new Vector2(50, 400); spriteBatch.Begin(); spriteBatch.DrawString(font, nowString, nowVector, Color.Red); spriteBatch.End(); base.Draw(gameTime); }

26. MAKING A PRETTIER CLOCK WITH 3-D TEXT XNA Game Studio 4.0

27. Drawing Multiple Text Strings One way to make the display more interesting is to draw different-colored versions of the text at slightly different positions on the screen. protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); DateTime nowDateTime = DateTime.Now; string nowString = nowDateTime.ToLongTimeString(); Vector2 nowVector = new Vector2(50, 400); spriteBatch.Begin(); spriteBatch.DrawString(font, nowString, nowVector, Color.Red); nowVector.X = nowVector.X + 4; nowVector.Y = nowVector.Y + 4; spriteBatch.DrawString(font, nowString, nowVector, Color.Yellow); spriteBatch.End(); base.Draw(gameTime); }

28. Drawing Multiple Text Strings The sequence of instructions that the compiler creates to work out the statement is as follows: 1. Fetch the value of the X property of nowVector. 2. Add 4 to it. 3. Store the value back in the X property of nowVector. The effect of adding 4 to the X and Y properties is to move the drawing position for the text across and down the screen.

29. FOR LOOPS XNA Game Studio 4.0

30. Repeating Statements with a for Loop A program can do three things as it runs. It can perform a single action (a statement), it can make a choice of what to do (a condition statement), or it can repeat something (a loop construction). Modify the code to use a for Loop spriteBatch.Begin(); int layer; for (layer = 0; layer < 4; layer++) { spriteBatch.DrawString(font, nowString, nowVector, Color.Red); nowVector.X++; nowVector.Y++; } spriteBatch.DrawString(font, nowString, nowVector, Color.Yellow); spriteBatch.End();

31. Repeating Statements with a for Loop

32. Begin This is a statement that is obeyed when the loop starts. In this example, you’re using an integer variable called layer to count each of the layers that you’re drawing, and the loop must set this to zero at the beginning. Test Condition The condition controls when the loop finishes. It can be either true (the loop continues) or false (the loop ends). The condition in your loop is layer < 4. You might not have seen the < operator before; it performs a “less-than” comparison between the two operands. If the item on the left is less than the item on the right, the result of the comparison is true. If the item on the left is not less than the item on the right, the result of the comparison is false. C# provides a range of different comparison operators. Change Each time the statements in the loop are completed, the change is performed. In this case, the change statement layer++ makes the value in layer 1 larger each time. After the change has been performed, the test condition is evaluated to see whether the statements controlled by the loop are to be executed again.

33. Repeating Statements with a for Loop The precise sequence that’s followed by the code that the compiler produces is as follows: 1. Perform the Begin statement to start the loop. 2. Perform the Test and finish if the test is false. 3. Perform the statement in the loop body. 4. Perform the Change statement. 5. Return to step 2.

34. Other Loop Constructions C# also provides two other loop constructions, called do – while and while.

35. Infinite Loop Output

36. Modify your Clock Output for (layer = 0; layer < 40 ; layer++)

37. Creating Fake 3-D Lots of the graphics in games are faked. It looks 3-D but turns out to be much easier to program. You use only two principles: 1. Things that are 3-D have shadows. 2. Things that have the light shining directly on them look the brightest.

38. Creating Shadows Using Transparent Colors The first part of the text that you want to draw is the shadow at the back. You draw your picture from the back forwards and use the fact that each time you draw, you add to what’s already there. You use another feature of XNA drawing: colors that cause things to be drawn slightly transparent (that is, with part of the background showing through).

39. Creating Shadows Using Transparent Colors By drawing transparent colors on top of each other, you can get a nice blurry effect, as done in the following code. Color nowColor = new Color(0,0,0,20); for (layer = 0; layer < 10 ; layer++) { spriteBatch.DrawString(font, nowString, nowVector, nowColor); nowVector.X++; nowVector.Y++; }

40. Creating Shadows Using Transparent Colors NOTE - The Color is constructed from four values rather than three. Color nowColor = new Color(0,0,0,20); The first three values give the intensity of red, green, and blue. The fourth gives the transparency of the color. In graphical terms, this is often called the alpha channel value. The bigger the number, the less the background shows through. Just like your color intensity values, the transparency value can range from 0 (completely transparent) to 255 (solid color). If you don’t give a transparency value, the Color is created as solid.

41. Creating Shadows Using Transparent Colors Now you know one way video games achieve blur. Repeatedly drawing the same scene in slightly different positions. Game programmers get pictures to fade slowly onto the screen by repeatedly drawing the image with different levels of transparency to make it slowly appear over a background.

42. protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); DateTime nowDateTime = DateTime.Now; string nowString = nowDateTime.ToLongTimeString(); Vector2 nowVector = new Vector2(50, 500); int layer; spriteBatch.Begin(); // Draw the shadow Color nowColor = new Color(0, 0, 0, 20); for (layer = 0; layer < 10; layer++) { spriteBatch.DrawString(font, nowString, nowVector, nowColor); nowVector.X++; nowVector.Y++; } // Draw the solid part of the characters nowColor = Color.Gray; for (layer = 0; layer < 5; layer++) { spriteBatch.DrawString(font, nowString, nowVector, nowColor); nowVector.X++; nowVector.Y++; } // Draw the top of the characters spriteBatch.DrawString(font, nowString, nowVector, Color.White); spriteBatch.End(); base.Draw(gameTime); }