Playing with Sprites

XNA Game Lifecycle

In the faceBall demo program we bounced a smiley face around the graphical display against a background image. The sprite drawing method used included three parameters:

Texture2D faceTexture,

Vector2 facePosition,

Color.White.

protected override void Draw(GameTime gameTime){ spriteBatch.Begin(); spriteBatch.Draw(backgroundTexture, new Rectangle(minX, minY, maxX, maxY), Color.White); spriteBatch.Draw(facesTexture, facePosition, Color.White);

spriteBatch.End(); base.Draw(gameTime);}

Simple Sprite Display

protected override void Draw(GameTime gameTime){ spriteBatch.Begin(); spriteBatch.Draw(backgroundTexture, new Rectangle(minX, minY, maxX, maxY), Color.White);

spriteBatch.Draw(facesTexture, facePosition, blit, Color.White); spriteBatch.End(); base.Draw(gameTime);}

Displaying a Region of a Sprite Sheet

170

360

faces.bmp

We can define a rectangular blitting region (we'll call it blit) that represents a region of a sprite sheet. In the demo program faceBall2.zip one of the eight faces in the sprite sheet faces.bmp is selected randomly to be displayed. The variable blit is defined as a Rectangle

blit.X = 2*90, blit.Y= 1*85

if (rnd.Next(1000)>990){ i = rnd.Next(4); j = rnd.Next(2); blit.X = i * 90; blit.Y = j * 85;} 

Sample code placed in Update( ) method. Changes blit position when random value > 1000.

Rectangle blit = new Rectangle(0, 0, 90, 85); 

protected override void Draw(GameTime gameTime){ spriteBatch.Begin(); spriteBatch.Draw(backgroundTexture, new Rectangle(minX, minY, maxX, maxY), Color.White); spriteBatch.Draw(facesTexture, facePosition, blit, Color.White, spriterot, spriteorigin, spritescale, spriteeffects, 0); spriteBatch.End(); base.Draw(gameTime);}

Additional Effects with Sprites

Another version of spriteBatch.Draw lets us specify the rotation of the sprite, reset the point of display and center of rotation (origin) and the scale (i.e. size) of the sprite being drawn. Demo program is faceBall3.zip

Texture2D facesTexture,Vector2 facePosition,Rectangle blit,Color.White,float spriterotVector2 spriteoriginfloat spritescaleSpriteEffects spriteeffects

range of values 0.0 to 2p radians (6.28..)

set the center position (and center of rotation)size of sprite is multiplied by value of spritescaledefined as a float by MSDN and MS2010 help but appears to be limited to value 0.

Sprite Scale and Rotation Demo

faceBall3.zip

Animated Sprites

In addition to moving sprite images around in the game viewport and rotating a sprite, we can display a sequence of images for a sprite that show it changing shape or orientation.

This sequence of sprite images can be loaded onto a single sprite sheet from which individual sprite images can be blitted onto the display window.

The three rings (from O`Riley) sprite sheet shown here is a sequence of 48 images of an animated sprite. We will use this sprite sheet to generate an animated sprite of spinning rings in the demo project named whirlygig.zip

int count = 0;int rownum, colnum;

count += 1;if (count > 47) count = 0;rownum = count / 6;colnum = count % 6;blit.X = colnum * 79 + 1;blit.Y = rownum * 79 + 1;

Typically the sprite sheet has the image sequence in a two-dimensional pattern. We want to display each image in sequence.

OK, here's the trick. You run an integer count from 0 through 1-n where n is the number of images in the sprite animation sequence. For our rings sequence there are 48 images in a 6x8 array.

The sprite sheet is 476x634 pixels so each image is about 79 x 79 pixels. We need to determine the upper-left corner of each image so we will use the count to step through the rows and columns of the 2D array of images.

For example when count = 34 we want the 79x79 pixel image whose upper-left corner is at

X = 79 x (23 % 6) and Y = 79 x (23 / 6) (integer div)

The code shown here permits is to compute the upper-left corner X,Y position of each of the 48 sprite images using the count from count=0 through count= 47.

Accessing Animated Sprite Images from a 2D Sprite Sheet