请选择 进入手机版 | 继续访问电脑版
查看: 1670|回复: 5

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

[复制链接]
发表于 2012-2-4 10:38:43 | 显示全部楼层 |阅读模式
通过前面的学习,我们掌握了如何动态创建物体移动动画,那么接下来我将介绍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,嘿嘿,主角会跑动了。当然啦,目前只是原地跑步,但是已经向成功迈出了一大步,难到不是吗?

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


该贴已经同步到 LEE的微博
回复

使用道具 举报

发表于 2016-5-14 12:03:37 | 显示全部楼层
努力~~各位。。。











http://mallshop.org/  http://feijipiaodinggouwang.com/  http://tehranmusic313.com/  http://4399ai67k7kn94.com/
回复 支持 反对

使用道具 举报

发表于 2018-7-26 22:50:27 | 显示全部楼层
我觉得挺好的,大家的看法呢











網路散文   http://www.gfgfgf.com.tw/ynzz.htm   2018年07月26日 北京
中醫    男生髮型 http://www.uni-hankyu.com.tw/  唯美詩句   中醫藥酒       http://www.gfgfgf.com.tw/mzyy/zy/  祝賀詞大全
回复 支持 反对

使用道具 举报

发表于 2018-9-3 23:21:46 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2018-9-27 16:07:05 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册 用百度帐号登录

本版积分规则

Archiver|手机版|小黑屋|BimCad Inc. ( 京ICP备15064117号

GMT+8, 2018-10-23 23:00 , Processed in 0.139317 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表