Session 5.1. Writing Text

Transcription

1 1 Session 5.1 Writing Text

2 Chapter 5.1: Writing Text 2 Session Overview Show how fonts are managed in computers Discover the difference between bitmap fonts and vector fonts Find out how to create font resources in an XNA program Add a font to a game and use it to display text messages Discover how font properties are managed and how to create different text sizes

3 Chapter 5.1: Writing Text 3 Text and Computers Early computers did not print text at all Output was displayed by lights, or punched on paper tape Later devices were restricted to the physical design of mechanical print heads and characters built into text displays Only recently have computers become powerful enough to be able to manage the range of fonts and type sizes that are taken for granted today

4 Chapter 5.1: Writing Text 4 Fonts A font is a set of character designs in a particular style There are many different font designs Popular ones are: Arial Times New Roman Courier

5 Chapter 5.1: Writing Text 5 Bitmap Fonts In the early days of computers the font was actually a set of images, one for each character, drawn at a particular size These bitmapped fonts were hard to scale so a font design had to be supplied in a range of sizes

6 Chapter 5.1: Writing Text 6 Vector Fonts Characters in a vector font are created by joining dots with lines The computer uses an equation to work out the position of each point on the character shape This makes scaling very easy, but makes a lot of work for the computer

7 Chapter 5.1: Writing Text 7 Fonts in XNA A font in an XNA program is an item of content It is a bitmap font which is rendered at a particular size and then drawn as a sprite This is so XNA games can draw text as quickly as possible The Content Manager generates the SpriteFont resource from a Windows PC font when the program is built This is all done automatically

8 Chapter 5.1: Writing Text 8 Adding a Font Resource A font resource is added in a similar way to an image The difference is that we need to create a new item, rather than load an existing picture This opens the Add New Item Content dialog

9 Chapter 5.1: Writing Text 9 Creating a New SpriteFont The Add New Item dialog lets you select the content you want to add For a font select SpriteFont and click Add

10 Chapter 5.1: Writing Text 10 The Added Font Resource Once the font has been added it appears in the Content part of the solution You can add multiple fonts if a game needs to have different sizes or styles of text The XNA Content Manager takes care of all this automatically

11 Chapter 5.1: Writing Text 11 Building a SpriteFont When a game program is built, the Content Manager performs the following sequence: 1. It looks in the font resource file to find out what font to use and what sized characters are required. 2. It uses this font on the Windows PC to generate a set of bitmaps (the actual SpriteFont) and puts this into a file. 3. It copies the SpriteFont file it has produced into the right place for the game to use when it runs.

12 Chapter 5.1: Writing Text 12 Configuring a SpriteFont The font and size settings for a SpriteFont are held in the SpriteFont file You can open this file and edit it within Microsoft Visual Studio The file itself is held in the XML file format

13 Chapter 5.1: Writing Text 13 What Is XML? <?xml version="1.0" encoding="us-ascii"?> <highscore game="breakout"> <playername>rob Miles</playername> <score>1500</score> </highscore> XML stands for extensible Markup Language It means Way I can put stuff into a file that you (and a computer) can understand It is a format that lets you give data a structure Above I ve created an XML file to hold high score information

14 Chapter 5.1: Writing Text 14 SpriteFont XML <! Modify this string to change the font that will be imported. --> <FontName>Kootenay</FontName> <! Size is a float value, measured in points. Modify this value to change the size of the font. --> <Size>14</Size> There are numerous font properties that you might want to change These are the two most important ones

15 Editing a SpriteFont Chapter 5.1: Writing Text 15

16 Chapter 5.1: Writing Text 16 Adding a SpriteFont value to the Game World // Game World SpriteFont font; If a game needs to display text messages it needs a SpriteFont variable as part of the game world This will be used when the characters are drawn A SpriteFont is a bit like a Texture2D, except that it contains a set of character designs rather than a single image It will be used with the SpriteBatch to draw text

17 Chapter 5.1: Writing Text 17 Loading a SpriteFont protected override void LoadContent() { // Create a new SpriteBatch spritebatch = new SpriteBatch(GraphicsDevice); } font = Content.Load<SpriteFont>("SpriteFont1"); The best place to load a SpriteFont is in the LoadContent method The format of the load is similar to image loading This time we ask the Load method to fetch a SpriteFont rather than a Texture2D

18 Chapter 5.1: Writing Text 18 Drawing Text with the DrawString Method The SpriteBatch type provides a method called DrawString which draws a string of text on the display DrawString is told: the font to use to draw the text the string of text to draw the vector identifying the position on the display to start drawing the color to draw the text with

19 Chapter 5.1: Writing Text 19 Vectors Vector2 textvector = new Vector2(20, 30 ); A vector is a way of packaging together values that describe a particular position relative to the origin They can be 2D (x,y) or 3D (x,y,z) They can also be used to describe a direction We need to create a 2D vector to position the text The XNA type for a 2D vector is called Vector2 The above statements create a vector set to 20,30

20 Chapter 5.1: Writing Text 20 Drawing Hello World 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);

21 Chapter 5.1: Writing Text Drawing Text Visual Studio creates and manages a number of folders which all hold parts of the game project This includes a folder that contains the content for the game

22 Chapter 5.1: Writing Text 22 Summary Computers can manage character fonts as either bitmaps (an image that holds a picture of the character) or vectors (a set of lines and points that describe how to draw a character) XNA regards a font as a set of bitmaps that have been produced by the Content Manager from a vector font when the program is built XNA font properties are held in XML Fonts are loaded and used by a game in a very similar way to textures