如果有做过游戏开发的朋友，或者说有了解过游戏开发相关内容的朋友一定会发现，游戏中除了地图引擎外，最关键的莫过于精灵的创建。精灵是游戏中大家见得最多的对象物体，它可以是主角，可以是其他玩家，可以是NPC，可以是怪物及BOSS，甚至可以是坐骑、障碍物等等。很多初学的朋友往往在为如何使用外国人制作好的通用精灵而发愁（毕竟繁杂的英文专业术语及超量的对象属性及方法是大多数人无法轻易弄通的）。幸运的是，在WPF/Silverlight中我们可以找到强大且使用简单的相关支持，它就是下文中我将详细讲解的传说中的精灵控件！
我们首先来看看如何在WPF/Silverlight中创建一个精灵控件。第一步要做的是在项目中添加一个文件夹(取名Controls)来归类保存它，接下来在该文件夹上点右键添加一个用户控件（取名叫QXSpirit.xaml，嘿嘿，当然其他名字都可啦，高兴就好），如下图。
准备工作完成啦，第二步就是去丰富这个控件，多多给它加内容，让它强大起来。那么我们双击QXSpirit.xaml，窗口中显示的就是它的界面了，暂时是一片空白的，我们首要添加的当然就是迫不及待想要出世的角色了，所以我们这样写：
<UserControl x:Class="WPFGameCourse.Controls.QXSpirit"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:QXControl="clr-namespace:QX.Game.Controls;assembly=QX">
<Canvas x:Name="Spirit">
<Image x:Name="Body" Width="150" Height="150"/>
<StackPanel Name="Describtion" Width="150" Height="58" Canvas.Top="-21">
<!--门派-->
<QXControl:BorderText x:Name="Faction" Fill="Orchid" FontSize="12" Bold="True" Stroke="Black" StrokeThickness="0.1" Text="娥眉大师姐" Height="13" HorizontalAlignment="Center" />
<!--家族-->
<QXControl:BorderText x:Name="Clan" Fill="DarkOrange" FontSize="12" Bold="True" Stroke="Black" StrokeThickness="0.1" Text="破天一剑" Height="13" HorizontalAlignment="Center" />
<!--名字-->
<QXControl:BorderText x:Name="Name" Fill="SteelBlue" FontSize="12" Bold="True" Stroke="Black" StrokeThickness="0.1" Text="爱在后院前" Height="13" HorizontalAlignment="Center" />
</StackPanel>
</Canvas>
</UserControl>
代码很简单，我先定义一个名为Spirit的Canvas主布局控件（为了方便自由定位它内部的其他子控件，所以在选择上我依然使用我钟爱的Canvas。当然，你也可以使用别的布局控件作为主控件）。然后在它的内部建立一个名为Body的Image子控件，它就是精灵的身体啦（也就是我们前面章节中一直使用着的Image Spirit=new Image()）。游戏中的精灵不光只有身体部分，还包括关于它的很多附加信息显示在周围：例如名字、帮派、家族等等。在上面代码中，我将这3个描述精灵身份的文字控件放在一个名为Describtion，类型为StackPanel的布局控件（该布局控件特点为可以轻松的排列子控件）中并且稍微调整一下它的位置以便在角色身体上方合适的位置显示（Canvas.Top="-21"）。而这3个描述身份的文字控件均为我事先写好的带描边的名为BorderText的控件，该控件同样编译封装在项目源码中的Dll文件夹中的QX.dll中。在WPF/Silverlight中要引用程序集中的控件，必须在xaml开头申明它。因此，我们需要在UserControl中写这样一句申明：xmlns:QXControl="clr-namespace:QX.Game.Controls;assembly=QX"，其中QXControl为下文中引用该控件时需要申明的前缀名称，clr-namespace和assembly这两个词应该不用再解释了吧，会编程的人都应该知道。需要特别说明的是：这么几个字，用TextBlock或Label现成的控件不就行了，何必要劳师动众那么夸张自己去写个控件来实现？对WPF/Silverlight中的中文字有一定了解的朋友都知道，在WPF/Silverlight中，文字都是矢量的，它在显示时被处理过（仿佛像是Photoshop中的文字锐利效果），因此显得模糊不清。例如假设我将本例的3个描述身份控件全用TextBlock来替换，那么效果将如下图：
我们可以很清晰的看到，在位图中12像素的字是不会显示成这样的；但是在WPF/Silverlight中，它的效果看上去是带模糊。而我在QXControl:BorderText控件中添加了一个Stroke属性和一个StrokeThickness属性，它们分别用来设置文字的描边线颜色和描边线粗细。并且StrokeThickness是double型，这样我就可以以任意想要的粗细对文字描边进行设置了。在上文代码中，我将之设置为0.1，这样显示出来的效果如下图：
虽然还无法达到最好的效果，但比起普通无描边的文字来说会美化些。由于文字只有12像素大小，在它上面描边无法很清晰的显示。因为，为了让大家更好理解WPF/Silverlight中TextBlock和QXControl:BorderText文字效果区别，我分别在这两个控件中输入“深蓝色”3个字，48像素，其中QXControl:BorderText以黑色1.5像素描边（该控件默认字体为“微软雅黑”），得到以下效果比较图：
左边为<TextBlock FontSize="48" FontFamily="微软雅黑" Text="深蓝色" Foreground="Pink" />创建的，
右边为<QXControl:BorderText FontSize="48" Stroke="Black" StrokeThickness="1.5" Text="深蓝色" Fill="Pink" />创建的，不用我说大家都会明白谁更幽雅漂亮了吧？更可贵的是，它提供了另一种WPF/Silverlight中关于中文字体模糊的解决方案。因此，在后面的游戏设计中，我将以QXControl:BorderText作为主要的文字控件使用。
呼呼，到此终于将我们可爱的精灵控件界面xaml代码写完，剩下的就是在Behind代码中丰富精灵的内部了。在下一节中，我将就精灵控件后台代码及上一节中遗留的问题：在地图移动中，主角（精灵）与障碍物如何跟随移动进行讲解，敬请关注。
原文地址：http://www.cnblogs.com/alamiye010/archive/2009/06/21/1507926.html
