Skip to content

Commit d038be3

Browse files
SimonDarksideJSimonDarksideJ
authored
Added text
1 parent 964a2bd commit d038be3

File tree

2 files changed

+130
-0
lines changed

2 files changed

+130
-0
lines changed

‎articles/getting_to_know/howto/graphics/HowTo_Draw_Text.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
title: Drawing Text with a Sprite
3+
description: Demonstrates how to import a SpriteFont into a project and to draw text using DrawString
4+
requireMSLicense: true
5+
---
6+
7+
## Overview
8+
9+
MonoGame provides a quick and easy method for drawing text using any registered Font file installed on the development PC, this is not needed in the final game as the true type font is converted into a texture for rendering, making the process easy and seamless.
10+
11+
### End result
12+
13+
![The output of this tutorial](images/HowTo_Draw_Text_Final.png)
14+
15+
## Adding a Sprite Font and Drawing Text
16+
17+
1. Open your `Content.mgcb` file using the `MGCB Editor` and click **New Item** Button.
18+
19+
1. In the **Add New Item** dialog box, select **SpriteFont Description** and set the filename to "**MyMenuFont**" in the edit box at the top of the dialog.
20+
21+
> [!NOTE]
22+
> You may find it convenient at this point to change the name of the new file from "Spritefont1" to the friendly name of the font you intend to load (keeping the .spritefont file extension). The friendly name identifies the font once it is installed on your computer, for example, `Courier New` or `Times New Roman`. When you reference the font in your code, you must use the friendly name you have assigned it.
23+
Pipeline tool creates a new `.spritefont` file for your font.
24+
25+
1. Double-click on your new font file in the `MGCB Editor` which will open the `SpriteFont` text file in your default editor. Alternatively, you can **right-click** and select `Open With` to choose a different editor.
26+
27+
1. By default the font `Arial` will be used by the `SpriteFont` configuration, to change this to another installed font simply type the friendly name of the font to load into the `FontName` element. For the purposes of this tutorial, I have set the Font size to **54** and left the rest of the `SpriteFont` settings as the default.
28+
29+
> [!IMPORTANT]
30+
> This is not the name of a font file, but rather the name that identifies the font once it is installed on your computer.
31+
>
32+
> You can view the installed fonts on your machine in the `Settings -> Personalization -> Fonts` configuration on your Windows machine (or relevant place on Mac /Linux) or to install new ones.
33+
34+
The content pipeline supports the same fonts as the [System.Drawing.Font](http://msdn.microsoft.com/en-us/library/system.drawing.font.aspx) class, including TrueType fonts, but not bitmap (.fon) fonts. You may find it convenient to save the new `.spritefont` file using this friendly name. When you reference the font in your code, you must use the friendly name you have assigned it.
35+
36+
> [!NOTE]
37+
> If you want to use a custom font, you should put the `.ttf` or `.oft` in the same directory as the `.spritefont` file and the build system will pick it up. There is no need to install the font system wide.
38+
39+
1. If necessary, change the `Size` entry to the point size you desire for your font.
40+
41+
1. If necessary, change the `Style` entry to the style of font to import.
42+
You can specify **Regular**, **Bold**, **Italic**, or **Bold, Italic**. The **Style** entry is case sensitive.
43+
44+
1. Specify the character regions to import for this font.
45+
46+
> [!NOTE]
47+
> Character regions specify which characters in the font are rendered by the [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont). You can specify the start and end of the region by using the characters themselves, or by using their decimal values with an &# prefix. The default character region includes all the characters between the space and tilde characters, inclusive.
48+
49+
### To draw text on the screen
50+
51+
1. Add a Sprite Font to your project as described above.
52+
53+
1. Create a [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) reference to encapsulate the imported font.
54+
55+
1. Create a [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object for drawing the font on the screen.
56+
57+
1. In your [Game.LoadContent](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_LoadContent) method, call [ContentManager.Load](xref:Microsoft.Xna.Framework.Content.ContentManager#Microsoft_Xna_Framework_Content_ContentManager_Load__1_System_String_), specifying the [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) class and the asset name of the imported font.
58+
59+
1. Create your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object, passing the current [GraphicsDevice](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice).
60+
61+
```csharp
62+
// The Sprite Font reference to draw with
63+
SpriteFont font1;
64+
65+
// The position to draw the text
66+
Vector2 fontPos;
67+
68+
protected override void LoadContent()
69+
{
70+
// Create a new SpriteBatch, which can be used to draw textures.
71+
_spriteBatch = new SpriteBatch(GraphicsDevice);
72+
font1 = Content.Load<SpriteFont>("MyMenuFont");
73+
Viewport viewport = _graphics.GraphicsDevice.Viewport;
74+
75+
// TODO: Load your game content here
76+
fontPos = new Vector2(viewport.Width / 2, viewport.Height / 2);
77+
}
78+
```
79+
80+
1. In your [Game.Draw](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Draw_Microsoft_Xna_Framework_GameTime_) method, call [SpriteBatch.Begin](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__) on the [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
81+
82+
1. If necessary, determine the origin of your text.
83+
84+
If you want to draw your text centered on a point, you can find the center of the text by calling [SpriteFont.MeasureString](xref:Microsoft.Xna.Framework.Graphics.SpriteFont#Microsoft_Xna_Framework_Graphics_SpriteFont_MeasureString_System_String_) and dividing the returned vector by 2.
85+
86+
1. Call [SpriteBatch.DrawString](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_DrawString_Microsoft_Xna_Framework_Graphics_SpriteFont_System_String_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) to draw your output text, specifying the [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) object for the font you want to use.
87+
88+
All other parameters of [SpriteBatch.DrawString](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_DrawString_Microsoft_Xna_Framework_Graphics_SpriteFont_System_String_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) produce the same effects as a call to [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_).
89+
90+
1. Call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) after all text is drawn.
91+
92+
```csharp
93+
protected override void Draw(GameTime gameTime)
94+
{
95+
GraphicsDevice.Clear(Color.CornflowerBlue);
96+
97+
_spriteBatch.Begin();
98+
99+
// Draw Hello World
100+
string output = "Hello World";
101+
102+
// Find the center of the string
103+
Vector2 FontOrigin = font1.MeasureString(output) / 2;
104+
// Draw the string
105+
_spriteBatch.DrawString(font1, output, fontPos, Color.LightGreen,
106+
0, FontOrigin, 1.0f, SpriteEffects.None, 0.5f);
107+
108+
_spriteBatch.End();
109+
base.Draw(gameTime);
110+
}
111+
```
112+
113+
## See Also
114+
115+
- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
116+
117+
### Concepts
118+
119+
- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
120+
121+
### Reference
122+
123+
- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
124+
- [SpriteBatch.DrawString](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_DrawString_Microsoft_Xna_Framework_Graphics_SpriteFont_System_String_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
125+
- [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont)
126+
- [ContentManager.Load](xref:Microsoft.Xna.Framework.Content.ContentManager#Microsoft_Xna_Framework_Content_ContentManager_Load__1_System_String_)

‎articles/getting_to_know/howto/graphics/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ This section walks through several core concepts related to sprite rendering, in
4949

5050
Demonstrates how to draw a sprite repeatedly in the x and y directions in one Draw call.
5151

52+
- [How To Draw Text](HowTo_Draw_Text.md)
53+
54+
Demonstrates how to import a SpriteFont into a project and to draw text using the DrawString method.
55+
5256
- [How To Animate A Sprite](HowTo_Animate_Sprite.md)
5357

5458
Demonstrates how to animate a sprite from a texture using a custom class.

0 commit comments

Comments
 (0)