C#开发WPF/Silverlight动画及游戏系列教程(Game Course)：(四)实现2D人物动画①

通过前面的学习，我们掌握了如何动态创建物体移动动画，那么接下来我将介绍WPF中如何将物体换成2D游戏角色，并通过使用前面所讲的DispatcherTimer计时器来实现2D人物角色的各种动作动画。

　　 动态实现2D人物角色动画目前有两种主流方法，下面我会分别进行介绍。

　　 第一种方法我称之为图片切换法，准备工作：首先通过3DMAX等工具3D渲染2D的方法制作出角色，然后将角色每个动作均导出8个方向每方向若干帧的系列图片（如果是有方向的魔法图片，很多2D-MMORPG往往会导出16个方向的系列帧图片以求更为逼真），即将每个人物每个动作的各方向的每帧均存成一张图片，如下图仅以从破天一剑游戏中提取的素材为例：

　　（特别申明：本系列教程所使用的如有注明归属权的图片素材均来源于网络，请勿用于商业用途，否则造成的一切后果均与本人无关。）

　　图片看不清楚？请点击这里查看原图（大图）。

　　 从上图可以看到，我将人物向右方跑步共8帧图片通过Photoshop分别将画布等比例扩大成150*150象素图片（因为是提取的素材，初始宽和高是不均衡值，所以必须扩大成自己的需求，这样人物会在图片中居中，并且为后期加入武器或坐骑留好余地。稍微的偏离也可以在后期进行微调），并将他们从开始到结束分别命名为0.png，1.png，2.png，3.png，4.png，5.png，6.png，7.png（这里还要顺带一提的是，图片最好背景Alpha透明，否则在算法上还要进行去色，不是多此一举吗？至于为何是png而不是gif，我这里考虑到Silverlight目前只支持png和jpg，为了更多的通用性，当然如果您只用WPF，gif或png均可）。最后在项目中我们新建一个文件夹取名叫Player，然后将这8张图片保存在该目录下，到此准备工作终于结束了，忽忽。。还真够累的。

　　 接下来就是重头戏了，如何通过纯C#来实现动态创建人物跑动动作动画呢？嘿嘿，且看下面代码。

　　　　　　　　int count = 1;
　　　　　　　 Image Spirit;
　　　　　　　 public Window4() {
　　　　　　　　　　　 InitializeComponent();
　　　　　　　　　　　 Spirit = new Image();
　　　　　　　　　　　 Spirit.Width = 150;
　　　　　　　　　　　 Spirit.Height = 150;
　　　　　　　　　　　 Carrier.Children.Add(Spirit);
　　　　　　　　　　　 DispatcherTimer dispatcherTimer = new DispatcherTimer();
　　　　　　　　　　　 dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
　　　　　　　　　　　 dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150);
　　　　　　　　　　　 dispatcherTimer.Start();
　　　　　　　 }

　　　　　　　 private void dispatcherTimer_Tick(object sender, EventArgs e) {
　　　　　　　　　　　 Spirit.Source = new BitmapImage((new Uri(@"Player" + count + ".png", UriKind.Relative)));
　　　　　　　　　　　 count = count == 7 ? 0 : count + 1;
　　　　　　　 }

　　 首先我们申明一个count变量用于记录当前切换到了哪张png图片了，接下来创建一个Image控件，取名叫Spirit，一看就知道它就是这节的主角啦，嘿嘿，写了那么多，主角终于要登场啦！

　　 初始化后我们分别设置Spirit宽高各为150，并将之做为子控件添加进Carrier中，到此主角完成了登场过程。

　　 接下来创建DispatcherTimer动画，相关内容可以查看第三节。

　　 最后我们在dispatcherTimer_Tick事件中进行图片的切换操作：即设置每间隔150毫秒后Spirit的图片源为Player文件夹中的count.png图片，设置完后如果count==7即已经到了最后一帧，那么count回到第一帧即count=0;否则count+=1，这是很容易理解的了。

　　 好了，按下Ctrl+F5，嘿嘿，主角会跑动了。当然啦，目前只是原地跑步，但是已经向成功迈出了一大步，难到不是吗？

　　 下一节，我将继续介绍动态创建人物动画的第二种方法，敬请关注。