11 Working with Images Session 10.1

Session Overview  Find out more about image manipulation and scaling when drawing using XNA  Start to implement an “Image Scaling” game  Discover how to write C# methods that can work on parameters and return values as results  See how to design a program so that methods you create can be properly tested, and create a test harness for a method  Find out more about image manipulation and scaling when drawing using XNA  Start to implement an “Image Scaling” game  Discover how to write C# methods that can work on parameters and return values as results  See how to design a program so that methods you create can be properly tested, and create a test harness for a method Chapter10.1: Working with Images2

Game Idea: “Image Zoom”  You can create a game by displaying a zoomed- in portion of an image  The game then slowly zooms out of the picture so that more and more is visible  The first person to identify the picture is the winner  You can create a game by displaying a zoomed- in portion of an image  The game then slowly zooms out of the picture so that more and more is visible  The first person to identify the picture is the winner Chapter10.1: Working with Images3

Image Display Positioning  When we position a texture for drawing we use a Rectangle which gives the position and size  The rectangle above is designed to exactly fill the screen  XNA will scale the texture when it is drawn to fit the rectangle it is given  When we position a texture for drawing we use a Rectangle which gives the position and size  The rectangle above is designed to exactly fill the screen  XNA will scale the texture when it is drawn to fit the rectangle it is given Chapter10.1: Working with Images4 jakeRect = new Rectangle( 0, // X position of top left hand corner 0, // Y position of top left hand corner GraphicsDevice.Viewport.Width, // rectangle width GraphicsDevice.Viewport.Height); // rectangle height

Growing an Image  This version of Update changes the width and height of the rectangle used to draw Jake  Each time it is called the width and height of the display rectangle are increased  This version of Update changes the width and height of the rectangle used to draw Jake  Each time it is called the width and height of the display rectangle are increased Chapter10.1: Working with Images5 protected override void Update(GameTime gameTime) { jakeRect.Height++; jakeRect.Width++; base.Update(gameTime); }

1. Jake Zoom In Chapter10.1: Working with Images6  This program displays a picture of Jake and then slowly increases the size of the display rectangle  XNA does not care if the display rectangle is larger than the screen  This program displays a picture of Jake and then slowly increases the size of the display rectangle  XNA does not care if the display rectangle is larger than the screen

Creating a Zoom Out  The zoom-in program shows the principle of the zoom behavior, but it is going in the wrong direction  We want a game that zooms out from a tiny detail, rather than zooming in on one  This means that we should start with a large drawing rectangle and make it smaller  The zoom-in program shows the principle of the zoom behavior, but it is going in the wrong direction  We want a game that zooms out from a tiny detail, rather than zooming in on one  This means that we should start with a large drawing rectangle and make it smaller Chapter10.1: Working with Images7 jakeRect = new Rectangle( 0, // X position of top left hand corner 0, // Y position of top left hand corner 6000, // rectangle width (10 * image width) 4500); // rectangle height (10 * image height)

A Display Rectangle Larger than the Screen  The draw rectangle is now so big that we will only see one part of it on the screen Chapter10.1: Working with Images8

Zooming Out from an Image  This version of Update changes the width and height of the rectangle used to draw Jake  Each time it is called the width and height of the display rectangle are decreased, causing more of the image to be displayed  This version of Update changes the width and height of the rectangle used to draw Jake  Each time it is called the width and height of the display rectangle are decreased, causing more of the image to be displayed Chapter10.1: Working with Images9 protected override void Update(GameTime gameTime) { jakeRect.Height--; jakeRect.Width--; base.Update(gameTime); }

2. Jake Zoom Out Chapter10.1: Working with Images10  We can modify our zoom-in program to zoom in the opposite direction  However, it doesn’t quite work properly  We can modify our zoom-in program to zoom in the opposite direction  However, it doesn’t quite work properly

Zoom Problems  The program does provide a zoom behavior, but it is not quite right:  The zooming is very slow at the start  The zoom process seems to distort the image  We need to fix these problems to make a proper zoom game  The program does provide a zoom behavior, but it is not quite right:  The zooming is very slow at the start  The zoom process seems to distort the image  We need to fix these problems to make a proper zoom game Chapter10.1: Working with Images11

Failed Zooming  Because the path followed by the bottom corner of the image is not the diagonal of the image, the picture ends up distorted Chapter10.1: Working with Images12

Correct Zooming  If the change in size follows the diagonal of the picture, the zoom will work correctly Chapter10.1: Working with Images13

Percentages Are the Answer  It turns out that what we want to do is change the width and the height by a percentage each time  If we take 1% off the width and height of the rectangle each time we update it, this will make sure that the shape of the image is retained as it changes  It will also solve the problem of the speed at which the size of the rectangle changes  When the rectangle is very large it will reduce in size by a greater amount each time  It turns out that what we want to do is change the width and the height by a percentage each time  If we take 1% off the width and height of the rectangle each time we update it, this will make sure that the shape of the image is retained as it changes  It will also solve the problem of the speed at which the size of the rectangle changes  When the rectangle is very large it will reduce in size by a greater amount each time Chapter10.1: Working with Images14

Calculating Percentages  We have been advised to create a method to calculate the percentage values for us  This will allow us to explore how methods work and how we can create our own and add them into objects  We have used lots of methods provided by the creators of XNA and C#, now it is time to create one of our own  We are going to call the method getPercentage  We have been advised to create a method to calculate the percentage values for us  This will allow us to explore how methods work and how we can create our own and add them into objects  We have used lots of methods provided by the creators of XNA and C#, now it is time to create one of our own  We are going to call the method getPercentage Chapter10.1: Working with Images15

Anatomy of a Method  We have already seen that a method has a name/header at the top and a block of code  This is how the Draw and Update methods that we have used are formed  Now we are going to create the header for the getPercentage method and then write a block of code to implement its behavior  We have already seen that a method has a name/header at the top and a block of code  This is how the Draw and Update methods that we have used are formed  Now we are going to create the header for the getPercentage method and then write a block of code to implement its behavior Chapter 2.1: The Anatomy of a Game Program16 Block of Code Header

An Empty getPercentage Method  This version of getPercentage will compile correctly and even run, but it won’t do anything useful  We will need to go back and fill it in later with statements that perform the calculation  This version of getPercentage will compile correctly and even run, but it won’t do anything useful  We will need to go back and fill it in later with statements that perform the calculation Chapter10.1: Working with Images17

The Type of the Method  This is the type of the method  We want the method to return an integer result, and so we have made the method type integer  We will see how results are returned in a little while  This is the type of the method  We want the method to return an integer result, and so we have made the method type integer  We will see how results are returned in a little while Chapter10.1: Working with Images18 int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result; int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result;

The Identifier for the Method  This is the identifier for the method  It must describe what the method does, and whether it returns anything  This is the identifier for the method  It must describe what the method does, and whether it returns anything Chapter10.1: Working with Images19 int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result; int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result;

The Percentage Parameter  A parameter feeds a value into a method  Within the method the parameter can be regarded as a local variable set to the value given when the method was called  The parameter list can be empty if none are needed  A parameter feeds a value into a method  Within the method the parameter can be regarded as a local variable set to the value given when the method was called  The parameter list can be empty if none are needed Chapter10.1: Working with Images20 int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result; int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result;

The inputValue Parameter  The getPercentage method needs to be given the percentage and the value to work with  So we can ask for things like “1 percent of 8000”  This is the second parameter that provides the value to get the percentage from  The getPercentage method needs to be given the percentage and the value to work with  So we can ask for things like “1 percent of 8000”  This is the second parameter that provides the value to get the percentage from Chapter10.1: Working with Images21 int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result; int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result;

The Method Body  The method body is a block of code that actually does the work  It can declare and use local variables  It must contain a return statement to deliver the result  The method body is a block of code that actually does the work  It can declare and use local variables  It must contain a return statement to deliver the result Chapter10.1: Working with Images22 int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result; int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result;

The Return Statement  The return statement sends the result to the caller  This is how methods that we have called have supplied their result  The return keyword must be followed by a value to send back to the caller  The return statement sends the result to the caller  This is how methods that we have called have supplied their result  The return keyword must be followed by a value to send back to the caller Chapter10.1: Working with Images23 int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result; int getPercentage(int percentage, int inputValue) { int result = 0; // TODO: work out the answer and set result to it return result;

Calling the Method  This is how the getPercentage method would be used  The value 1 is fed in as the percentage parameter and the value of height is fed in as the inputValue  What ever the method returned would be subtracted from the value of height  At the moment it just returns zero each time  This is how the getPercentage method would be used  The value 1 is fed in as the percentage parameter and the value of height is fed in as the inputValue  What ever the method returned would be subtracted from the value of height  At the moment it just returns zero each time Chapter10.1: Working with Images24 height = height - getPercentage(1, height);

Calling a Method  When a method is called, the program copies the parameter values into the method and starts running the code in it  When the method finishes (reaches a return statement), the value it returns is passed back to the caller and execution resumes at the statement after the method call  If a method never finishes, it never comes back to its caller  When a method is called, the program copies the parameter values into the method and starts running the code in it  When the method finishes (reaches a return statement), the value it returns is passed back to the caller and execution resumes at the statement after the method call  If a method never finishes, it never comes back to its caller Chapter10.1: Working with Images25

Void Methods that Do Not Return Anything  A method can be declared as void, rather than be given a particular type  This means that the method just performs a task, and does not return anything to the caller  Methods that are void do not need a return statement to send a value back, they can just return after the last statement in their body block  However, they can use the return keyword on its own to exit from the method  A method can be declared as void, rather than be given a particular type  This means that the method just performs a task, and does not return anything to the caller  Methods that are void do not need a return statement to send a value back, they can just return after the last statement in their body block  However, they can use the return keyword on its own to exit from the method Chapter10.1: Working with Images26

Ignoring a Method Result  The code that calls a method does not have to use the result that it returns  The two calls of getPercentage above will be made but the program will ignore the values that they return  It is up to the caller of the method to use the value that is returned  The code that calls a method does not have to use the result that it returns  The two calls of getPercentage above will be made but the program will ignore the values that they return  It is up to the caller of the method to use the value that is returned Chapter10.1: Working with Images27 getPercentage(99, 100); getPercentage(50, 300); getPercentage(99, 100); getPercentage(50, 300);

Testing getPercentage  This would test the getPercentage method to see if it could work out 10 percent of 800 Chapter10.1: Working with Images28 protected override void Draw(GameTime gameTime) { if ( getPercentage(10, 800) == 80 ) { graphics.GraphicsDevice.Clear(Color.Green); } else { graphics.GraphicsDevice.Clear(Color.Red); } base.Draw(gameTime); }

A Better Set of Tests  These tests are a bit more comprehensive, but they are still not enough  Unfortunately tests can only prove the existence of faults, not that there are no faults  These tests are a bit more comprehensive, but they are still not enough  Unfortunately tests can only prove the existence of faults, not that there are no faults Chapter10.1: Working with Images29 if ( (getPercentage(0, 0) == 0) && // 0 percent of 0 (getPercentage(0, 100) == 0) && // 0 percent of 100 (getPercentage(50,100) == 50) && // 50 percent of 100 (getPercentage(100,50) == 50) && // 100 percent of 50 (getPercentage(10,100) == 10) ) // 10 percent of 100 { graphics.GraphicsDevice.Clear(Color.Green); }

3. Failed Tests Chapter10.1: Working with Images30  This program tests the empty getPercentage method  Not surprisingly it fails some of the tests  In the next session we will make a working method  This program tests the empty getPercentage method  Not surprisingly it fails some of the tests  In the next session we will make a working method

Summary  By changing the dimensions of the draw rectangle during Update you can make images change size as the game runs  A C# method is made up of a method header and a block of statements that forms the method body  The header gives the return type of the method, its name, and any parameters  Methods of type void do not return a result  When creating a new method it is a good idea to create some tests first  By changing the dimensions of the draw rectangle during Update you can make images change size as the game runs  A C# method is made up of a method header and a block of statements that forms the method body  The header gives the return type of the method, its name, and any parameters  Methods of type void do not return a result  When creating a new method it is a good idea to create some tests first Chapter10.1: Working with Images31

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images32

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images33

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images34

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images35

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images36

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images37

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images38

True/False Revision Quiz  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods.  An XNA program will fail if it tries to draw an image that will not fit on the screen.  A parameter feeds information into a method call.  A method must have at least one parameter.  A void method must return a value.  If a method is of type int it must return an integer.  A program can ignore the result returned by a method.  A program may only contain up to five methods. Chapter10.1: Working with Images39