Week2 - Introduction to sprites

Start Files Used: robotStanding.png robotWalking.png

Finished Project: Week2.zip


  • I send out an email list every Tuesday to remind everyone of the workshop and also to announce what we will be covering that week. If you want to be on the mailing list, send me an email and tell me you want to be on the SIGXNA email list. My email address is jared(dot)robertson(at)aggiemail(dot)usu(dot)edu.
  • In order to complete this tutorial, you should be familiar with creating a new XNA project as well as loading content. Both of these things were covered in week 1.
  • I'm not going to go over every line of code we typed in the project, but I will point to specific places in the completed project where the effect takes place.
  • We started from a new project. We also included the two above images in the project (robotStanding.png, robotWalking.png).
    • You'll notice that both the images are "png" file extensions. PNG files don't suffer from reduced image quality due to compression like jpgs and also allow blank pixels.
  • Went over how sprites are drawn - the top left pixel is (0,0) and width and height increase to the right and down.
  • Reviewed the SpriteBatch class and how to draw a sprite to the screen.
  • We created a class to hold all the information for each sprite we will use. The class is called GameObject and is listed below. Each one of the properties is just a parameter that goes into the spriteBatch.Draw() method. We will be making changes to many of these values to make the desired effect.
public class GameObject
public GameObject(Texture2D texture)
    Texture = texture;
    Position = Vector2.Zero;
    Color = Color.White;
    SourceRectangle = null;
    Rotation = 0.0f;
    Origin = new Vector2(texture.Width / 2, texture.Height / 2);
    Scale = 1.0f;
    SpriteEffects = SpriteEffects.None;
    LayerDepth = 0.0f;
public void Draw(SpriteBatch spriteBatch)
public Texture2D Texture { get; set; }
public Vector2 Position { get; set; }
public Color Color { get; set; }
public Rectangle? SourceRectangle { get; set; }
public float Rotation { get; set; }
public Vector2 Origin { get; set; }
public float Scale { get; set; }
public SpriteEffects SpriteEffects { get; set; }
public float LayerDepth { get; set; }
  • Went over 5 different things that can be done to alter an image
  • Coloring - In Game1.Update(), the following lines change the color. The first line creates a float called tint. tint should be a value between 0 and 1. It takes the sin of the number of seconds that the game has been running. If you remember your trig, the sign of a number is a value between -1 and 1. We then divide the number by 2 and add 0.5 so that the value is between 0 and 1. In the second line of code, we create a new Color that takes 3 parameters, the red, green, and blue (RGB) values of the color. We set R to 1.0, or 100%. We set G and B to tint, so it will be some value between 0 and 1. This will give us the effect of the robot oscillating between red and its normal color.
float tint = (float)Math.Sin(gameTime.TotalGameTime.TotalSeconds * 4) / 2.0f + 0.5f;
robotTint.Color = new Color(1.0f, tint, tint);
  • Transparency - Very similar to coloring except that instead of changing the G and B values of the color, we change its transparency, or alpha value. We use a different overload of Color this time. It takes a Color object - we'll just use what it was before. The second parameter is tint, which is just some value between 0 and 1. This changes the transparency of the image to somewhere between 0 and 1.
robotTransparent.Color = new Color(robotTransparent.Color, tint);
  • Rotating - A tutorial for rotating sprites can be found here.
  • Resizing - Resizing the sprites requires changing the Scale attribute. We again use the tint value and set Scale to be tint + 0.5. If you remember, tint is some value between 0 and 1 and if we ever set the scale to 0 we won't be able to see it, so we'll just add 0.5 to the value so we can see it get bigger and smaller.
robotScale.Scale = tint + 0.5f;
  • Animating - Animating is the most complicated thing we did with sprites and there is a good tutorial for it here.

back to SIGXNA

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License