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，嘿嘿，主角会跑动了。当然啦，目前只是原地跑步，但是已经向成功迈出了一大步，难到不是吗？

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

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：目录
本系列教程的示例代码下载(感谢银光中国提供资源分流): 第一部分源码:WPFGameTutorial_PartI(1-20节) 第二部分源码:WPFGameTutorial_PartII(21-2 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二)让物体动起来②
第二种方法,CompositionTarget动画,官方描述为:CompositionTarget对象可以根据每个帧回调来创建自定义动画.其实直接点,CompositionTarget创建的动画是基于 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(一)让物体动起来①
序:自从QXGame(WPF GAME ENGINE)游戏引擎公布以来,受到很多朋友的热切关注,于是乎有了写教程的想法.那么从今天开始,我将带领大家一步一步的学会如何使用纯C#开发WPF/Silver ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(十八) 完美精灵之八面玲珑(WPF Only)②...
紧接着上一节,首先得解释一下为什么需要将这272张图片合成为一张大图.因为如果游戏中还有装备.坐骑等其他设置,那么我们就需要对图片源进行时时的合成:同时对272张甚至更多的图片进行合成效率高还是对2张 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二十五)完美捕捉精灵之神器 -- HitTest...
怪物们都出现了,如何选中自己心仪的怪是主角目前首要做的事. 为了进行鼠标状态区别,我首先对鼠标变化规则进行约束:当鼠标在屏幕上空旷地图区域移动时,鼠标光标形态表现为默认光标 (0号光标图片),当鼠标经 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十九) 落雷！治疗！陷阱！连锁闪电！多段群伤！魔法之终极五重奏②...
本节,我将完成本教程示例游戏的最终两个魔法:传说中的连锁闪电与暴风雪.如此经典与华丽的家伙无论在哪款好游戏中都少不了它们的踪影. 首先是连锁闪电,在<英雄无敌>中体现得尤为出色,击中一个怪 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二十六)通用型角色头像面板...
目前游戏的开发进度已经基本实现了精灵对象之间的普通交互,接下来我们需要朝着实现战斗系统的目标前行.而实现它的前提是必须完善精灵控件的基本属性,如添加生命值.魔法值.活力值.经验值等基本属性并通过窗体界 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十七)远距离单体攻击与单体魔法...
到目前为止,主角能使用的魔法均为群攻型魔法,群攻魔法的原理相对简单,常见如圆形范围,矩形范围,扇形范围等等,当魔法释放后可以按照本教程的做法对所有坐标处于相应范围内的怪物进行伤害处理,这是直观的处理方 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(十)斜度α地图的构造及算法...
在当前的网络游戏中,地图基本都是采取一定斜度的拼装地图,这其中存在两种斜度地图的构造方式: 第一种我称之为伪斜度地图:该类型地图表现层图片为斜度的,但地图基底障碍物等的构造则实为正方形,如下图: 其实 ...

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

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

最新文章

热门文章