通过第十四节、第十五节的学习，我们掌握了如何创建一个初具雏形的精灵控件。目前我已经赋予了它少量的属性，但是离完美还有很长的距离。因此，我打算在后面的章节中以辅助游戏设计为前提，对该精灵控件进行全方位的包装，使之更加趋于完美与和谐（^-^||）
通过第十四节、第十五节的学习，我们掌握了如何创建一个初具雏形的精灵控件。目前我已经赋予了它少量的属性，但是离完美还有很长的距离。因此，我打算在后面的章节中以辅助游戏设计为前提，对该精灵控件进行全方位的包装，使之更加趋于完美与和谐（^-^||）。
在前面所有章节的示例中，角色均只有一个方向，且动作均为跑步状态，因此很多朋友都问我该如何实现角色的全方向及全动作。尽管我在文中已经提级了相关的解决方案；但是，对于初次接触WPF/Silverlight游戏制作的朋友在逻辑上或许还是有较大难度的。那么本节将实现主角8方向（在下文中凡涉及到角色方向时，我均会以时钟0点的位置为0，然后顺时针方向依次为1、2、3、4、5、6、7，通俗来讲即方向代号0代表角色面朝北、1代表东北、2代表东、3代表东南、4代表南、5代表西南、6代表西、7代表西北）如下图：
5大基本动作（每个动作均由若干帧组成，就拿本教程后面都要用到的主角图片为例，其中站立动作由5张图片连续播放形成、跑动8张、攻击7张、施法6张、翘辫子8张。当然，在高质量的游戏中一个角色并不只这5个动作，还有例如受伤、眩晕、上马下马等等动作，本教程以教会大家如何去基础使用与常规制作为目的，关于更精细的活还得靠大家自行发挥与创新。至于你问我这些动作的帧数设置是否是最合理，我可以告诉大家肯定不是（图片为破天一剑的，我保留了原先的帧配置未做大的改动）。如果你打算开发的是Silverlight游戏，我建议尽量让每个动作帧数不要超过5帧，实践证明这在网页游戏中能达到性能与效果的黄金分割；至于在WPF这样带客户端的游戏中，你大可将所有的动作均设置为10+帧都无所谓，在后面的教程中我将给大家见识一下剑侠世界中的16帧动作）如下图：
全面讲解即将开始，一定要认真听哦！坐正啦！
首先我们需要通过3DMAX等工具制作出一个拥有这5个动作的3D动画角色，然后将之导出为8个方向5个动作的系列帧图片（大家如果只是做练习用，可以从网上下载相关素材或通过提取工具来提取，但是请勿用于商业用途，否则是需要承担法律责任的）。这个过程不在本教程范围内，所以就不详细讲解了。接下来为了节省时间，我就不再重新提取素材了，我将以QXGame(WPF GAME ENGINE)游戏引擎中的主角为例进行相关解说。
如果素材是通过3D渲染2D的方式得到的，那么素材均为统一标准尺寸的连续单幅图片（不是的话找美工的麻烦）；但是如果是从网上下载或提取的话，每帧图片的尺寸并不统一。因此，我们首要做的是将这些图片通过Photoshop中的“动作”功能进行批量处理，使所有帧图片尺寸规格统一。就以本节中的主角为例，我将它的所有帧图片规格均统一为150*150像素，并且主角在图片中的水平及垂直方向均居中，如下图（该图为局部，一共有8*34=272张）。
尺寸规格统一好以后，接下来还需要对所有图片进行微调（可想而知，游戏制作中对美工人数的需求是极其庞大的。就如我在前面章节中说到的，游戏开发的成功，极大幅度取决于美工，程序逻辑方面仅位列游戏需求分析、界面地图美术设计之后排在第三）。所谓微调，就是将角色的各帧图片通过测试工具让它运动起来（如第四节、第五节中的方法），然后观察每帧图片重叠起来位置是否吻合，不吻合的则需要通过Photoshop进行微调，使它上面的角色处于图片正确的位置上（如下图则为错误的叠加，我们必须将所有帧图片完全对齐，这样连续切换的时候才能不漏破绽）：
至此就完成了素材准备阶段。一切就绪后，接下来的工作就是将主角8方向5动作的所有帧图片（本例子中的272张）进行处理，最终合成一张将这所有图片按一定规律排列的8方向5动作整合图。就以这272张图片为例，如何使用WPF类库中的方法将它们合并为一张图片呢？来看本节的第一个精华ComposeImage()方法：
/// <summary>
/// 将N帧图片合成一张8方向角色各动作分布图
/// </summary>
/// <param name="SourcePath">源文件路径</param>
/// <param name="SavaToPath">保存文件到目标路径</param>
/// <param name="imgnum">源图片数量</param>
/// <param name="imgwidth">单位图片宽</param>
/// <param name="imgheight">单位图片高</param>
public static void ComposeImage(string SourcePath, string SavaToPath, int imgNum, int imgWidth, int imgHeight) {
System.IO.FileStream fileStream = new System.IO.FileStream(SavaToPath, System.IO.FileMode.Create);
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
int count = 1;
for (int i = 0; i < 8; i++) {
for (int j = 0; j < imgNum / 8; j++) {
drawingContext.DrawImage(new BitmapImage(new Uri(SourcePath + count + "-1.png")), new Rect(j * imgWidth, i * imgHeight, imgWidth, imgHeight));
count += 1;
}
}
drawingContext.Close();
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap((imgNum / 8) * imgWidth, 8 * imgHeight, 0, 0, PixelFormats.Pbgra32);
renderTargetBitmap.Render(drawingVisual);
PngBitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
encoder.Save(fileStream);
fileStream.Close();
}
我将该方法写在一个名叫Super的静态类中，关于它的参数意思在注释中已经写得很清楚了，至于它是如何实现将这272张图片有规律的合成为1张我们能够在后面使用的合成图，大家只需要注意我用黄色突出的代码，这是主要的算法逻辑（单张图片的文件名格式如前文中的格式图上的一样，例如1-1.png、2-1.png、3-1.png、4-1.png、5-1.png、6-1.png……等等，如果你的图片是1.png、2.png、3.png、4.png、5.png、6.png、7.png、8.png……等等这样的取名格式，那么只需要将"-1.png"换成".png"即可）。至于其它的部分大家稍微看一下就可以轻松理解了。
上图上部分即为我调用Super.ComposeImage(@"E:\Body\", "Body0.png", 272, 150, 150);方法合成的主角8方向5动作的一张宽150*34=5100（34=5+8+7+6+8）像素、高150*8=1200（8=8个方向，按照上文中的顺序）像素的整合图。（由于该图尺寸过大（5100*1200像素），所以我将之缩小为原尺寸的15%左右以供给大家展示）
从上图下部分中（上部分的局部放大图），大家可以很清晰的发现图片排列的规律：即8行34列；从行看，由上至下的8行分别为代号0-7这8个方向的所有图片；从列看，1-5列为站立帧图片，6-13列为跑动帧图片，14-20列为攻击帧图片，21-26列为施法帧图片，27-34列为死亡帧图片。理清了规律后，如何对它进行局部单图截取？嘿嘿，且听下回分解。
出处：http://alamiye010.cnblogs.com
教程目录及源码下载：点击进入(欢迎加入WPF/Silverlight小组 WPF/Silverlight博客团队)
本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。
