CHAPTER 5
Text
XNA Game Studio 4.0
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.
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.
CREATING THE XNA CLOCK PROJECT
Create a project called BigClock
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.
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.
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.
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.
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).
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
<?xml version="1.0" encoding="us-ascii" ?>
<highscore game="Breakout">
<playername>Rob Miles</playername>
<score>1500</score>
</highscore> describe just about anything.
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 (<)
and close 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.
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.
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<SpriteFont>("SpriteFont1");
}
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.
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();
20 across
base.Draw(gameTime);
30
}
d
o
w
n
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.
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.
-->
<FontName>Kootenay</FontName>
<!-Size is a float value, measured in points. Modify this value to change
the size of the font.
-->
<Size>14</Size>
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.
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.
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.
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.
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();
DateTime String Methods
DRAW METHOD THAT DISPLAYS THE
CURRENT TIME ON YOUR SCREEN
XNA Game Studio 4.0
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);
}
MAKING A PRETTIER
CLOCK WITH 3-D TEXT
XNA Game Studio 4.0
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);
}
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.
FOR LOOPS
XNA Game Studio 4.0
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();
Repeating Statements with a for Loop
Repeating Statements with a for Loop
• 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.
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.
Other Loop Constructions
• C# also provides two other loop constructions, called
do – while and while.
Infinite Loop Output
Modify your Clock Output
• for (layer = 0; layer < 40 ; layer++)
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.
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).
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++;
}
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.
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.
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);
}