11 making a sprite session 4.2. session overview describe the principle of a game sprite, and see...
TRANSCRIPT
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