Keeping images on the screen
Instead of George Washington, let's use a ball. Use Paint.NET to create a solid red ball that
is approximately 100 pixels in diameter, like this:
The blue line is not part of the picture.
Save the ball as a PNG file with the name ball.png.
Create a new XNA program called BouncingBall. Add the ball to the content of your
program.
In the declaration area, create a Rectangle variable for the screen. We will always do this
from now on:
Rectangle screenRectangle;
In the declaration area, create a variable for the ball and a rectangle for positioning it on the
screen:
Texture2D ballTexture;
Rectangle ballRectangle;
In the Initialize method, initialize your Rectangles:
screenRectangle = new Rectangle(0, 0, 800, 480);
ballRectangle.X = 400;
ballRectangle.Y = 240;
ballRectangle.Width = 50;
ballRectangle.Height = 50;
In the LoadContent method, load the ball image into the ballTexture variable.
ballTexture = Content.Load<Texture2D>("ball");
In the Update method, add the following instructions to move the ball:
ballRectangle.X++;
ballRectangle.Y++;
Finally, in the Draw method, add the following instructions to draw the ball:
spriteBatch.Begin();
spriteBatch.Draw(ballTexture, ballRectangle, Color.White);
spriteBatch.End();
Run the program.
The first thing you notice is that our ball doesn't look too good! It's a red ball in a white box!
For the ball to look good, we need to make the white go away. That's easy to do. Use
Paint.NET to open the ball.png file again. The image below has been zoomed to 300%.
Select the magic wand tool:
Set the tolerance for the magic wand tool to 10%:
Click on each of the four white corners with the magic wand tool, and press the Delete key
on the keyboard after clicking on each corner. This will delete the white and make the
resulting area transparent. When an area in Paint.NET is transparent, a grey and white
checkerboard background will be visible, like this:
JPEG files are not allowed to have transparent regions, but PNG files are, which is why we
will use PNG files for most of the sprites we create. JPEG files, however, are fine for
backgrounds, which usually do not need transparent regions.
When you add an image with transparent regions to an XNA project, the transparent regions
will allow the background to show through, which will make our ball round, not square.
If we leave the ball red, we will always get a red ball in our program. But if we change its
color to white, we can color it any color that we want.
Use the magic wand, and again set its tolerance to about 10%. Click on the red ball. The
entire ball should be selected. Select the paint bucket tool. In the color palette, click on
white. Click the bucket inside of the ball and it will turn to white.
Save the image again. You will have to delete the existing image from your program's
content. Right-click on the Content item, and click on Delete.
Then add your newly-edited image. We have only changed the content that the program
uses; we have not changed the instructions, so there are no changes that need to be made
to the program code. Just run the program. You should get a nice round ball with
transparent corners this time. Like this:
The ball still goes off the bottom of the screen after about 10 seconds, though. We want to
make the ball bounce. Like this:
To make the ball bounce off the bottom of the screen, we need to quit adding to the Y
coordinate and start subtracting from it. Note that the X coordinate continues to be
incremented.
If we wait for the Y coordinate of the rectangle to get to 480 and then start decrementing,
the ball will disappear off the bottom of the screen! Instead, we want to start decrementing
the Y coordinate when the bottom of the ball touches the bottom of the screen. How do we
know when the bottom of the ball reaches the bottom of the screen? We know that the
bottom of the screen is 480. And we know that the height of our ball is 50 pixels. So when
the ball's Y coordinate gets to 430 (480 – 50), we know it is time to reverse course.
When the ball bounces off the bottom of the screen, its speed goes from +1 to -1. And
when it bounces off the top of the screen, its speed goes from -1 to +1. And it will continue
to alternate back and forth between +1 and -1 forever. We will need a new variable to keep
track of the speed in the Y direction. Add the following to the declaration area of your
program:
int ySpeed;
And add the following to the Initialization method:
ySpeed = 1;
This will set our initial speed to +1 (and the vertical direction will be down).
We also need to make a change in the Update method. We must change our statement
where we update the Y coordinate:
ballRectangle.Y++;
ballRectangle.Y += ySpeed;
So far, we haven't changed the behavior of the program at all. All we have done is change
the way we update the Y coordinate. To get the ball to "bounce" off of the bottom of the
screen, add the following code to the Update method:
if (ballRectangle.Bottom >= screenRectangle.Bottom)
ySpeed = -ySpeed;
This will change the value of the ySpeed variable from +1 to -1 whenever the bottom of the
ball (rectangle) touches the bottom of the screen.
Run the program. Note that we still have a problem with the ball disappearing off the right
edge of the screen. We need to make the same changes for the X coordinate.
Add the following to the declaration area of the program:
int xSpeed;
And add the following to the Initialize method:
xSpeed = 1;
In the Update method, change the instruction to increment the X coordinate:
ballRectangle.X++;
ballRectangle.X += xSpeed;
And, add the following bounce the ball off the right edge of the screen:
if (ballRectangle.Right >= screenRectangle.Right)
xSpeed = -xSpeed;
Run the program. The ball should bounce off the bottom of the screen and off the right edge
of the screen. We still have problems with the top edge and the left edge. To fix this, write
two more if statements and put them in the Update method.