使用 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]