11

Making a SpriteSession 4.2

Session Overview

Describe the principle of a game sprite, and see how to create a sprite in an XNA game

Learn more about the lifecycle of an XNA game

Find out how to use the XNA Content Manager to load images into a game when it starts running

Discover how XNA allows draw operations to be batched together to make best use of the graphics hardware supporting the game

Use XNA to draw images on the display

Chapter 4.2: Making a Sprite 2

What Is a Sprite

A sprite is any graphical element in a game that you want to manipulate and display Ghost in PacMan

Alien in Space Invaders

A sprite can also be very large The background display of the game

You can think of a sprite as being made up of an image and a position on the screen.

Chapter 4.2: Making a Sprite 3

Images in XNA

A flat image is manipulated by an XNA program using the Texture2D type

You create variables of this type to represent the images that your game will display

These variables form part of your game world and so the game must contain declarations for them

Chapter 4.2: Making a Sprite 4

// Game WorldTexture2D jakeTexture;// Game WorldTexture2D jakeTexture;

Loading Game Content

When a game starts running it must load all the content it needs

This is not something that should be performed by the Draw or Update methods

Instead XNA provides a LoadContent method that it will call when a game starts running

This method is called once at the start of the game

The LoadContent method of a new project is created as an empty method

Chapter 4.2: Making a Sprite 5

The Role of LoadContent

The LoadContent method is called to put values into the game world data

It is only called once, at the start of the game, before Update and Draw are called.

Chapter 4.2: Making a Sprite 6

The LoadContent method

The LoadContent method provided with a new game project just creates a SpriteBatch value We will look at SpriteBatch later

It contains a TODO to show where to add code to load the content

Chapter 4.2: Making a Sprite 7

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

// TODO: use this.Content to load your game content}

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

// TODO: use this.Content to load your game content}

Loading the Texture

The statement assigns jakeTexture to the value returned by the Load method

We tell the Load method what type of data to fetch (a Texture2D) and the name of the asset (jake)

Chapter 4.2: Making a Sprite 8

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

Loading the Texture

Chapter 4.2: Making a Sprite 9

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

the destination for the assignment

The item at the left of the assignment is always the variable being assigned

Loading the Texture

Chapter 4.2: Making a Sprite 10

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

the equals operator

The = character tells the C# compiler we are performing an assignment

Loading the Texture

Chapter 4.2: Making a Sprite 11

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

a reference to the current game object

The keyword this provides a reference to the game object that is running the LoadContent method

Loading the Texture

Chapter 4.2: Making a Sprite 12

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

the Content Manager for this game

When a game is running it has its own Content Manager which provides methods that can be used to manipulate game content

Loading the Texture

Chapter 4.2: Making a Sprite 13

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

the Load method which is to be called The Load method is called to fetch the asset

We don’t need to worry how it does this, the call just works and returns the requested item

Loading the Texture

Chapter 4.2: Making a Sprite 14

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

the type of resource to be fetched The Content Manager uses a C# mechanism

called generics to allow it to create methods to load the many different resource types

Loading the Texture

Chapter 4.2: Making a Sprite 15

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

jakeTexture = this.Content.load<Texture2D>("jake");}

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

jakeTexture = this.Content.load<Texture2D>("jake");}

the name of the resource added to the project

The name of the resources is a C# string value

You put a string in a C# program by putting some text between two " characters

Loading the Texture

When the game runs the LoadContent method is called at the start

This then creates the SpriteBatch (which we will use later) and then runs our statement to load the texture from the content being managed for this game

Note that we have still not drawn anything though But we are getting closer to doing this

Chapter 4.2: Making a Sprite 16

Bad Asset Names and Runtime Errors

If an asset cannot be found the program will stop

Microsoft Visual Studio will show the statement where the error was detected

This is a runtime error

The game would compile correctly, but fail at run time because the asset can’t be found

Chapter 4.2: Making a Sprite 17

1. Loading an Asset

Chapter 4.2: Making a Sprite 18

Once we have an asset in the game project we can load it into the game

If the asset is not present the game will fail

Positioning a Sprite Using a Rectangle

A sprite is made up of a texture and a position

XNA can use these two pieces of information to draw it on the screen

To express the position of an item XNA provides a type called Rectangle

We need to add a Rectangle value to the game so that we can draw Jake on the screen

This will be another item in the game world

Chapter 4.2: Making a Sprite 19

Adding the Rectangle to the Game World

The game world now contains two variables

Both of them are describing the Jake sprite, but each describes a different aspect of the sprite

I have given them sensible identifiers that also make it clear the type of the data they hold

The C# compiler doesn’t care about this, but software engineers do

Chapter 4.2: Making a Sprite 20

// Game WorldTexture2D jakeTexture;Rectangle jakeRect;

// Game WorldTexture2D jakeTexture;Rectangle jakeRect;

The XNA Display screen

An XNA game might have to run on many different sizes of screen

The PC and the Xbox support lots of screen sizes

The Zune only has one screen size

Chapter 4.2: Making a Sprite 21

The XNA Display Screen Size

When a new XNA game is created for the PC the display size is set at 800 pixels wide and 600 high

The game program can change the size of the display it uses, but we are not going to do this

Chapter 4.2: Making a Sprite 22

800 pixels

600 pixels

The XNA Display Screen Coordinates

You can think of the display area as a graph with the origin in the top left-hand corner the x coordinate gives the distance across the

display

the y coordinate gives the distance down the display

Chapter 4.2: Making a Sprite 23

X

Y

(0,0)

Positioning Jake

I want to draw the picture of Jake 30 pixels across the screen and 20 pixels down the display

This makes the x coordinate 30 and the y coordinate 20

Chapter 4.2: Making a Sprite 24

30

20

(0,0)

(30,20)

Sizing Jake

I’m going to draw the image 600 pixels wide and 450 pixels high

XNA will scale the image to any dimensions I like, even ones which look stretched

Chapter 4.2: Making a Sprite 25

600

450

Constructing the Rectangle

The keyword new causes the construction of a new object

The construction takes place when the program runs, so that jakeRect is set to the Rectangle value that is produced

The construction is performed by a method that is supplied with values to set the Rectangle up

In this case the position and size are given

Chapter 4.2: Making a Sprite 26

jakeRect = new Rectangle(30, 20, 600, 450);jakeRect = new Rectangle(30, 20, 600, 450);

The Initialize Method

The best place to set the value of jakeRect is the Initialize method

This is similar to the LoadContent method

It is called by XNA when a game starts running

We could set jakeRect in LoadContent, but since this is actually one of our game settings and not really associated with content, it is more sensible to do it in the Initialize method

A new XNA project contains an empty Initialize method

Chapter 4.2: Making a Sprite 27

The Initialize Method in Full

This is the code that sets up jakeRect

We will explore the meaning of base.Initialize() later

Now we have the texture and the position we can draw our sprite on the screen

Chapter 4.2: Making a Sprite 28

protected override void Initialize(){ jakeRect = new Rectangle(30, 20, 600, 450); base.Initialize();}

protected override void Initialize(){ jakeRect = new Rectangle(30, 20, 600, 450); base.Initialize();}

Drawing Sprites in XNA with SpriteBatch

XNA provides a type to manage sprite drawing

This type is called SpriteBatch

The SpriteBatch batches up the sprites to be drawn and sends the appropriate instructions to the graphics hardware on the device

This is so the drawing can be performed as efficiently as possible

The SpriteBatch object for a game is created in the LoadContent method

Chapter 4.2: Making a Sprite 29

The Draw Method to Draw the Jake Sprite

This is the complete Draw method to draw Jake on the screen

We can look at each part in turn

Chapter 4.2: Making a Sprite 30

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

Clearing the Background

This statement clears the screen to Cornflower Blue

It is created as part of a new XNA project

Chapter 4.2: Making a Sprite 31

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

Beginning Drawing

This statement tells the SpriteBatch to begin batching up drawing commands

Chapter 4.2: Making a Sprite 32

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

Drawing the Sprite

SpriteBatch provides a Draw method

It is given the texture, the rectangle, and the color of the light to use to illuminate the image

Chapter 4.2: Making a Sprite 33

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

Ending the Batch

When the End method is called SpriteBatch puts together all the Draw requests and send them to the display device

Chapter 4.2: Making a Sprite 34

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

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

spriteBatch.begin(); spriteBatch.draw(jakeTexture, jakeRect, Color.White); spriteBatch.end();

base.draw(gameTime);}

2. Drawing Jake

Chapter 4.2: Making a Sprite 35

We can now draw the picture of Jake

We can also change the color of the light used to draw the image

Summary

A sprite is made up of a texture containing an image, and a rectangle that describes the sprite position on the screen

The LoadContent method is the part of an XNA game that is called to load content

The ContentManager type provides a Load method which can load content into the game

The Rectangle type in XNA can be used to describe a rectangle on the display

The SpriteBatch type manages the drawing

Chapter 4.2: Making a Sprite 36

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left- hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 37

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left- hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 38

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left- hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 39

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 40

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 41

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 42

True/False Revision Quiz

The image to be drawn in a sprite is held in a Rectangle value.

The Content Manager controls the position that a sprite is to be drawn on the display.

The origin of the screen coordinates is the top left hand corner of the display.

Content should be loaded in the Initialize method.

SpriteBatch performs the drawing of the display.

The Draw method is told the color of the sprite.

Chapter 4.2: Making a Sprite 43