XNA4.0学习笔记1：XNA解析及精灵动画

关注

原创最新推荐文章于 2026-05-22 23:01:42 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

XNA4.0 RPG游戏开发：从入门到实战游戏开发框架是构建电子游戏的基础架构，XNA作为微软推出的轻量级框架，通过托管代码和内容管道简化了2D/3D游戏开发流程。其核心原理基于.NET平台，提供图形渲染、输入处理和音频管理等模块化组件。在RPG游戏开发领域，XNA特别适合实现角色系统、地图渲染和对话管理等典型功能，通过Texture Atlas优化和对象池技术可有效提升性能。本教程以实际工程实践为例，详解如何使用XNA4.0开发完整RPG项目，包含角色属性设计、Tile-based地图实现等热频技术点，并分享跨平台移植到MonoGame的解决方案阅读详情

XNA框架及精灵动画

XNA是微软开发的一款用于window，xbox，windows phone等设备上的游戏开发框架，他的特点是方便快捷的开发游戏，提供给我们很多的游戏开发套件，摒弃了传统的游戏引擎多文件多目录的繁琐，使我们用起来容易上手，在wp8 SDK发布之后，目前微软已经表示wp8不再支持用XNA开发游戏，但是会完全兼容XNA游戏，所以XNA游戏还是可以在这些平台上运行（这点感觉微软有点坑爹）！

学习要求：XNA游戏开发主要是采用C#语言，但是要求不是很高，只需要我们掌握基础的语法加上一定的利用API开发的经验就可以开始学习了！本博文系列的教材是《XNA4.0入门指南》，算是总结性质的吧，结合教材看效果更佳！

我的系统环境是windows 8，开发IDE用的是windows phone7.1 SDK，该开发包里面已经集成了XNA4.0的开发套件，也集成了简易的开发环境VS2010 express for windows phone！所以没有必要再VS2010的基础上安装7.1SDK，对于开发环境的搭建网上已有很多教程，在这里我就不累述了.这里附上windows phone 7.1SDK的官方下载地址 windows phone 7.1 SDK 接下来开始我们的XNA游戏开发之旅：

1：第一个XNA程序

工程创建：新建项目—XNA game studio 4.0—windows游戏完成之后工作区如图所示

在这几个目录中，我们暂时只需要关注两个目录，一个是Programs.cs和Game1.cs，前面一个是主函数文件，他是游戏程序的入口点，说实话我们暂时不需要用他，后者才说我们的重点，点开目录，看到的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace WindowsGame5
{
    /// <summary>
    /// 这是游戏的主类型
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// 允许游戏在开始运行之前执行其所需的任何初始化。
        /// 游戏能够在此时查询任何所需服务并加载任何非图形
        /// 相关的内容。调用 base.Initialize 将枚举所有组件
        /// 并对其进行初始化。 
        /// </summary>
        protected override void Initialize()
        {
            // TODO: 在此处添加初始化逻辑

            base.Initialize();
        }

        /// <summary>
        /// 对于每个游戏会调用一次 LoadContent，
        /// 用于加载所有内容。
        /// </summary>
        protected override void LoadContent()
        {
            // 创建新的 SpriteBatch，可将其用于绘制纹理。
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: 在此处使用 this.Content 加载游戏内容
        }

        /// <summary>
        /// 对于每个游戏会调用一次 UnloadContent，
        /// 用于取消加载所有内容。
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: 在此处取消加载任何非 ContentManager 内容
        }

        /// <summary>
        /// 允许游戏运行逻辑，例如更新全部内容、
        /// 检查冲突、收集输入信息以及播放音频。
        /// </summary>
        /// <param name="gameTime">提供计时值的快照。</param>
        protected override void Update(GameTime gameTime)
        {
            // 允许游戏退出
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            // TODO: 在此处添加更新逻辑

            base.Update(gameTime);
        }

        /// <summary>
        /// 当游戏该进行自我绘制时调用此项。
        /// </summary>
        /// <param name="gameTime">提供计时值的快照。</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: 在此处添加绘图代码

            base.Draw(gameTime);
        }
    }
}

在这段代码中您会注意到自动提供了几个类成员变量，还有Game1的构造方法和其它五个方法。其中第 1 个类成员变量是GraphicsDeviceManager类的对象。这是一个非常重要的对象，它为开发者提供了一种访问 PC、Xbox 360 或者 Windows Phone 7 上的图形设备的途径。 GraphicsDeviceManager的GraphicDevice属性代表了机器上实际的图形设备。图形设备对象在 XNA 游戏和显卡（或更准确的说，显卡上的 GPU10）之间起中介作用，XNA 游戏在屏幕上做的任何事情都要通过这个对象来执行！

第 2 个类成员变量是SpriteBatch类的实例，这是一个您将用来绘制精灵（Sprite）的核心对象。

Initialize 方法被用来初始化变量和其它与 Game1 对象相关的对象。

LoadContent 方法在 Initialize 方法之后被调用，另外在任何需要重新载入游戏图形内容的时候也会被调用， LoadContent 方法中，将会载入游戏所需要的一切图形及其它内容，包括图像、模型和音效等。当然UnLoadContent方法就是用来清理一些资源的！

当 LoadContent 方法调用完成后，Game1 对象将进入游戏循环。。在 XNA 中，游戏循环只包含两个方法：Update 方法和 Draw 方法。目前您可以这样理解游戏循环：所有影响游戏的逻辑都将在 Update 方法或 Draw 方法中完成。其中drew用来绘制图形 update用来更新图形！

以下便是XNA程序执行的顺序：

我们先运行一下该项目看看什么效果：

我们可以看到屏幕就是一个窗口，什么都没有，而且屏幕背景颜色的蓝色的，顾名思义，这个蓝色肯定跟我们的draw方法脱不了干系，我们回过头看看draw的代码，发现这样一句：

GraphicsDevice.Clear(Color.CornflowerBlue);

他表示利用了当前的图形设备对象的一个成员函数clear，并且在参数中使用了蓝色，如果在这里把蓝色改成黑色，背景就自然的变成黑色了

2：在项目中添加一个精灵

在这里可以自己找一张图片，在解决方案资源管理器中的WindowsGameContent中新建一个文件夹Images,然后在我们创建的文件夹里面添加一张图片，XNA支持的格式多样，常见的都可以，在Images目录下会有一个图片文件，但是没有扩展名，这是XNA默认的去掉扩展名作为该图片的ID，下面就可以添加到代码中了：

1：在 Game1.cs 代码文件中的 GraphicDevice Manager 和 SpriteBatch 的变量声明下面添加一个 Texture2D 变量： Texture2D texture;

其中Texture2D是一个存储2D文件的对象

2：就像之前说的那样，所有图像、声音和其它内容资源的加载都在 LoadContent 方法中完成。添加以下代码到 LoadContent 方法中：

texture = Content.Load<Texture2D>(@"Images/logo");

这里也可以这样写，效果是一样的：

texture = Content.Load<Texture2D>("Images//logo"); 就是指初始化texture变量！接下来就可以直接使用texture变量表示这张图片了！

3：XNA 中所有的绘制工作都要在 Draw 方法中完成，因此请添加以下三行代码到 Draw 方法中，位于 Clear 方法的调用之后：

spriteBatch.Begin();
spriteBatch.Draw(texture, Vector2.Zero, Color.White);
spriteBatch.End();

相信有过win32 SDK编程经验的都熟悉这种写法，在win32 SDK编程中对于WM_PAINT消息响应都是一个begin 一个end 之间写出需要响应的窗口重绘代码，这里的spriteBatch

是在您创建项目的时候被声明，然后在 LoadContent 方法中被初始化。这里发生的事情就是 XNA 用 SpriteBatch 对象的 Begin 和 End 方法通知图形设备将要发送一个精灵（或 2D 图像），这个可以死记！

第二行的Draw方法中第一个是需要绘制的2D对象，第二个是绘制的位置，这里Vector2是一个2D矢量类，zero是她的一个成员，默认为0，也就在左上角（0,0），第三个参数表示是否需要用颜色覆盖2D对象，这里的White表示不覆盖！

好了，运行一下程序：

在这里我把clear的颜色变为了黑色，然后用PS把图片编辑为透明背景的，所以出现这个结果！运行就看到了XNA的logo，挺漂亮的！

居中问题：

如果需要把图片居中，我们只需要改变draw第二个参数，该参数表示显示位置，指的是图片的左上角顶点的位置，这里需要利用两个新的成员，

spriteBatch.Draw(

texture,
new Vector2(Window.ClientBounds.Width/2 - texture.Width/2,
Window.ClientBounds.Height/2 - texture.Height/2),
Color.White

);

这里把第二个参数改为了自定义的坐标，其中windows.ClientBounds表示屏幕窗口的尺寸类，利用它的width和height就可以得到屏幕的长和宽，Texture2D对象内部本身也有标示2D对象的长和宽，利用这些成员，我们就可以把图片显示在屏幕中间！

3：关于精灵的一些属性变换（旋转，多张重叠，透明度，缩放）

上面在draw函数中利用了spriteBatch的成员函数draw的一个相对简单的版本，实际上他有很多重载版本，下面我们看看他的另一个版本：

Texture Texture2D 要绘制的纹理.

Position Vector2 绘制图像的左上角坐标.

SourceRectangle Rectangle 允许您绘制原始图像的一部分,这里使用 null.

Color Color 染色颜色. Rotation float 旋转图像，现在使用 0.

Origin Vector2 指定旋转的参照点.现在使用 Vector2.Zero.

Scale float 缩放比例,使用 1 代表按照原始尺寸绘制,1.5f 表示放大图像到 150%.

Effects SpriteEffects 使用 SpriteEffects 枚举来垂直或水平翻转图像.

LayerDepth float 允许您指定图像的层叠次序(哪张图像在其它图像之上).现在使用 0. 。0 相当于 Z 次序的前面，1 表示 Z 次序的后面。

可以看到他们的参数是很多的，对于透明度我们都是用PS来加工，所以一般不使用，缩放扩大也很简单，我主要说一下多张图片在一起重叠的时候是什么个情况！

按照同样的方法再多加一张图片到我们的项目，并用texture1来存储，经过LoadContent函数之后，draw函数里面的代码如下所示：

protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.Black);

            spriteBatch.Begin(SpriteSortMode.BackToFront,BlendState.AlphaBlend); 
            spriteBatch.Draw(texture,
                new Vector2(Window.ClientBounds.Width / 2 - texture.Width / 2,
                    Window.ClientBounds.Height / 2 - texture.Height / 2),
                null,
                Color.White,
                0,
                Vector2.Zero,
                1.5f,
                SpriteEffects.None,
                0);

           
            spriteBatch.Draw(texture1,
                new Vector2(Window.ClientBounds.Width / 2 - texture1.Width / 2,
                    Window.ClientBounds.Height / 2 - texture1.Height / 2),
                null,
                Color.White,
                0,
                Vector2.Zero,
                1f,
                SpriteEffects.None,
                1);
            spriteBatch.End();

            // TODO: 在此处添加绘图代码

            base.Draw(gameTime);
        }
    }
}

我们把透明背景的那张扩大为1.5倍，这样方便看出效果，把最后一个参数设置为0和1，一张在前面，一张被覆盖在后面，这里我们透明在前，不透明在后，运行结果：

可以看到运行结果并不是我们想的那样，为什么会这样勒？结果是先绘制的被后绘制的覆盖，显然不合我们的程序，经过查看Z次序详细说明，我们知道了要使用Z次序排列图片的重合问题，需要在begin函数中说明需要使用Z次序!

修改程序代码begin：

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

这里的第一个参数表示Z次序的状态，另一个参数在使用透明图片的时候这样来设置，

再次编译运行：

结果运行就符合我们最初的想法了！（注：由于篇幅有限，这里很多东西参考MSDN）

4：开始简单的移动精灵

前面我们介绍过游戏画面的移动都是在循环里执行的，这里的循环不需要我们自己写，因为她提供给了我们draw和update函数，draw函数参数里面传递了一个gameTime参数，他实际表示帧率，即每一秒重绘多少次，系统默认的是60次，也就是说1秒钟内调用了60次draw函数，每次调用draw函数之后又会调用update函数，一共调用了120次函数来不停的刷新游戏画面，所以我们只需要在update里面加入移动的代码，精灵就会移动起来！

为了移动精灵，我们需要再加入两个Vector2变量来指示当前位置，并用两个float变量表示每一帧的移动速度，整体代码如下（其实也只有初始化，draw和update函数有一定的变化）

namespace WindowsGame4
{
    /// <summary>
    /// 这是游戏的主类型
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Texture2D texture;
        Texture2D texture1;
        Vector2 pos1 = Vector2.Zero;      //表示图片的初始位置
        Vector2 pos2 = Vector2.Zero;

        float speed1 = 2f;               //表示图片每一帧的移动速度
        float speed2 = 3f;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        
        protected override void Initialize()
        {
            // TODO: 在此处添加初始化逻辑

            base.Initialize();
        }

        
        protected override void LoadContent()
        {
            // 创建新的 SpriteBatch，可将其用于绘制纹理。
            spriteBatch = new SpriteBatch(GraphicsDevice);
            texture = Content.Load<Texture2D>("image//logo_trans");
            texture1 = Content.Load<Texture2D>("image//logo"); 
            // TODO: 在此处使用 this.Content 加载游戏内容
        }

        
        protected override void UnloadContent()
        {
            // TODO: 在此处取消加载任何非 ContentManager 内容
        }

       
        protected override void Update(GameTime gameTime)
        {
            // 允许游戏退出
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            pos1.X += speed1;
            if(pos1.X == Window.ClientBounds.Width-texture.Width || pos1.X < 0)
            {
                speed1 *= -1; 
            }

            pos2.Y += speed2;
            if (pos2.Y == Window.ClientBounds.Height - texture1.Height || pos2.Y < 0)
                speed2 *= -1;
            // TODO: 在此处添加更新逻辑

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.Black);

            spriteBatch.Begin(SpriteSortMode.BackToFront,BlendState.AlphaBlend); 
            spriteBatch.Draw(texture,
                pos1,
                null,
                Color.White,
                0,
                Vector2.Zero,
                1f,
                SpriteEffects.None,
                0);

           
            spriteBatch.Draw(texture1,
                pos2,
                null,
                Color.White,
                0,
                Vector2.Zero,
                1f,
                SpriteEffects.None,
                1);
            spriteBatch.End();

            // TODO: 在此处添加绘图代码

            base.Draw(gameTime);
        }
    }
}

那么我们运行就可以看到图片在上下移动：

这里没什么复杂的东西，只是多了绘制更新的代码而已如果需要图片更加复杂的运动，原理也是一样，只是多了复杂的数学运算！！

5：简单的动画效果

也许大家都知道，动画的形成也只是不停的绘制精灵，使他们形成连续播放的效果，在这里我们插入这样一张图片：

可以看到这张图片的每个小位图，连在一起是不是很像动画了，我们现在要做的就是分别把他们显示出来，在这里我们新建一个项目，采取同样的方法加载进这张图片，并用texture变量保存！（同上，不在演示了）

我们在上面的程序中都是讲整张图片显示出来，在这里我们又需要用draw函数的一个参数了，上面已经给出了参数列表，其中有一个我们一直用null,表示全部显示出来，这里我们就需要用到它了！

为了编写这个算法，我们还需要知道这些：

• 精灵位图中每个单独图像(或称为帧）的宽和高（frameSize）。

• 精灵位图的行与列的总数（sheetSize）。

• 指示接下来精灵位图中将要绘制的精灵帧在精灵位图中所处的行与列的位置的索引（currentFrame）。

在我们这里，每个位图的长和宽都是75像素，有8行6列，接下里我们用一个矩形来代替上面的null,但是一个矩形需要知道它的左顶点以及长和宽，为此我们定义如下变量：

Point frameSize = new Point(75, 75);
Point currentFrame = new Point(0, 0);
Point sheetSize = new Point(6, 8);

之所以利用点集，是因为我们这里只是需要成对的存储元素，所以point足够了！

下面请看全部函数的代码：

namespace WindowsGame6
{
    /// <summary>
    /// 这是游戏的主类型
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Texture2D texture;
        Point frameSize = new Point(75, 75);              //表示每个位图的长和宽
        Point currentFrame = new Point(0, 0);             //表示当前该轮到哪个位图绘制
        Point sheetSize = new Point(6, 8);                //指示了最大的长和宽 

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            // TODO: 在此处添加初始化逻辑

            base.Initialize();
        }

        protected override void LoadContent()
        {
            // 创建新的 SpriteBatch，可将其用于绘制纹理。
            spriteBatch = new SpriteBatch(GraphicsDevice);
            texture = Content.Load<Texture2D>("Images//threerings");             //加载位图资源
            // TODO: 在此处使用 this.Content 加载游戏内容
        }

        protected override void UnloadContent()
        {
            // TODO: 在此处取消加载任何非 ContentManager 内容
        }

        protected override void Update(GameTime gameTime)
        {
            // 允许游戏退出
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            ++currentFrame.X;                             //这里执行更新 看不清楚可以一步一步分析
            if (currentFrame.X >= sheetSize.X)
            {
                currentFrame.X = 0;
                ++currentFrame.Y;
                if (currentFrame.Y >= sheetSize.Y)
                    currentFrame.Y = 0;
            }
            // TODO: 在此处添加更新逻辑

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            spriteBatch.Begin(SpriteSortMode.FrontToBack, BlendState.AlphaBlend);
            spriteBatch.Draw(
                texture,Vector2.Zero,
                new Rectangle(currentFrame.X * frameSize.X,   //这里新创一个矩形
                currentFrame.Y * frameSize.Y,
                frameSize.X, frameSize.Y),
                Color.White,
                0,
                Vector2.Zero,
                1,
                SpriteEffects.None,
                0);
            spriteBatch.End();

            // TODO: 在此处添加绘图代码

            base.Draw(gameTime);
        }
    }
}

运行就可以看到三个圈在转动：