XNA游戏开发之字符篇

r囧r小猫 2022-05-15 05:18 200阅读 0赞

### 摘要：  ###

游戏中开发不同于一般应用程序的开发，它更注重于界面美观，我们需要在游戏界面设计中花费大量的时间以便使它看起来更炫、更酷，当然这其中就少不了游戏中的字符文本，那么如何制作出漂亮的游戏文本呢？今天我们就一起来看一下。

### 内容：  ###

在XNA中2D文本的绘制方式种类比较多，这有助于我们制作出更美观的文本效果，下面我就逐一来看一下。

**一、SpriteFont**

这种方式在XNA游戏开发中应该算是最基本的一种形式，使用方法就是在游戏对应的Content项目中添加SpriteFont文件（右键Add—New Item—Sprite Font）。之后你会看到生成了一个XML格式的文件：

<?xml version="1.0" encoding="utf-8"?> <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"> <Asset Type="Graphics:FontDescription"> <FontName>Segoe UI Mono</FontName> <Size>30</Size> <Spacing>0</Spacing> <UseKerning>true</UseKerning> <Style>Regular</Style> <CharacterRegions> <CharacterRegion> <Start> </Start> <End>~</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent>

在这个文件中定义了你使用的字体类型、字体大小、字符间距等信息。值得一提的是上面的字体区间，它的意思是指你在游戏中使用的的字符范围，从上面的值可以看出是ASCII的32-126，具体对应字符如下：

<table style="border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="border-top:solid #4bacc6 1pt;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> ASCII码 </td> 
 <td style="border-top:solid #4bacc6 1pt;border-left:none;border-bottom:solid #4bacc6 2.25pt;border-right:solid #4bacc6 1pt;"> 字符 </td> 
 </tr> 
 <tr style="background:#d2eaf1;"> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 32 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> [空格] </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 33 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ! </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 34 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> " </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 35 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> # </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 36 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> $ </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 37 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> % </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 38 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> &amp; </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 39 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ' </td> 
 </tr> 
 <tr> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 40 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ( </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 41 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ) </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 42 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> * </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 43 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> + </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 44 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> , </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 45 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> - </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 46 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> . </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 47 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> / </td> 
 </tr> 
 <tr style="background:#d2eaf1;"> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 48 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 0 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 49 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 1 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 50 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 2 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 51 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 3 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 52 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 4 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 53 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 5 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 54 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 6 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 55 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 7 </td> 
 </tr> 
 <tr> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 56 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 8 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 57 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 9 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 58 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> : </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 59 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ; </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 60 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> &lt; </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 61 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> = </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 62 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> &gt; </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 63 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ? </td> 
 </tr> 
 <tr style="background:#d2eaf1;"> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 64 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> @ </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 65 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> A </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 66 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> B </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 67 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> C </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 68 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> D </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 69 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> E </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 70 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> F </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 71 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> G </td> 
 </tr> 
 <tr> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 72 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> H </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 73 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> I </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 74 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> J </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 75 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> K </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 76 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> L </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 77 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> M </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 78 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> N </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 79 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> O </td> 
 </tr> 
 <tr style="background:#d2eaf1;"> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 80 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> P </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 81 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> Q </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 82 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> R </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 83 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> S </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 84 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> T </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 85 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> U </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 86 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> V </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 87 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> W </td> 
 </tr> 
 <tr> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 88 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> X </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 89 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> Y </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 90 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> Z </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 91 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> [ </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 92 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> / </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 93 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ] </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 94 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ^ </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 95 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> _ </td> 
 </tr> 
 <tr style="background:#d2eaf1;"> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 96 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ` </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 97 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> a </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 98 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> b </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 99 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> c </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 100 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> d </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 101 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> e </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 102 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> f </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 103 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> g </td> 
 </tr> 
 <tr> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 104 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> h </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 105 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> i </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 106 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> j </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 107 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> k </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 108 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> l </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 109 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> m </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 110 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> n </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 111 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> o </td> 
 </tr> 
 <tr style="background:#d2eaf1;"> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 112 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> p </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 113 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> q </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 114 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> r </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 115 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> s </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 116 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> t </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 117 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> u </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 118 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> v </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 119 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> w </td> 
 </tr> 
 <tr> 
 <td style="border-top:none;border-left:solid #4bacc6 1pt;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 120 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> x </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 121 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> y </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 122 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> z </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 123 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> { </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 124 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> | </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 125 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> } </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> 126 </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"> ~ </td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"></td> 
 <td style="border-top:none;border-left:none;border-bottom:solid #4bacc6 1pt;border-right:solid #4bacc6 1pt;"></td> 
 </tr> 
 </tbody> 
</table>

当然它几乎涵盖了所有常用英文字符。之所以要定义这个区间主要是为了减少游戏资源，毕竟在一个游戏中并不是所有的字符我们都要用到。到这里可能会有朋友问，既然如此我要是使用中文怎么办，这个区间肯定不够啊，中文有两万多个字符，定义这个区间的意义也不大啊？

事实上我们如果需要用到中文字符的话一般并不是修改这个区间（当然修改它是可以做到的，但是占用资源十分大，毕竟字符太过了），而是通过Font Description Processor来处理。具体做法就是：准备一个txt文件，其中存放我们游戏中要用到的中文字符，例如我们建立一个FontDescription.txt文件，里面写上"中文字体"四个字存放到游戏的Content项目中；接着在解决方案中添加一个Content Pipeline Extension Library(4.0)类型的项目，然后编写一个类继承于FontDescriptionProcesor，重写Process方法。在这个方法中我们读取外部的一个txt文件，当然你也可以直接写到代码中或存储到其他位置，然后将txt文件中的字符（当然我们这里是中文字符了）读取到FontDescription中，具体代码如下：

using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Content.Pipeline; using Microsoft.Xna.Framework.Content.Pipeline.Graphics; using Microsoft.Xna.Framework.Content.Pipeline.Processors; using System.IO; using System.Text; using System.ComponentModel; namespace ContentPipelineExtensionDemo \{ \[ContentProcessor(DisplayName = "ContentPipelineExtensionDemo.MyContentProcessor")\]//这个名字将用于SpriteFont的Content Processor属性 public class MyContentProcessor : FontDescriptionProcessor \{ private string fDescription = @"../XNAGameFontContent/Fonts/FontDescription.txt";//注意这里的路径，因为FontDescription.txt文件在XNAGameFontContent项目的Fonts文件夹中 public override SpriteFontContent Process(FontDescription input, ContentProcessorContext context) \{ string path = Path.GetFullPath(fDescription); context.AddDependency(path); string content = File.ReadAllText(path,Encoding.UTF8);//FontDescription.txt文件必须保存成utf-8格式，此处也需使用utf-8读取 foreach (char c in content)//读取文件中字符，存放到FontDescription中 \{ input.Characters.Add(c); \} return base.Process(input, context); \} \} \}

做完上面两步之后，此时文件目录结构如图：

![文档结构图][xnaGameFont_solution.png_psid_1]

这里需要注意两点：FontDescription.txt文件必须保存成utf-8；由于文件在Content项目中默认XNAGameFontContent中的文件都需要进行编译，编译时会自动检测里面的文件类型，而txt文件不属于这其中任何类型，因此我们需要修改它的BuildAction属性为None。接下来我们在XNAGameFontContent下面中添加对ContentPipelineExtensionDemo生成的dll文件的引用，然后在XNAGameFontContent项目上右键选择Project Dependencies，弹出如下图窗口：

![项目依赖窗口][xnaGameFont_dependWindow.png_psid_1]

在Project项中选择XNAGameFont，Depends on中勾选ContentPipelineExtensionDemo，确定，以此添加游戏项目对内容管道扩展的依赖（这样一来就可以修改SpriteFont文件的Processor为我们自定义的扩展内容）。最后我们在XNAGameFontContent项目中添加SpriteFontForChinese.spritefont文件（上面txt中只是定义了中文字符的范围，在这里可以指定字体类型、字体大小等信息），文件内容如下：

<?xml version="1.0" encoding="utf-8"?> <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"> <Asset Type="Graphics:FontDescription"> <FontName>华文行楷</FontName> <Size>30</Size> <Spacing>0</Spacing> <UseKerning>true</UseKerning> <Style>Regular</Style> <CharacterRegions> <CharacterRegion> <Start> </Start> <End>~</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent>

修改文件的Content Processor属性为我们自定义的ContentPipelineExtensionDemo.MyContentProcessor（这就是上面添加依赖关系的原因），然后我们就可以在游戏中使用我们文本中的中文汉字了。具体使用时的代码如下：

运行效果如图：

![基本SpriteFont和中文字符扩展后的运行效果][SpriteFont]

**二、SpriteFontTexture**

由于SpriteFont文本对于显示效果的调整很有限，因此XNA又对其进行了扩充。SpriteFontTexture事实上是以图片来作为XNA的字符集，我们实现只要制作好相关字符的图片，然后像使用SpriteFont一样使用就可以了。当然使用起来很简单，主要问题就是如何来制作图片字库了。这个不用担心，很多牛人早已经想过这类问题了，下面我们看几种这类工具：

**2.1 ttf2bmp**

[ttf2bmp][]是一个制作字符库的简单工具，并且它是开源的，有了它我们就可以轻松制作图片字符库了。工具如下图：

![ttf2bmp工具截图][ttf2bmp 1]

我们将需要的字符编码范围确定下来，在Min char中输入最小字符编码，在Max char中输入最大字符编码，然后点击Export就可以生成类似于下面的图片：

![ttf2bmp生成的字符集图片][ttf2bmp 2]

将上图添加到XNAGameFontContent下面的Fonts文件夹中，接下来就可以写代码使用了，当然这时我们的字符图片在XNAGameFontContent下面中默认的是Textrue图片类型，还需要修改图片的Processor属性为Sprite Font Texture - XNA Framework。具体使用代码如下：

运行效果如图：

![xnaGameFont_screen_spritFontTexture_ttf2bmp.png_psid_1][]

**2.2 SpriteFont2**

准确的来说[SpriteFont2][]应该是对ttf2bmp的扩展，默认的ttf2bmp生成的字体效果比较单一（当然也可以利用一些图形处理工具（如：Photoshop）来对生成的图片进行处理），SpriteFont2则可以制作出更炫的效果，例如字体填充色、边框、投影、发光等。下面是工具的截图：

![SpriteFont2工具截图][SpriteFont2 1]

使用这个工具我们制作下面一张Sprite Font Texture图片：

![SpriteFont2生成的字符集图片][SpriteFont2 2]

然后添加到XNAGameFontContent项目的Fonts文件夹，当然别忘了修改片的Processor属性为Sprite Font Texture - XNA Framework。然后再就可以在程序中使用我们制作的字体：

运行效果：

![SpriteFont2制作的字符集运行效果图][SpriteFont2 3]

**2.3 XNA Bitmap Font Plus**

[XNA Bitmap Font Plus][]不是一个直接按照字符编码范围生成相关字体图片的工具，它的字体来源于图片或者剪贴板，这里我们主要说如何从剪贴板加载字体，首先我们在PowerPoint中按顺序编辑好我们常用的字符，就是ASCII从32-126之间的字符：

!"\#$%&'()\*+,-./ 0123456789:;<=>? @ABCDEFGHIJKLMNO PQRSTUVWXYZ\[/\]^\_ \`abcdefghIjklmno pqrstuvwxyz\{|\}~

然后调整字符的样式，修改字符间距：

![调整过的字符在powerpoint中截图][powerpoint]

接着 ctrl+c复制，此时字符信息复制到了剪贴板，打开XNA Bitmap Font Plus，它会自动加载剪贴板的内容，如下图：

![粘贴过之后打开XNA Bitmap Font Plus后的截图][XNA Bitmap Font Plus 1]

当然此时我们需要调整字符行数、偏移量和间隔等信息，点击Generate Bitmap Font按钮查看效果是否符合我们的要求：

![调整后的XNA Bitmap Font Plus截图][XNA Bitmap Font Plus 2]

当调整好之后，我们就可以点击Save Image As…按钮来保存生成的图片：

![XNA Bitmap Font Plus生成的字符集图片][XNA Bitmap Font Plus 3]

最后将图片添加到XNAGameFontContent项目的Fonts文件夹，修改图片的Processor属性为Sprite Font Texture - XNA Framework。就可以在程序中使用我们制作的字体：

运行效果：

![xnaGameFont_screen_spritFontTexture_xnaBitmapFontPlus.png_psid_1][]

下面给出所有以上这几种字体综合到一起的代码：

using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Input.Touch; using Microsoft.Xna.Framework.Media; namespace XNAGameFont \{ public class MyGame : Microsoft.Xna.Framework.Game \{ GraphicsDeviceManager graphics; SpriteBatch spriteBatch; SpriteFont sf1;//SpriteFont文本 Vector2 sfPosition;//SpritFont文本所在位置 SpriteFont sfChinese;//SpriteFont中文文本 Vector2 sfChinesePosition;//SpriteFont中文文本的显示位置 SpriteFont sfTexture;//Sprite Font Texture文本（ttf2bmp制作） Vector2 sfTexturePosition;//Sprite Font Texture文本位置 SpriteFont sfTextureExtend;//Sprite Font Texture文本效果扩展（spritefont2制作） Vector2 sfTextureExtendPosition;//Sprite Font Texture Extend文本位置 SpriteFont sfTexturePlus;//Sprite Font Texture文本（xna bitmap font plus制作） Vector2 sfTexturePlusPosition;//Sprite Font Texture 文本位置 public MyGame() \{ graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800; TargetElapsedTime = TimeSpan.FromTicks(333333); \} protected override void Initialize() \{ sfPosition = Vector2.Zero; sfChinesePosition = new Vector2(0, 100); sfTexturePosition = new Vector2(0, 200); sfTextureExtendPosition = new Vector2(0, 300); sfTexturePlusPosition = new Vector2(0, 400); base.Initialize(); \} protected override void LoadContent() \{ spriteBatch = new SpriteBatch(GraphicsDevice); sf1 = Content.Load<SpriteFont>(@"Fonts/SpriteFont"); sfChinese = Content.Load<SpriteFont>(@"Fonts/SpriteFontForChinese"); sfTexture = Content.Load<SpriteFont>(@"Fonts/SpriteFontTexture"); sfTextureExtend = Content.Load<SpriteFont>(@"Fonts/SpriteFontTexture2"); sfTexturePlus = Content.Load<SpriteFont>(@"Fonts/SpriteFontTexture3"); \} protected override void UnloadContent() \{ \} protected override void Update(GameTime gameTime) \{ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); base.Update(gameTime); \} protected override void Draw(GameTime gameTime) \{ GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); spriteBatch.DrawString(sf1, "SpriteFont", sfPosition, Color.White); spriteBatch.DrawString(sfChinese, "中文字体", sfChinesePosition, Color.Red); spriteBatch.DrawString(sfTexture, "Sprite Font Texture", sfTexturePosition, Color.Yellow); spriteBatch.DrawString(sfTextureExtend, "SFT 2", sfTextureExtendPosition, Color.White); spriteBatch.DrawString(sfTexturePlus, "Sprite Font Texture 3", sfTexturePlusPosition, Color.White); spriteBatch.End(); base.Draw(gameTime); \} \} \}

最终效果：

![最终综合效果图][xnaGameFont_screen_all.png_psid_1]

OK，就到这里吧！

最后附上源代码(上面提到的几个工具,都可以点击相关链接下载)：

[ ![download][]][_download]

<table> 
 <tbody> 
 <tr style="vertical-align:top;"> 
 <td> <a href="http://creativecommons.org/licenses/by/2.5/cn/" rel="nofollow"><img style="border-width:0;" src="http://i.creativecommons.org/l/by/2.5/cn/88x31.png" alt="知识共享许可协议"></a> </td> 
 <td> 本作品采用<a href="http://creativecommons.org/licenses/by/2.5/cn/" rel="nofollow">知识共享署名 2.5 中国大陆许可协议</a>进行许可，欢迎转载，演绎或用于商业目的。但转载请注明来自<a href="http://blog.csdn.net/jianxin160" rel="nofollow">崔江涛（KenshinCui）</a>，并包含相关链接。 </td> 
 </tr> 
 </tbody> 
</table>

[xnaGameFont_solution.png_psid_1]: /images/20220515/9d0c5e7342e04fe5b1e153f748eaa58f.png
[xnaGameFont_dependWindow.png_psid_1]: /images/20220515/e9d67fc99615475aa0d2706d66abbc2f.png
[SpriteFont]: /images/20220515/e7889614d17c4687b3f77f6dbe98357f.png
[ttf2bmp]: http://cid-e7bd5e8882a6a2da.office.live.com/self.aspx/BlogFile/ttf2bmpplus.zip
[ttf2bmp 1]: /images/20220515/f5e55410827042e8a3435c940e5eb39f.png
[ttf2bmp 2]: /images/20220515/a0754d03fe40435bb0d4994cfdcbca88.png
[xnaGameFont_screen_spritFontTexture_ttf2bmp.png_psid_1]: /images/20220515/031130d1121c40ec90ff5b9ab5a10f59.png
[SpriteFont2]: http://cid-e7bd5e8882a6a2da.office.live.com/self.aspx/BlogFile/SpriteFont2Installer.zip
[SpriteFont2 1]: /images/20220515/26b5820b2b9a48799926befdc05437ce.png
[SpriteFont2 2]: /images/20220515/4b3cb7e7e74e47db8912b8c56cc1357d.png
[SpriteFont2 3]: /images/20220515/aa025af7310c460cbcd20384da42d624.png
[XNA Bitmap Font Plus]: http://cid-e7bd5e8882a6a2da.office.live.com/self.aspx/BlogFile/BitmapFontPlus.zip
[powerpoint]: /images/20220515/d9be553bcde2459cb5eab7f6aaeb8fe0.png
[XNA Bitmap Font Plus 1]: /images/20220515/52a05dcceeb2422d8921d1049412f2de.png
[XNA Bitmap Font Plus 2]: /images/20220515/9915f207a4db41029aac0f40e0b0abcb.png
[XNA Bitmap Font Plus 3]: /images/20220515/a64f5a19ff0f4ff5b562033668686725.png
[xnaGameFont_screen_spritFontTexture_xnaBitmapFontPlus.png_psid_1]: /images/20220515/aef2f7e1868047598da725fa27182a14.png
[xnaGameFont_screen_all.png_psid_1]: /images/20220515/88cf671859d343779b167daa782aadec.png
[download]: /images/20220515/64c15b2f0e3b49c2805e66c3d45b3b71.png
[_download]: http://cid-e7bd5e8882a6a2da.office.live.com/self.aspx/BlogFile/XNAGameFont.zip