使用 XNA 创建游戏/2D 开发/精灵

精灵

什么是精灵？

精灵是二维图像。最著名的精灵是鼠标指针。

精灵不仅用于 2D 游戏，还用于 3D 游戏，例如：

用于启动画面、菜单、爆炸和火焰。这些图形基于以下坐标系。

创建精灵

创建精灵很重要，你应该知道文件可以是 bmp、png 或 jpg。最适合创建精灵的绘画程序是 Adobe Photoshop 等。对于动画，需要使用精灵表。单个动画步骤必须以表格形式排列在文件中。

01	02	03	04
05	06	07	08
09	10	11	12

在 XNA 游戏中使用精灵

添加精灵

将图像添加到项目中，右键单击内容文件

“添加”

新元素——>>位图——>>你可以在 Visual Studio 中绘制自己的位图图形

现有元素——>>..选择你自己的数据结构上的图形

让我们创建一些 Texture2D 对象来存储我们的图像。将以下两行代码作为实例变量添加到我们游戏的 main 类中

Texture2D landscape;
Texture2D star;

将图像加载到我们的纹理对象中。在 LoadContent() 方法中，添加以下代码行

landscape = Content.Load<Texture2D>("landscape1"); // name of your images
star = Content.Load<Texture2D>("star");

使用 SpriteBatch

SpriteBatch 是 2D 绘制的最重要的类。该类包含将精灵绘制到屏幕上的方法。SpriteBatch 具有许多有用的方法，你可以通过 msdna 库找到有关这些类的一切。

Visual Studio 的标准模板已添加一个 SpriteBatch 对象。

main 中的实例变量

SpriteBatch spriteBatch;

LoadContent() 方法中对该 SpriteBatch 类的引用

protected override void LoadContent()
{
    // Create a new SpriteBatch
    spriteBatch = new SpriteBatch(GraphicsDevice);
 
}

方法 Draw()——>很重要

使用 SpriteBatch 绘制^[1]

SpriteBatch.Draw (Texture2D, Rectangle, Color);

SpriteBatch.Draw (Texture2D, Vector, Color);

更多关于 SpriteBatch.Draw

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

            spriteBatch.Begin();

            spriteBatch.Draw(landscape, new Rectangle(0, 0, 800, 500), Color.White);
            spriteBatch.Draw(star, new Vector2(350, 380), Color.White);//normal
 
            spriteBatch.End();
 
            base.Draw(gameTime);
       }

使精灵变小/变大/半透明和/或旋转

必须重载 SpriteBatch.Draw 以减小或放大或旋转或使精灵透明。^[2]

在方法 spriteBatch.Draw() 中，我们可以为颜色值赋予不仅是“Color.White”的值，还有 RGB 甚至 alpha 值。
API：^[3]
SpriteBatch.Draw 方法 (Texture2D, Vector2, Nullable<Rectangle>, Color, Single, Vector2, Single, SpriteEffects, Single)

public void Draw (

Texture2D texture,

Vector2 position,

Nullable<Rectangle> sourceRectangle,

Color color,======>//此值可以具有 alpha 值以实现透明

float rotation,====>//此值是图形旋转的半径

Vector2 origin,===>//此值是图形旋转的点

float scale,======>//此值对于减小或放大精灵很重要

SpriteEffects effects,

float layerDepth

)

更多关于参数的信息，请点击此处

spriteBatch.Draw(star,new Vector2(350,380),Color.White);//normal

spriteBatch.Draw(star,new Vector2(500,(380+(star.Height/2))),null,Color.White,0.0f,new Vector2(0,0),
0.5f,SpriteEffects.None,0.0f);//small

spriteBatch.Draw(star,new Vector2(200,(380-(star.Height/2))),null,Color.White,0.0f,new Vector2(0,0),
1.5f,SpriteEffects.None,0.0f);//bigger

spriteBatch.Draw(star,new Vector2(650,380),null,Color.White,1.5f,new Vector2(star.Width/2,star.Height/2),
1.0f,SpriteEffects.None,0.0f);//rotate

spriteBatch.Draw(star,new Vector2(50,380),new Color(255,255,255,100));//semitransparent

动画精灵

首先，制作一个精灵表，其中显示了运动序列，例如走、跳、弯曲、跑..

接下来添加一个名为AnimateSprite的新类，并添加以下变量。

    public Texture2D Texture;     // texture

    private float totalElapsed;   // elapsed time

    private int rows;             // number of rows
    private int columns;          // number of columns
    private int width;            // width of a graphic
    private int height;           // height of a graphic
    private float animationSpeed; // pictures per second

    private int currentRow;       // current row
    private int currentColumn;    // current culmn

该类包含三个方法：LoadGraphic（加载纹理并设置变量）、Update（用于更新或移动动画）和 Draw（用于绘制精灵）。

LoadGraphic

在此方法中，将分配所有变量和纹理。

public void LoadGraphic(
      Texture2D texture,
      int rows,
      int columns,
      int width,
      int height,
      int animationSpeed
      )
    {
        this.Texture = texture;
        this.rows = rows;
        this.columns = columns;
        this.width = width;
        this.height = height;
        this.animationSpeed = (float)1 / animationSpeed;

        totalElapsed = 0;
        currentRow = 0;
        currentColumn = 0;
    }

^[4]

Update

在此，将更新动画。

public void Update(float elapsed)
    {
        totalElapsed += elapsed;
        if (totalElapsed > animationSpeed)
        {
            totalElapsed -= animationSpeed;

            currentColumn += 1;
            if (currentColumn >= columns)
            {
                currentRow += 1;
                currentColumn = 0;

                if (currentRow >= rows)
                {
                    currentRow = 0;
                }
            }

        }
}

^[5]

Draw

在此，将绘制当前帧。

public void Draw(SpriteBatch spriteBatch, Vector2 position, Color color)
    {
        spriteBatch.Draw(
            Texture,
            new Rectangle((int)position.X, (int)position.Y, width, height),
            new Rectangle(
              currentColumn * width,
              currentRow * height,
              width, height),
            color
            );
    }
}

^[6]

在游戏中使用

将代码添加到类 Game1 中
main

AnimateSprite starAnimate;

LoadContent

starAnimate = new AnimateSprite();
starAnimate.LoadGraphic(Content.Load<Texture2D>(@"spriteSheet"), 3, 4, 132, 97, 4);

Update

starAnimate.Update((float)gameTime.ElapsedGameTime.TotalSeconds);

Draw

starAnimate.Draw(spriteBatch, new Vector2(350, 380), Color.White);

绘制文字字体

将字体添加到项目中，右键单击内容文件

“添加”

“新元素..”

SpriteFont

此文件是 XML 文件，其中给出了字体、字体大小、字体效果（粗体、斜体、下划线）、字母间距和要使用的字符。

从这些数据中，XNA 创建了位图字体。要使用德文字符，必须将结束值设置为 255。^[7]

main 中的实例变量

SpriteFont font;

在 LoadContent() 方法中

font = Content.Load<SpriteFont>("SpriteFont1"); //name of the Sprite(Look Content)

在 Draw() 方法中

spriteBatch.DrawString(font, "walking Star!", new Vector2(50, 100), Color.White);

作者

SuSchu - Susan Schulze

有用的网站

http://www.xnadevelopment.com/tutorials.shtml
http://msdn.microsoft.com/en-us/library/bb203893.aspx
http://rbwhitaker.wikidot.com/2d-tutorials
http://www.xnamag.de/articles.php?cid=5

参考资料

[1] ttp://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.aspx

[2] ttp://www.xnamag.de/article.php?aid=10

[3] ttp://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.draw.aspx

[4] ttp://www.xnamag.de/article.php?aid=14

[5] ttp://www.xnamag.de/article.php?aid=14

[6] ttp://www.xnamag.de/article.php?aid=14

[7] ttp://rbwhitaker.wikidot.com/drawing-text-with-spritefonts

[1]

[2]

[3]

[4]

[5]

[6]

[7]