Foundation Silverlight 3 Animation- P8 docx

Following that, add a private velocity integer variable and a Boolean that will be used to determine if the claw is in motion: to see if either the left or right walls were hit, and if s

4. Next, we’ll code up the pn]i*t]ih*_o file Start with a publicly accessible `kq^ha to hold the application width Following that, add a private velocity integer variable and a Boolean that will

be used to determine if the claw is in motion:

to see if either the left or right walls were hit, and if so, the direction of the velocity vector is reversed The function finishes off by restarting the timer that is used to move the tram

8. Two more functions need to be added to this code-behind The first, OapPn]iRah$%, will accept

an integer argument When called, this function checks to see if the _h]sIkrejc flag is pnqa,which will only happen if the storyboard animation for the claw is playing If the storyboard for the claw is not playing, the current value of rahk_epuT is increased by the velocity amount passed to the function Then some simple tests are done to keep the speed of the tram within the range of +2 and –2

to 0, set the _h]sIkrejc Boolean to pnqa, and start the _h]s@ksj animation

13. The event handler code for the keyboard input handles three cases When the left arrow key

is pressed, the tram’s x velocity is adjusted by a value of –1 If the right arrow key is pressed, the tram’s x velocity is incremented by 1 Remember that the oapPn]iRah$% function is passed

a value that is added to the current x velocity This means that if the tram’s velocity is 2, when the left arrow key is pressed, the velocity gets decremented by –1, which results in a slowing motion (and an eventual change of direction if the arrow key is pressed repeatedly) When the down arrow key is pressed, the `ksjGau$% method for the tram object is called

The finalized code for this project is available in the clawGameCompleted project Take some time to

examine the XAML for the objects The tram object is composed of three parts: the roller tram that is the main part of the object, the claw that hangs below the tram, and the cable that lowers and raises the claw

The cable canvas has a clipping region applied that hides the cable Figure 5-11 shows the tram object with the cable selected Notice that only the area where the cable should be allowed to show is inside the clipping region The clipping region helps to give the illusion that the cable is dropping when the storyboard is played, as shown in Figure 5-12

Figure 5-11 The cable portion of the tram is hidden with a clipping region.

Figure 5-12 When the claw project is in action, the user controls the movement of the

claw and when it drops

Vector math

How you choose to store vectors for your objects is entirely up to you—you can store vectors as individual x,y components in different variables, as in the previous examples, or you can use a Lkejpobject to store both vector components in a single variable One caveat to be aware of is that if you attempt to store a vector as a Lkejp property using a getter and setter, you will not be able to access the individual components of the point However, using Lkejp data types as shown here—as public variables—will work OK Whichever method you choose to store your vectors, there is a bit of math that can be done with them Next, we’re going to take a look at how that is done

We’ll start with vector addition Vectors are pretty simple to add—you simply add the x components

of the vectors and the y components of the vectors Figure 5-13 illustrates an example Given the pair

of vectors drawn in white, which are 8,10 and 0,10, the resultant vector, 8,20, is drawn in black The magnitude of the vectors used in this example are exaggerated a bit to demonstrate the addition, but the idea is what we’re after Vector addition can be used to look ahead and see where your object will

be the next time it moves

Figure 5-13 To add vectors, add the individual components

Vectors can also be scaled by multiplying To scale a vector by 2, for example, you multiply both of the vector’s components by 2 This will result in a vector that points in the same direction but is twice

as long

The vectorMath project contains a couple of examples for you to experiment with There’s nothing

that you really need to code up here, so you can take a breather I’ll just go through the code so you can modify it if you’d like

In the I]ejL]ca*t]ih*_o file, two Lkejp objects are declared, each of which will be used to store a vector:

Take a little time and play around with the values that are set for the vectors to see what type of results the math operations you’re performing will have.

Angles in Silverlight

As you saw earlier when working through the transform types, rotational angles in Silverlight are expressed in degrees and can be additive or subtractive—for example, both 720 degrees and –720 degrees will rotate an object around twice The former will rotate an object clockwise, while the latter will rotate an object counterclockwise

As you have seen along the way, Rotate transforms are accessible through code By adding an t6J]iaproperty to an object’s Rotate transform, you can easily access the angle of rotation Take, for exam-ple, the following rectangle XAML:

iuNa_pNkp]pa*=jcha9).,7

You may have noticed when working with vectors that the line a vector makes kind of looks like an angle With just a bit of code, you can convert a vector into an angle To do this, however, you’ll need

to know three things

First off, mathematics uses a unit of measure called a radian to measure angles—1 radian is equal to

about 57.2958 degrees Second, we use a math function called =p]j.$% (arctangent) to determine the radians Finally, we need a way to convert the radians to a useful number that represents an angle for us

If you’re starting to get nervous because we’re using some mathematics, don’t worry The math is presented here as kind of a plug-and-play solution For now, we want to focus on how vectors and angles are related

All of this radian and =p]j.$% talk is a fancy way of saying we need the following two lines of code, into which we plug a vector The result will be the angle of the vector

]jcha9?kjranp*PkEjp-2$-4,+I]pd*LE&n]`e]jo%7

The first line uses the=p]j.$% math method to calculate the radians from the vector that was passed You can see the usage of the =p]j.$% function, and how we pass the vector to the function Notice that the vector is passed y,x (not x,y) The second line of code contains the formula for converting radians to degrees

Converting vectors to angles

To see this code in action, visit the vectorAngleConversion project This is a simple project that sets

up a Lkejp object that contains a vector and a variable called ]jcha:

lner]paLkejpra_pknHajcpd9jasLkejp$%7

lner]pa`kq^ha]jcha7

A value that represents a vector is assigned to the ra_pknHajcpd variable, and the angle of the vector

is calculated and output to a TextBlock:

Let’s take a look at a project that graphically illustrates the math This project allows a user to adjust the endpoints of a line As the endpoints are adjusted, the application calculates the length of the vector that the line creates, calculates the angle of that vector, and applies the angle to a separate heja object as a sanity check for the calculations All the code we’re about to discuss is available in

the vectorAngles project.

The I]ejL]ca*t]ih file for this project contains four sliders and several TextBlock objects that are used to provide user feedback In addition, there is a Path object that is used to draw a simple line The default orientation for the line is horizontal

In the I]ejL]ca*t]ih*_o file, the objects needed in the project are declared The first one is the adjustable line, called iuHeja The next two objects are Lkejp objects, l- and l., and are used to store the endpoints of the iuheja object The last two declarations are similar to those illustrated in the previous project—ra_pknHajcpd is used to determine the length of the line as a user manipulates it, and]jcha is used to store the angle of the line

The code starts by assigning some default values to the l- and l Lkejp objects:

ThepaopHeja=jcha object is our sanity check—this object will be rotated the number of degrees culated by our code, and the angle of the line should match the angle of the iuheja object, assuming the code is functioning correctly The values are converted to integers for display as they are output

value to be greater than the width of the canvas or either point’s y value to be greater than the height

identi-lner]parke`l-UOhe`an[R]hqa?d]jca`$k^fa_poaj`an(

Nkqpa`Lnklanpu?d]jca`Arajp=nco8`kq^ha:a%

w

iuHeja*U-9l-UOhe`an*R]hqa7

as shown in Figure 5-14 Pretty cool, huh?

Figure 5-14 The vectorAngle project allows you to modify the endpoints of a line as it calculates the angle in

real time

You’ve seen a pretty broad variety of ways to manipulate objects using vectors You know how to make objects move using vectors, and you know how to make objects rotate by using vectors Let’s take a look at how you can separate the acceleration vector of an object from the directional vector

Separating acceleration from direction

It’s very likely that, as you begin building out your own applications, you will find yourself in a situation where you will want to be able to separate the direction an object is traveling from the direction it is pointing A great example of this type of motion would be the kind found in old arcade games like Asteroids We’re going to take a look at how to code this type of movement up

1. To code along with this example, open the vectorShip project This project contains the

familiar I]ejL]ca*t]ih file, which contains two additional canvases: _kjpajp?]jr]o and op]n?]jr]o There is also a >kn`an object to create a white border around the game board, as well as a TextBlock that will be used to provide some user feedback

There are two other user controls in this project One is called op]n*t]ih, which contains

a simple 22 ellipse that will be used to generate a random star field The other is called nk_gapodel*t]ih and contains a 4545 spaceship and a timer called c]iaHkkl that will be used to make the spaceship move

2. Start coding in the I]ejL]ca*t]ih*_o file by declaring an instance of the rocket called iuNk_gapand a N]j`ki data type called njc that will be used to generate random numbers These two variables are placed before the I]ejL]ca$% constructor:

4. After the closing curly brace of the I]ejL]ca$% function, create a new function called

^qeh`Op]no$% that accepts an integer argument:

8. Before the nk_gapodel$% constructor, declare the variables that this object will be using The variables include a publicly accessible Lkejp that will control the direction in which the ship is pointing and two `kq^has for the application’s width and height There are also three private variables One controls the direction in which the ship is accelerating; one controls the thrust, and one is for holding an angle-to-radians conversion.

13. Follow that with some boundary-checking code If the ship moves completely off the canvas in any direction, it is wrapped to the opposite side of the canvas

a clockwise direction The functions are passed an integer to determine the amount of change

in the rotational value

lq^he_rke`nkp]paHabp$ejp]ikqjp%

w

pdeo*nkp]paNk_gap*=jcha)9]ikqjp7

y

pro-on the screen, over a star field We’ll change all that by making use of the code we just added

18. Open the I]ejL]ca*t]ih*_o file for editing Since we’re doing boundary checking in the rocket control, we’ll need to initialize the ]llDaecdp and ]llSe`pd variables we set up in the code-behind for the rocket Add the two following bold code lines to the I]ejL]ca$% constructor:

is pressed, the ship should thrust in the direction it is pointing This is done by calling the

`kPdnqop$% method you added to the ship’s code-behind The code will update the on-screen text to show the current x and y movement vectors of the ship as well

24. Next, we’ll handle the down key When the down arrow is pressed, the rocket will come to

a stop This is done by calling the `k>n]gao$% method for the ship before updating the screen text to show the movement vectors once again

iuNk_gap*nkp]paNecdp$nkp]paOlaa`%7

^na]g7

Press F5 to compile and run the program Click the application to get focus for input Press the left arrow key, and the ship will rotate counterclockwise 5 degrees Pressing the right arrow key will rotate the ship clockwise 5 degrees Pressing the up arrow key causes the ship to thrust and move forward The more you press the up arrow, the faster the ship will travel

Notice that as the ship travels in one direction, you are still free to use the left and right arrow keys

to rotate the ship so that it points in any direction you like Pressing the up arrow key when the ship

is pointed in a direction other than that in which it is traveling will create some thrust in that tion However, to fully change the ship’s direction, you need to use the thrust key enough times to overcome the current inertia of the ship Figure 5-15 shows a screenshot of the application in action

direc-The vectorShipCompleted project includes all of the code for this project.

Figure 5-15 The completed vectorShip project, which illustrates how to separate acceleration from direction

Firing a weapon from the ship

To take this application one step further, let’s add the ability to fire a missile from the ship We already know in what direction the ship is pointing—it should be relatively easy to fire a missile, right?

1. Open the vectorShipMissile project to code along with this example The project is identical

to the completed ship project from the last example, except that it contains one additional user control: a ieooeha that the ship will fire There was also a small change to the `kPdnqop$%function in the nk_gapodel*t]ih*_o code-behind Some checks were added to keep the thrust within a –2 to +2 range This was done to keep the ship from overtaking the missile

Figure 5-16 The missile is oriented to the

right and sits vertically centered outside of

a 4545 canvas

When the user presses a key that fires the missile, the missile will be drawn in front of the ship If the missile were contained in a smaller canvas and positioned at the center of the ship when fired, it would appear to come out off-center, as the ship would continue to drift in one direction while the missile fired out in another Placing the missile centered in front of the ship avoids this problem

3. The majority of the code necessary to fire a missile goes into the ieooeha*t]ih*_o behind, so go ahead and open that file Begin by declaring two variables One will contain the acceleration vector for the missile, and the other will contain a thrust value This code goes before the ieooeha$% constructor:

code-lq^he_Lkejp] ahan]pekj9jasLkejp$%7

lner]pa`kq^hapdnqop917

4. Inside of the ieooeha$% constructor, add the following code to set the missile’s Reoe^ehepuproperty to ?khh]loa` This will keep the missile hidden until fired In addition, add an event handler for the ?kilhapa` event on the ieooehaPeian storyboard: