1. Graphical Output
Basic Images

2. Introduction
This topic will be an introduction into including basic imagery into your game
In games we typically refer to a 2D image as a sprite.
When animating a sequences of images we will not keep them in separate files, but rather we will keep them all together organized in a grid. We call this type of image a sprite sheet.
However, since an individual image is a special case 1x1 grid we will call all of our images sprite sheets for our purposes

3. Project Setup
Find your project in the project explorer and browse until you find the res folder, short for resources
Inside this folder is an images folder which contains a backgrounds folder and a sprites folder.
This is where all of your images will be stored and organized
To do this, simply use Windows as normal and find that res folder.
Copy all of your images in the appropriate folders
Back in Eclipse, right-click on your project and choose Refresh
All of your images should now show up and be usable
This same strategy is used for other resources like sounds later on.

4. GameEngine: SpriteSheet
The Game Engine given to you already has sprite logic built in. It allows you to have an image on the screen in only 4 simple steps:
Define a variable to hold the sprite sheet (Global variable)
Load the sprite sheet into memory (In Load Content)
Set the location and size of where to draw the sprite sheet (In Load Content)
Draw the sprite sheet (In Draw)
1. Define the Global Variable
The data type is SpriteSheet and it needs a descriptive identifier
E.g. SpriteSheet backgroundImg;
E.g. SpriteSheet starImg;

5. GameEngine: SpriteSheet
2. Load the Sprite Sheet
Inside LoadContent you need to load the sprite sheet into your variable
To do this we need a new command LoadImage.FromFile(file location)
Example: Assuming an image named background.png in the backgrounds folder
backgroundImg = new SpriteSheet(LoadImage.FromFile(“/images/backgrounds/background.png”);
What we can see here, is that the project assumes you are looking for the image in the res folder, you simply need to fill in the rest.

6. GameEngine: SpriteSheet
3. Set the location and size of where to draw the sprite sheet
This task is also done in LoadContent, AFTER the image is loaded
To complete this task you need to understand that what we are really defining is a container.
Think of it as an invisible rectangle that fits tightly around our sprite to be drawn. We will sometimes refer to this container as the bounding box.
This means that the image will stretch itself to fill the exact dimensions of the bounding box.
The top-left corner of the rectangle is the coordinate we specify when setting our sprite sheet’s location.

7. GameEngine: SpriteSheet
3. Set Location and Size – Continued
The SpriteSheet variable is an object made up of many properties and capable of many actions
For our purposes, we will assign a new Rectangle value to the destRec attribute of our SpriteSheet
destRec is short for destination rectangle, the invisible container the final drawn image will be in
Example for a Background image: located at (0,0) with the size of the entire game screen retrieved using the GetWidth, GetHeight commands
backgroundImg.destRec = new Rectangle(0,0, gc.GetWidth(), gc.GetHeight());
Example of a single image located at (100,300) and half its actual size
starImg.destRec = new Rectangle(100,300, (int) (starImg.GetFrameWidth() * 0.5), (int) (starImg.GetFrameHeight() * 0.5);
A few notes on the last example:
It should all be on one line, it simply doesn’t fit here in PowerPoint
The size values are converted to int values because multiplying by 0.5 turns the result into a double and a Rectangle can only handle int values

8. GameEngine: SpriteSheet
4. Draw the sprite sheet
This is done in Draw and the easiest step
Simply call the command: Draw.Sprite(gfx, spriteSheetVariableName);
Example:
Draw.Sprite(gfx, backgroundImg);
Draw.Sprite(gfx, starImg);
Remember that order matters, all drawn items are layered with the first command being the bottom layer

9. GameEngine:SpriteSheet
As the SpriteSheet variable is an object, it is capable of a number of actions: These actions should be done in Update or LoadContent
Assuming your SpriteSheet variable is named starImg:
starImg.Rotate(5);  Rotates the image by 5 degrees from current angle
starImg.RotateTo(180);  Rotates the image to 180 degrees
starImg.FlipHorizontally();  Flips the image horizontally
starImg.FlipVertically();  Flips the image vertically
startImg.SetTransparency(0.3f);  Sets transparency to 30% opaque
And MANY more that will be used in animation