Texture, Sprite, 2D GraphicsTexture, Sprite, 2D Graphics

Tran Minh Triet – Nguyen Khac HuyFaculty of Information TechnologyUniversity of Science, VNU-HCM

Game Flow (1)Game Flow (1)

LoadContentStart

Update

Draw

EndUnloadContent

Game Flow (2)Game Flow (2)

InitializeLoadContentUnloadContentUpdateDraw

Sprite and Texture2DSprite and Texture2D

Display 2D ImagesDisplay 2D ImagesLoading a Texture using SpriteBatch

Rendering Multiple Images to the Screen

Drawing an Image into a RectangleColor Modulation

Rotate, Scale, Mirror an ImageRotate, Scale, Mirror an Image

Display TextDisplay Text

Create a SpriteFont file

Add a SpriteFont variable to your class

String Length

Display TextDisplay Text

Adding a Sprite to Your ProjectAdding a Sprite to Your ProjectCreate Images folder within ContentAdd an image to Images folderBuilding your solution

Show properties window of the imageRemember Asset Name

Loading and Drawing Your SpriteLoading and Drawing Your Sprite

Adding a Texture2D variableTexture2D texture;

Loading the actual image filetexture = Content.Load<Texture2D>(

@"Images/threerings");

Drawing within the Draw method spriteBatch.Begin( );spriteBatch.Draw(texture,

Vector2.Zero,Color.White);spriteBatch.End( );

Loading and Drawing Your SpriteLoading and Drawing Your Sprite

Draw method’s parameterspublic void Draw (

Texture2D texture, Vector2 position, Color color )

texture The sprite texture. position The location, in screen coordinates, where the sprite will be drawn. color The color channel modulation to use. Use Color.White for full color with no tinting.

Transparency and Other OptionsTransparency and Other Options

Two ways to render portions of images transparently

Having a transparent background (*.png)

The portion of the image to be transparent must be solid magenta (255, 0, 255)

Layer DepthLayer Depth

The ordering of these overlapping images as the Z-orderChange option to draw in the order specified

spriteBatch.Begin ( SpriteBlendMode blendMode, SpriteSortMode sortMode, SaveStateMode stateMode )

blendMode Blending options to use when rendering. sortMode Sorting options to use when rendering. stateMode Rendering state options.

Layer DepthLayer DepthSpecify the layer depth value in the Draw

methodpublic void Draw (

Texture2D texture, Vector2 position, Nullable<Rectangle> sourceRectangle, Color color, float rotation, Vector2 origin, float scale, SpriteEffects effects, float layerDepth

)

Let’s MoveLet’s Move

AnimationAnimation

AnimationAnimation

AnimationAnimation

AnimationAnimation

AnimationAnimation

Drawing current frame

Point frameSize = new Point(75, 75);Point currentFrame = new Point(0, 0);Point sheetSize = new Point(6, 8);

spriteBatch.Draw(texture, Vector2.Zero, new Rectangle(currentFrame.X * frameSize.X, currentFrame.Y * frameSize.Y, frameSize.X, frameSize.Y), Color.White, 0, Vector2.Zero, 1, SpriteEffects.None, 0);

AnimationAnimation

Moving next frame

++currentFrame.X;if (currentFrame.X >= sheetSize.X){ currentFrame.X = 0; ++currentFrame.Y; if (currentFrame.Y >= sheetSize.Y) currentFrame.Y = 0;}

Framerate, Animation SpeedFramerate, Animation Speed

Framerate speedThe default is 60 frames per second (fps)Change the framerateTargetElapsedTime = new TimeSpan(0, 0, 0, 0, 50);

Animation Speed - Add two class-level variables to track the time between animation frames.

timeSinceLastFrame: track how much time has passed since the animation frame was changedmillisecondsPerFrame: specify how much time you want to wait before moving the current frame index.

Framerate, Animation SpeedFramerate, Animation Speed

int timeSinceLastFrame = 0;int millisecondsPerFrame = 50;

timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds;

if (timeSinceLastFrame > millisecondsPerFrame)

{ timeSinceLastFrame -=

millisecondsPerFrame;// move to next frame

}

Q&AQ&A

?

ReferencesReferences

XNA SpriteBatch classhttp://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.draw.aspx

EbookLearning XNA 3.0O’reilly, Aaron Reed, 2008