11 Making a Sprite Session 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  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 Sprite2

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.  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 Sprite3

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  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 Sprite4 // Game World Texture2D jakeTexture; // Game World Texture2D 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  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 Sprite5

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.  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 Sprite6

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  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 Sprite7 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 )  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 Sprite8 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); }

Loading the Texture Chapter 4.2: Making a Sprite9 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("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 Sprite10 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } the equals operator  The = character tells the C# compiler we are performing an assignment

Loading the Texture Chapter 4.2: Making a Sprite11 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("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 Sprite12 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("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 Sprite13 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("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  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 Sprite14 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("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 Sprite15 protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("jake"); } protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load ("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  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  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 Sprite16

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  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 Sprite17

1. Loading an Asset Chapter 4.2: Making a Sprite18  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  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  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 Sprite19

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  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 Sprite20 // Game World Texture2D jakeTexture; Rectangle jakeRect; // Game World Texture2D 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  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 Sprite21

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  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 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  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 Sprite23 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  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 (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  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

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  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 Sprite26 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  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 Sprite27

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  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 Sprite28 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  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 Sprite29

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  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 Sprite30 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  This statement clears the screen to Cornflower Blue  It is created as part of a new XNA project Chapter 4.2: Making a Sprite31 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 Sprite32 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  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 Sprite33 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 Sprite34 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 Sprite35  We can now draw the picture of Jake  We can also change the color of the light used to draw the image  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  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 Sprite36

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.  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 Sprite37

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.  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 Sprite38

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.  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 Sprite39

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.  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 Sprite40

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.  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 Sprite41

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.  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 Sprite42

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.  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 Sprite43