C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四)实现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，嘿嘿，主角会跑动了。当然啦，目前只是原地跑步，但是已经向成功迈出了一大步，难到不是吗？

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

作者：深蓝色右手
出处：http://alamiye010.cnblogs.com/
教程目录及源码下载：点击进入(欢迎加入WPF/Silverlight小组　WPF/Silverlight博客团队)
本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。