Presentation is loading. Please wait.

Presentation is loading. Please wait.

11 Working with Images Session 10.1. Session Overview  Find out more about image manipulation and scaling when drawing using XNA  Start to implement.

Published byPhyllis Cunningham Modified over 9 years ago

Similar presentations

Presentation on theme: "11 Working with Images Session 10.1. Session Overview  Find out more about image manipulation and scaling when drawing using XNA  Start to implement."— Presentation transcript:

1 11 Working with Images Session 10.1

2 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

3 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

4 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

5 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); }

6 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

7 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)

8 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

9 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); }

10 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

11 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

12 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

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

14 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

15 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

16 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

17 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

18 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;

19 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;

20 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;

21 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;

22 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;

23 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;

24 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);

25 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

26 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

27 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);

28 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); }

29 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); }

30 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

31 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

32 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

33 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

34 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

35 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

36 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

37 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

38 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

39 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

Download ppt "11 Working with Images Session 10.1. Session Overview  Find out more about image manipulation and scaling when drawing using XNA  Start to implement."

Similar presentations

11 Reaction Timer Game Session 8.1. Session Overview  Find out how an XNA program can measure the passage of time and trigger events at certain points.

11 Reaction Timer Game Session 8.1. Session Overview  Find out how an XNA program can measure the passage of time and trigger events at certain points.
Chapter 7 User-Defined Methods. Chapter Objectives  Understand how methods are used in Java programming  Learn about standard (predefined) methods and.

Chapter 7 User-Defined Methods. Chapter Objectives  Understand how methods are used in Java programming  Learn about standard (predefined) methods and.
1 Pointers A pointer variable holds an address We may add or subtract an integer to get a different address. Adding an integer k to a pointer p with base.

1 Pointers A pointer variable holds an address We may add or subtract an integer to get a different address. Adding an integer k to a pointer p with base.
Computer Science 1620 Loops.

Computer Science 1620 Loops.
C++ Classes in Depth. Topics Designing Your Own Classes Attributes and Behaviors Writing Classes in C++ Creating and Using Objects.

C++ Classes in Depth. Topics Designing Your Own Classes Attributes and Behaviors Writing Classes in C++ Creating and Using Objects.
Computer Science 1620 Programming & Problem Solving.

Computer Science 1620 Programming & Problem Solving.
CS 201 Functions Debzani Deb.

CS 201 Functions Debzani Deb.
Even More C Programming Pointers. Names and Addresses every variable has a location in memory. This memory location is uniquely determined by a memory.

Even More C Programming Pointers. Names and Addresses every variable has a location in memory. This memory location is uniquely determined by a memory.
11 Games and Content Session 4.1. Session Overview  Show how games are made up of program code and content  Find out about the content management system.

11 Games and Content Session 4.1. Session Overview  Show how games are made up of program code and content  Find out about the content management system.
Modular Programming Chapter 6. 2 6.1 Value and Reference Parameters t Function declaration: void computesumave(float num1, float num2, float& sum, float&

Modular Programming Chapter Value and Reference Parameters t Function declaration: void computesumave(float num1, float num2, float& sum, float&
by Chris Brown under Prof. Susan Rodger Duke University June 2012

by Chris Brown under Prof. Susan Rodger Duke University June 2012
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.

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.
Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 8 Fall 2010.

Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 8 Fall 2010.
Operator Precedence First the contents of all parentheses are evaluated beginning with the innermost set of parenthesis. Second all multiplications, divisions,

Operator Precedence First the contents of all parentheses are evaluated beginning with the innermost set of parenthesis. Second all multiplications, divisions,
Functions Part I (Syntax). What is a function? A function is a set of statements which is split off into a separate entity that can be used like a “new.

Functions Part I (Syntax). What is a function? A function is a set of statements which is split off into a separate entity that can be used like a “new.
11 Finding Winners Using Arrays Session 8.2. Session Overview  Find out how the C# language makes it easy to create an array that contains multiple values.

11 Finding Winners Using Arrays Session 8.2. Session Overview  Find out how the C# language makes it easy to create an array that contains multiple values.
11 A First Game Program Session 11.1. Session Overview  Begin the creation of an arcade game  Learn software design techniques that apply to any form.

11 A First Game Program Session Session Overview  Begin the creation of an arcade game  Learn software design techniques that apply to any form.
© The McGraw-Hill Companies, 2006 Chapter 4 Implementing methods.

© The McGraw-Hill Companies, 2006 Chapter 4 Implementing methods.
C++ Programming: From Problem Analysis to Program Design, Fifth Edition, Fifth Edition Chapter 7: User-Defined Functions II.

C++ Programming: From Problem Analysis to Program Design, Fifth Edition, Fifth Edition Chapter 7: User-Defined Functions II.
Review Introduction to Searching External and Internal Searching Types of Searching Linear or sequential search Binary Search Algorithms for Linear Search.

Review Introduction to Searching External and Internal Searching Types of Searching Linear or sequential search Binary Search Algorithms for Linear Search.

Similar presentations

Ads by Google