通过上面几节的学习,慢慢的掌握了精灵的一些基本常识,但是我们知道游戏中游戏精灵都是富于表现能力的,并且通过不同的动作或者动画去构造一个游戏。

这篇文章将学习如何使用系列图为游戏精灵添加动画效果,以下面这一系列图为例,将其分割显示:

--这个图片是偷 深蓝 的

这是一张png图片,我们还是需要把它加载到纹理图形中,可以考虑如何在精灵位图上轮流获得独立的精灵帧。以下编写这个精灵帧所要先得到的信息:

  • 精灵位图中每个单独图像(帧)的宽和高
  • 精灵位图的行与列的总数
  • 指示接下来精灵位图中将要绘制精灵帧在精灵位图中所处的行与列的位置索引

上面的那张精灵位图中,每个单独精灵帧的宽和高都是150像素,有10行1列。所以我们要绘制它显示在窗口上,就得从第一个精灵帧开始绘制。而这时候我们就要编写下面的三行代码用来控制精灵帧的切换:

 Point frameSize = new Point(150, 150);    //每帧的长与高
        Point currentFrame = new Point(0, 0);   //初始化第一帧
        Point sheetSize = new Point(10, 1);     //定义一个10 列1行的point ,本图片一共有一列10个小人
                                                  //如果有多列则相应改动后面的1

上篇文章我们有使用SpriteBatch.Draw 的重载方法,其中参数三是一个Rectangle 对象,上篇我们不设置矩形范围,所以给定一个NULL。而本便我们需要使用一个 Rectangle 对象来算出该位置的源矩形。添加下面的代码:

 spriteBatch.Begin(SpriteSortMode.FrontToBack, BlendState.AlphaBlend);

spriteBatch.Draw(enemy,//纹理图像
                new Vector2((graphics.GraphicsDevice.Viewport.Width/2)-(frameSize.X/2), 
                    (graphics.GraphicsDevice.Viewport.Height/2)-(frameSize.Y/2)), //将系列图放在屏幕中间播放
                new Rectangle(
                    currentFrame.X * frameSize.X,//当前的帧点的x 轴乘以每行移动的宽度得到该矩形从屏幕哪个坐标画
                    currentFrame.Y * frameSize.Y, //当前的帧点的Y 轴乘以每行移动的高度得到该矩形从屏幕哪个坐标画 
                    frameSize.X,//需要画该矩形块的宽度为系列图每格小人物的宽度
                    frameSize.Y),//需要画该矩形块的高度为系列图每格小人物的高度
                    Color.White,
                    0,  //旋转图像,按角度旋转图像,0为不旋转,依次类似1、2、3、4、5等
                    Vector2.Zero,//指定旋转的参照点
                    1,  //缩放比例,这里是按默认比例绽放
                    SpriteEffects.None, //不翻转图像
                    0   //纹理层深度
                    );
            spriteBatch.End();

如果按照上面的代码写在Draw 里面的话,还是没有动画效果的,因为我们一直重复的上面这张精灵位图的第一帧,为了产生动画,还必须在Update 里面完成状态的更新:

 ++currentFrame.X;   //将下标要画的X坐标剃增,即改变该列的位置向下个位置转移
                if (currentFrame.X >= sheetSize.X)    //如果下标大于或者等于系列图的当前列的数量
                {
                    currentFrame.X = 0; //重新将下标初始化为0
                    ++currentFrame.Y;   //将将下标要画的Y坐标剃增,即改变该列的位置向下个位置转移
                    if (currentFrame.Y >= sheetSize.Y)    //如果当前的要跳的行大于或等于该系列图的总行数
                    {
                        currentFrame.Y = 0;     //重新将其初始化为0
                    }
                }

这个时候,可以ctrl+F5 运行游戏,看看效果。

尽管游戏看起来动画效果不错。但有没有发现这个动画的轮换速度也太快了,因为游戏每秒更新30次状态这个己经是很快的速度了。为了使其能够按照我们要求的速度进行精灵位图切换,我们可以在Update 的时候做下小手脚,使其动画速度为可控状态,看代码:

 int timeSinceLastFrame = 0;             //用来追踪上一帧之后经过多少时间
        int millsecondPreFrame = 100;        //用来指定在移动当前的帧索引之前想要等待的时间隔

修改后的Update 方法,应该是这样子的:

 protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds;    //每次累加游戏的时间
            if (timeSinceLastFrame > millsecondPreFrame)    //如果大于需要等待的时间
            {
                timeSinceLastFrame -= millsecondPreFrame;       //重新加累加的时间初始化
                ++currentFrame.X;   //将下标要画的X坐标剃增,即改变该列的位置向下个位置转移
                if (currentFrame.X >= sheetSize.X)    //如果下标大于或者等于系列图的当前列的数量
                {
                    currentFrame.X = 0; //重新将下标初始化为0
                    ++currentFrame.Y;   //将将下标要画的Y坐标剃增,即改变该列的位置向下个位置转移
                    if (currentFrame.Y >= sheetSize.Y)    //如果当前的要跳的行大于或等于该系列图的总行数
                    {
                        currentFrame.Y = 0;     //重新将其初始化为0
                    }
                }
            }
           
            // TODO: Add your update logic here

base.Update(gameTime);
        }

这时,我们再来看看这个效果:

下一篇将会学习到关于用户输入和碰撞检测方面的知识。

转载于:https://www.cnblogs.com/TerryBlog/archive/2011/03/23/1992912.html

【WP7进阶】——XNA游戏精灵的动画相关推荐

  1. 【WP7进阶】——XNA游戏精灵放大、旋转、层深度

    游戏很多都是涉及到操纵游戏精灵的相关知识,本篇还是根据游戏精灵的一些常用知识做的学习,下面是本文大纲: 精灵界面居中 精灵放大并且旋转 纹理的层深度 精灵在界面居中 上篇文章我们为游戏添加一个背景图片 ...

  2. WP7平衡球游戏开发教程--初识XNA Faeseer Magic

    小时候,我就想要自己做游戏,今天的技术已经发展得如此便利,我们可以很容易地创建简单的游戏.本文试图建立一个可重用的基于组件的游戏框架,减少了我们建立基于物理引擎的XNA游戏所需的时间. 我认为我们应该 ...

  3. xnawindowsphCocos2d-x for XNA游戏引擎全面支持WP7

    近日,开源社区cocos2d-x.org针对微软移动操作系统WindowsPhone7平台发布了一款新的游戏引擎,并正式命名为cocos2d-xforXNA.从此,开发者无需学习XNA绘图接口就可采用 ...

  4. 【Unity】入门学习笔记180604——游戏动画设计(1)——概述/精灵对象动画

    1.动画分类 ①刚体动画 ②骨骼动画 ③精灵动画: ④物理动画:物理系统 ⑤变形动画:网格状态混合或通过平滑方式从一帧合并至另一帧的不同状态中去 ⑥视频动画:视频纹理 ⑦粒子动画 ⑧可编程动画:Ani ...

  5. XNA游戏开发之2D游戏

    摘要:以XNA为基础的游戏可以利用3D模型为游戏加入动画效果,也可以利用简单的程序技巧将2维图片显示成动画.虽然2维动画相对3维动画来说简单一些,但是制作出来的游戏其趣味性和挑战性也绝不逊色.今天我们 ...

  6. Cocos2D研究院之精灵与动画

    转载自雨松MOMO程序研究院本文链接地址:Cocos2D研究院之精灵与动画(六) 通过对导演.场景.层和节点的剖析,现在我们已经可以写出一个完整的游戏体系了,在实际应用中,场景一般都是作为游戏的关卡, ...

  7. XNA游戏:Hello XNA

    下面创建一个简单的Windows Phone 7的XNA 程序,只是一个Hello XNA的文本,从屏幕的左上角一直往右下角移动,通过该例子来开始Windows Phone 7 XNA的游戏编程. 新 ...

  8. Win8 Metro App里玩XNA:移植XNA游戏到Win8

    Win8 Metro App里玩XNA:移植XNA游戏到Win8   Ready ! 在本文中,将把一个WindowsPhoneXNA的游戏移植到Win8 Metro(Modern)风格上,直接在Wi ...

  9. 第六章 DirectX 2D游戏和帧动画(上)

    目前,我们已经掌握了如何使用DirectX绘制四边形,纹理映射技术,以及正交摄像机的内容.对于2D游戏的开发,这些内容基本上已经足够了.2D游戏的本质就是图像游戏,2D游戏中的动画其实就是一系列连续动 ...

  10. XNA游戏:手势触控

    在XNA游戏中使用到手势触控操作时,需要引入using Microsoft.Xna.Framework.Input.Touch; 空间,在该空间下下面两个类在触控编程中会用到. TouchLocati ...

最新文章

  1. Golden Software Surfer 17中文版
  2. CSS基础笔记(w3school)
  3. 从零开始——PowerShell应用入门(全例子入门讲解)
  4. MySQL binlog三种模式
  5. Flutter与JS的双向调用、Flutter中Widget与Html混合加载
  6. 什么是软件质量管理的底层逻辑?
  7. 手撕Boost!Boost公式推导及实验验证
  8. cad动态块制作翻转_cad动态块拉伸制作方法,单开门动态块制作教程具体分析
  9. ckplayer在线播放流媒体
  10. vbScript实现开机后的开心网自动登陆
  11. nuc8i7beh黑苹果_Intel NUC8i7BEH 黑苹果Hackintosh EFI引导
  12. 最新调研-持续集成和持续交付解决方案市场现状研究分析与发展前景预测报告
  13. 基于STM32使用PWM调速控制直流电机
  14. 丰巢取快递系统(二)
  15. mysql dbms是什么_数据库管理系统(DBMS)是用来做什么的?
  16. stormzhang
  17. 【C数据结构】单链表的实现以及链表和顺序表的优缺点
  18. 100秒图解区块链:从共享乘车到总统大选,它将如何颠覆世界?
  19. 华为服务器如何配置管理IP
  20. 八、C语言的基本结构—选择结构

热门文章

  1. pythom打包文件太大_PDF太大,不让上传怎么办?教你1分钟将100M的PDF变成10M
  2. Python[装饰器]
  3. SRNTT:Image Super-Resolution by Neural Texture Transfer
  4. 凸优化第九章无约束优化 9.1无约束优化问题
  5. 《基 于 N Gram 的无词典 中文分词算法》 n-gram读感
  6. 【ML小结13】最大熵模型
  7. python 学习小结(1)
  8. 【2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017)】Knightsbridge Rises【最大流+路径输出】
  9. LaTeX中的魔法注释
  10. 工控安全| 西门子S7-300攻击分析