Game Creation with XNA/2D Development/Sprites

From Wikibooks, open books for an open world
Jump to: navigation, search

Sprites[edit]

What are Sprites?[edit]

Sprites are two dimensional image.The best known sprite is the mouse pointer.

Sprites are not only used in 2D games but sprites are also used in 3D games for example,

for splash screens, menus, explosions and fire.These graphics based on the followed coordinate system.

Koordinatensystem.jpg

Creating Sprites[edit]

my sprite "star"

Important to creating a Sprite you should know that the file can be bmp, png or jpg. Most suitable are painting programms for creating Sprites such as Adobe Photoshop. For animations sprite sheets are necessary. Individual animation steps must be arranged in tabular form in the file.

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



SpriteSheet.png

Using of Sprites in XNA Games[edit]

Add Sprites[edit]

add the image to the project right click on the content file

"add"
new element-->> bitmap -->> you can draw in visual studio your own bitmap graphic
existing element-->> ..select a graphic on your own data structure



Let's create a few Texture2D objects to store our images. Add the following two lines of code as instance variables to our game's main class:

Texture2D landscape;
Texture2D star;



load the images into our texture objects. In the LoadContent() method, add the following lines of code:

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


Using SpriteBatch[edit]

SpriteBatch is the most important class of 2D drawing. The class contains methods for drawing sprite onto the screen. SpriteBatch have many usefull methods you can find all about these class by msdna libary.

The standard template of Visual Studio already has added a SpriteBatch object.

the instance variables in the main:

SpriteBatch spriteBatch;


a reference to this SpriteBatch class in the LoadContent() method:

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



method Draw()-->important

drawing with SpriteBatch[1]

SpriteBatch.Draw (Texture2D, Rectangle, Color);
SpriteBatch.Draw (Texture2D, Vector, Color);

more about 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);
       }


DrawPicture.jpg

Make Sprites smaller /bigger /semitransparent and/or rotate[edit]

SpriteBatch.Draw must be overloaded to reduce or enlarge or rotate or make transparent Sprites.[2]

In the method spriteBatch.Draw() we can give to a color value not only "Color.White" but also RGB and even an alpha value.
API:[3]
SpriteBatch.Draw Methode (Texture2D, Vector2, Nullable<Rectangle>, Color, Single, Vector2, Single, SpriteEffects, Single)

public void Draw (

Texture2D texture,
Vector2 position,
Nullable<Rectangle> sourceRectangle,
Color color,======>//this value can have an alpha value for transparent
float rotation,====>//this value is the radius at which the graphic is rotate
Vector2 origin,===>//this value is the point at which the graphic is rotate
float scale,======>//this value is important to reduce or enlarge sprites
SpriteEffects effects,
float layerDepth

)

more about the parameters find here

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


ChangeStar.jpg

Animated Sprites[edit]

First, make a sprite sheet in which a motion sequence is shown for example go, jump, bend, run ..


MakeSpriteSheet.png


Next add a new class named AnimateSprite and add the follow variables.

    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



The class consists of three methods: LoadGraphic (loading of the texture and set the variable), Update (for updating or moving animation) and Draw (to draw the sprite).


LoadGraphic

In this method, the entire variable and the texture are assigned.

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

Here, the animation is updated.

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

Here is the current frame is drawn.

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]


Using in Game

add Code to class 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);


Drawing Textfonts[edit]

add the Font to the project right click on the content file

"add"
"new element.."
SpriteFont


This file is an XML file, in which font, font size, font effects (bold, italics, underline), letter spacing and characters to use are given.

From these data, XNA created the bitmap font. To use German characters have to set the end value to 255.[7]


the instance variables in the main:

SpriteFont font;


in the LoadContent() method:

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


in the Draw() method:

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


DrawFont.jpg

Authors[edit]

SuSchu -- Susan Schulze

Usefull Websites[edit]

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

References[edit]