11 Working with Images Session 10.1. Session Overview Find out more about image manipulation and...

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

Chapter10.1: Working with Images 2

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


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


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

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


protected override void Update(GameTime gameTime){ jakeRect.Height++; jakeRect.Width++;

base.Update(gameTime);}

protected override void Update(GameTime gameTime){ jakeRect.Height++; jakeRect.Width++;


1. Jake Zoom In


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


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)

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


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


protected override void Update(GameTime gameTime){ jakeRect.Height--; jakeRect.Width--;


protected override void Update(GameTime gameTime){ jakeRect.Height--; jakeRect.Width--;


2. Jake Zoom Out


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


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


Correct Zooming

If the change in size follows the diagonal of the picture, the zoom will work correctly


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


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


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

Chapter 2.1: The Anatomy of a Game Program 16

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


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


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




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




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




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


height = height - getPercentage(1, height);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


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


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


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


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

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


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

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


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


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.


11 Working with Images Session 10.1. Session Overview Find out more about image manipulation and...

Documents

Transcript of 11 Working with Images Session 10.1. Session Overview Find out more about image manipulation and...