Textures, Rectangle, Vector2 and comments

Still doing that static thing with images.  Also my previous blog on a static image was missing a line of code, so I have a class of students trying to figure out what I did wrong.  As to the rest of you, thanks for not telling me that I made a mistake. 

Today, let’s see if I can do a really simple discussion of how to use Rectangles with Textures.  It is a way to program, some designer do it differently.

First, we are going to use the fish images I found somewhere (and will put in a zip file, so if there isn’t a zip file let me know):

  Here is the fish.  It is also included in the zip file.  As well as second one for you to experiment with.

Adding the images

Add the fish to your project, your project will look slightly different, right click on the Project that says (Content) to the right, then select Add and then Existing Item.  This will add the image to the content project that is required in every XNA project.  You can another fish or image or even use a copy of the same one, just make sure to rename it to Fish2.

Browse to an image you have collected from the web and select it.  Change the filename to fish1, this way we don’t have to change the code.  Normally you would change the asset name, but in this case to make it easy this should work.  Make sure to add the second image or fish named fish2.

Repeat this for another image and name this image fish2

Add Class Members directly after the Class Definition

The Class Definition is:

• public class Game1 : Microsoft.Xna.Framework.Game
• Class Members are added after the first brace after the Class Definition.

Code Snippet

1. public class Game1 : Microsoft.Xna.Framework.Game
2.     {
3.         /************************************
4.          * Class Members, in this area of the
5.          * code includes the class members, that is
6.          * fields such as int, float, string
7.          * object variable declarations such as
8.          * Texture2D, and so forth
9.          ************************************/
10.         GraphicsDeviceManager graphics;
11.         SpriteBatch spriteBatch;
12.         /*********************************************
13.          * User Added Variables
14.          *
15.          * The use of Summary Comments means that the
16.          * intellisense will remind you of what the
17.          * variables do.  Not important at the time
18.          * you program, but important when you come
19.          * back to troubleshoot later
20.          *********************************************/
21.         /// <summary>
22.         /// Texture for the Fish Image
23.         /// </summary>
24.         Texture2D t_Fish1, t_Fish2;
25.         /// <summary>
26.         /// Vectors for the fish images
27.         /// </summary>
28.         Vector2 v_Fish1, v_Fish2;        
29.         /// <summary>
30.         /// Rectangle for the Fishies
31.         /// </summary>
32.         Rectangle r_Fish1;
33.         /***********************************************/
34.         /***********************************************/

Initialize variables

Now we need to initialize the object variables that we have declared:

Code Snippet

1. protected override void Initialize()
2.         {
3.             /************************************************
4.              * Two different ways to do the vector locatoin
5.              * First way uses a separate X and Y
6.              * Second way uses a single number for both X and Y
7.              ************************************************/
8.             v_Fish1 = new Vector2(100, 100);
9.             v_Fish2 = new Vector2(300);
10.             /************************************************/
11.             /************************************************
12.              * Rectangle is initialized so that it can be used
13.              * to demonstrate the way to use a rectangle to
14.              * scale an image
15.              ************************************************/
16.             r_Fish1 = new Rectangle(100, 100, 140, 50);
17.             /************************************************/
18.             
19.  
20.             base.Initialize();
21.         }

LoadContent

In this case we are loading the Texture2D with the asset “Fish1”, which we loaded into the (Content) part of the project:

Code Snippet

1. protected override void LoadContent()
2.         {
3.             // Create a new SpriteBatch, which can be used to draw textures.
4.             spriteBatch = new SpriteBatch(GraphicsDevice);
5.             /************************************************
6.              * Load the Image of the fish, the "Fish1"
7.              * uses the Asset name of the image, by default
8.              * it is the Filename, but you can change it.
9.              ***********************************************/
10.             t_Fish1 = Content.Load<Texture2D>("Fish1");
11.             t_Fish2 = Content.Load<Texture2D>("Fish2");
12.             /***********************************************/
13.  
14.             // TODO: use this.Content to load your game content here
15.         }

Draw

Now we need to draw the image, we use the rectangle, which has the location included in the r_Fish1 when we initialize the rectangle.

Code Snippet

1. protected override void Draw(GameTime gameTime)
2.         {
3.             GraphicsDevice.Clear(Color.CornflowerBlue);
4.  
5.             // TODO: Add your drawing code here
6.             /************************************************
7.              * Draw the sprites, the spriteBatch could be one
8.              * or it could be many controlled by other classes
9.              * Must begin with Begin and stop with an End
10.              ************************************************/
11.             spriteBatch.Begin();
12.             spriteBatch.Draw(t_Fish1, r_Fish1, Color.White);
13.             spriteBatch.Draw(t_Fish2, v_Fish2, Color.White);            
14.             spriteBatch.End();
15.  
16.             base.Draw(gameTime);
17.         }

This is fun!

What do we get?

Here is what you will see if you use two fishes, one of the images that I used had a background and the other didn’t.  One of the fish (the smaller one) is inside of a rectangle, which is one of the ways to scale the image up or down.  Rectangles also give you a way to test for collisions.