CHAPTER 4 Images XNA Game Studio 4.0

Objectives Find out how the Content Manager lets you add pictures to Microsoft XNA games. Discover how pictures are manipulated in game programs. Display your pictures on the screen. Make a better version of Color Nerve and an even groovier mood light.

Program Project: Picture Display 1. You need to get the picture that you wish to draw into your game solution so that it becomes part of the program when it is loaded into the target device. 2. You must add code to the program that fetches the image into the program when it runs. 3. You need to tell XNA where on the screen the image is to be drawn. 4. You go ahead and draw the item.

Resources and Content You need to tailor your images to fit the screen of the XNA device you are going to use. The Xbox screen is capable of showing high-resolution images. A high-resolution image is made up of a large number of dots, or pixels.

Resources and Content Make the images as small as you can. This reduces the amount of memory they consume and also reduces the work required to move them around the screen. You won’t usually need very high resolution for your games, so your pictures need be no more than 800 pixels in each direction. The Windows Phone display is available with two resolutions. 480 x 800 pixels and 320 x 480 pixels.

Images Your pictures should be in the Portable Network Graphics (PNG), Windows Bitmap (BMP), or Joint Photographic Experts Group (JPEG) format. The PNG and BMP formats are lossless, in that they always store an exact version of the image that is being held. PNG files can also have transparent regions, which is important when you want to draw one image on top of another. The JPEG format is lossy The image is compressed in a way that makes it much smaller, but at the expense of precise detail. The games that you create should use JPEG images for the large backgrounds and PNG images for the smaller objects that are drawn on top of them.

Content Management Using XNA Content = images, sounds, 3-D models, and video These content items are sometimes referred to as assets.

WORKING WITH CONTENT USING XNA GAME STUDIO XNA Game Studio 4.0

XNA Game Studio Solutions and Projects Whenever you create a project, you should ensure that the option “Create Directory For Solution” is selected. This creates a directory structure that contains the program and all the other items that are required to make the game work. You can think of a solution as a “shopping list” of projects. The solution holds a list of the names of project files. Each of the project files holds a list of the names of the files used in that project. Each item on the list is often referred to as a reference to that item, in that it tells XNA Game Studio how to get to it.

XNA Game Studio Solutions and Projects

You can write code that can be used in more than one solution. Such as a scoring project. You would do this by creating a library project. You can then add that project to your solution.

Adding Content to a Project The solution contains two projects. 1. One contains the program code and 2. the other the content that the game uses When you add an asset to the JakeDisplayContent project, it is stored in this directory

Adding Content to a Project Right-click on Content Folder. Select “Add” Select “Existing Item”

Adding Links to Resources When you add a resource using the process described previously, XNA Game Studio makes a copy of the resource and places the copy in the Content directory of the project. If you want several projects to share a single copy of a resource, you can add a link to it instead. Click the down arrow at the right of the Add button in the Add Existing Item dialog box, as shown in Figure 4-10, which allows you to add the resource as a file or as a link.

Adding Links to Resources

The XNA Content Pipeline The process of feeding resources in at one end and getting a complete game assembly out of the other is a bit like a pipeline. In fact, the XNA Framework refers to this part of the game-building process as the Content Management Pipeline.

USING RESOURCES IN A GAME XNA Game Studio 4.0

Loading XNA Textures Images that you want to draw in your games are called textures. Textures can be drawn as flat pictures, and they can also be wrapped around 3-D models. XNA provides a range of types that are used to deal with textures. The type you’ll use is called Texture2D. This holds a texture that you manipulate in two dimensions; that is, it is drawn on the screen as if it were a flat surface.

Loading XNA Textures The game data takes the form of a single variable that holds the texture. Syntax // The Game World Texture2D jakeTexture; The Draw method draws this texture on the screen. Use the Update method to make the image move around the screen by changing the draw position.

Loading XNA Textures You also can use another method that lets the program take control when the graphics need to be loaded. There is a LoadContent method that is called by XNA when a game starts running.

The LoadContent Method Loads the content that the game needs. Creates a SpriteBatch for the program to use. used to draw the texture on the screen. protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); nameTexture = this.Content.Load (“name of asset"); }

The LoadContent Method When the game starts, XNA calls the LoadContent method to fetch content for use in the game. The method then performs the statement that loads the texture content: jakeTexture = this.Content.Load ("jake"); The Load method is a kind of multipurpose tool called a generic method. Because it’s generic, it can be used to fetch any kind of item, from textures to audio files to 3-D models.

The LoadContent Method If the game had lots of different images, you would declare additional Texture2D items in your game world and assign them to textures using the LoadContent method as well.

Incorrect Asset Name Error If you get the name of the texture wrong, the game program fails in this method, as it is looking for an asset that is not there. The program fails by throwing an exception.

Positioning Your Game Sprite on the Screen A sprite is a flat, preloaded image that is used as part of a computer game. From the point of view of XNA, a sprite is an image resource along with location information that tells XNA where to draw the image. This means that you need a way to tell XNA where on the screen you want to put your sprite.

Positioning Your Game Sprite on the Screen You do this by using yet another XNA type, the Rectangle. This holds information about the position and size of a rectangle. You don’t need to worry about how a rectangle works at the moment; you need only know how to create one and set the size and position of it. The units are called pixels. Pixel, an abbreviation for “picture element,” refers to the smallest dot that can be drawn on the screen.

Positioning Your Game Sprite on the Screen Top, Left Corner (0, 0) 20 30

Positioning Your Game Sprite on the Screen A rectangle is also used to give the width and height of the sprite. XNA scales the image to fit in a rectangle. Syntax to draw your Rectangle rectName = new Rectangle (x, y, width, height) To move the image or change its size on the screen, you need to change only one of the values that is held in the rectangle. These values are members of the Rectangle structure. In C#, members that hold values are called fields.

Positioning Your Game Sprite on the Screen You can think of a field as a variable that has been declared inside a structure or class. In the case of your Game1 class, the game world data that you created (for example, the color intensity values for your mood light) are fields of that class.

The Initialize Method The Initialize method is called when the game starts up. When an XNA game runs, it goes through these steps. 1. Set things up: Initialize 2. Load game content: LoadContent 3. Repeatedly update the game and draw the display: Draw and Update 4. Free up all the content: UnloadContent

The Initialize Method Create the Rectangle object in the Initialize method. protected override void Initialize() { jakeRect = new Rectangle(30, 20, 600, 450); base.Initialize(); }

SPRITE DRAWING WITH SPRITEBATCH XNA Game Studio 4.0

Sprite Drawing with SpriteBatch A modern game console is not one powerful computer; in fact, it is several. Some of these run the game itself, whereas other special graphics processors drive the display. The graphics processor unit (GPU) contains optimized hardware to allow it to update the screen as fast as possible. When the Draw method runs, the method assembles a bunch of instructions for the GPU and sends the instructions into the GPU. The GPU then follows those instructions to put a picture on the screen.

Sprite Drawing with SpriteBatch Complex games contain many images that may be drawn at several different positions on the screen. It is important that the transfer of the position information and associated images is organized as efficiently as possible. XNA provides a special class called SpriteBatch to batch up a set of sprite-drawing instructions.

Sprite Drawing with SpriteBatch Your program calls methods on a SpriteBatch variable to get the drawing done. This means that a SpriteBatch needs to be created for the program to use. When XNA Game Studio creates a new project, it adds the statements to the LoadContent method that create a SpriteBatch for you to use. The variable is called spriteBatch. NOTE: spriteBatch & SpriteBatch are different!

Sprite Drawing with SpriteBatch You must tell spriteBatch when you’ve started drawing sprites and when you’ve finished. You call methods on the spriteBatch variable to begin the draw process, draw the sprite, and then end the drawing. protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); spriteBatch.Draw(jakeTexture, jakeRect, Color.White); spriteBatch.End(); base.Draw(gameTime); }

Sprite Drawing with SpriteBatch spriteBatch.Draw(jakeTexture, jakeRect, Color.White); The Draw method is part of the SpriteBatch class and is given parameters that identify the image to be drawn, the rectangle to place it in, and the color of the light to “shine” on the texture.

Filling the Screen To create a Rectangle that will fill the screen. jakeRect = new Rectangle( 0, // X position of top left corner 0, // Y position of top left corner GraphicsDevice.Viewport.Width, // rectangle width GraphicsDevice.Viewport.Height); // rectangle height GraphicsDevice.Viewport.Width gets the width GraphicsDevice.Viewport.Height gets the height

Intellisense Whenever you type an identifier into the editor, it finds the Variable that the identifier represents and offers you options based on that identifier. Intellisense also shows you brief help snippets about the items that you can select.

GAME IDEA: COLOR NERVE WITH A PICTURE XNA Game Studio 4.0

Game Idea: Color Nerve with a Picture The key to this is the way that you select the color you want to use to “light” any sprite that you draw: spriteBatch.Draw(jakeTexture, jakeRect, Color.White); protected override void Draw(GameTime gameTime) { Color textureColor; textureColor = new Color(redIntensity,greenIntensity,blueIntensity); spriteBatch.Begin(); spriteBatch.Draw(jakeTexture, jakeRect, textureColor); spriteBatch.End(); base.Draw(gameTime); }