to add the username to the object and embed tags in the HTML
page. It would look something like this:
If you have multiple pieces of information you need to pass
into Flash, they are separated by &’s, just like a URL in a browser.
There are a couple of drawbacks to using this system that become
very apparent when you start using more than one or two variables. One is that you’re limited to only single name/value pairs;
you can’t store any type of complex data in a Flash Var. The other
drawback is that it becomes tricky to manage them in the page
and one typo or error processing them could render all of them
unavailable. To add to their annoyance during troubleshooting,
any special characters must be URL encoded, increasing their
lack of readability.
A better option is to use a single Flash Var, maybe called something like conﬁg. The value of this variable is a path to either a static
or dynamic XML ﬁle. It would probably look something like this:
If the information contained within the XML ﬁle didn’t need to
change per user (like the links to various pages or media), it could
simply be a ﬁle on the server beside your SWF that the SWF loads
in upon launching. If the information was dynamic (like a username or preferences), it could point to a PHP (or other back-end
service) ﬁle that returns XML:
The URLLoader will load in the data as plain text, regardless
of ﬁle extension, so as long as the page renders out as XML you’re
good to go. This keeps your back-end developers (or you if you’re a
solo operation) from having to wrangle variables within a page of
Chapter 9 XML AND DYNAMIC CONTENT
already convoluted HTML. Here is an example of what a conﬁg
ﬁle might look like:
http://www.mydomain.com/media/
http://www.mydomain.com/services/
Chris
Remember that you could put whatever information you
wanted to in here and in whatever structure. As you can see, this
much more readable option is also easier to parse, and thanks
to E4X your basic data types (like strings and numbers) come
through intact; Flash Vars are all strings.
Summary
In this chapter we’ve explored a few uses of XML in games.
There are deﬁnitely many more. Some developers I’ve met are
wary of using XML, feeling that doing so forces them to use an
elaborate, complex setup or follow some “best practices” guide
to formatting they read in a 500-page tome on XML in an enterprise setting. Nothing could be further from the truth; use XML
where it makes sense, keep it simple, and try to follow a structure
that lends itself to growth. The great thing about XML is that it is
a standard in and of itself, and ActionScript 3 makes working with
it a no-brainer.
151
This page intentionally left blank
10
FOUR LETTER WORDS: M-A-T-H
Few people I know, programmers included, don’t groan a little
when math and physics are brought up. While not all games utilize
them, geometry, trigonometry, and basic physical mechanics are
essential parts of game development. Don’t worry, though; this isn’t
a physics and math book. There are many of those out in the marketplace already, some even written speciﬁcally for games. In fact,
this isn’t even going to be an in-depth exploration of those topics
because they really aren’t necessary for most casual games. In this
chapter, we will cover the basic foundational concepts you must
understand to be able to handle a wide variety of development challenges. We will accomplish this in two parts—geometry and trigonometry, and physics—each with a practical example illustrating
the concepts. If, when you’re done with this chapter, your appetite
is whetted for a more in-depth look at these topics, I have provided
links to further reading on this book’s website, ﬂashgamebook.com.
The Math Class
ActionScript includes a core library for performing a lot of the
functions we’re going to learn about in this chapter. It is the Math
class, and it will quickly become invaluable as we get into more
complicated problems later on in our code. It doesn’t include
everything we’ll eventually need, but later we’ll learn about some
companion functions we can write to make it even more useful.
PART 1
Geometry and Trigonometry
Geometry, speciﬁcally Euclidian geometry, is the branch of
mathematics that deals with, among other things, the relationship
between points, lines, and shapes in a space. From it we derive
the formulas for getting the distance between two points, as well
as the entire x,y coordinate system (known as the Cartesian coordinate system) upon which Flash’s Stage is built. Figure 10.1 illustrates a typical two-dimensional coordinate system.
Flash’s coordinate system is slightly different in that it is ﬂipped
over the x-axis, resulting in the y values being reversed. The upperleft corner of the Stage is at (0,0) and expands down and to the
right from there, as shown in Figure 10.2. This is important to note
because it is diametrically opposed to the notion that numbers
decrease as they move “down” on a graph, and it can cause confusion later when we move into some of the concepts of physics.
1
−1
−1
y
(0,0)
1
−1
(0,0)
x
1
x
Flash Stage
−1
Figure 10.1 A standard two-dimensional Cartesian, or
Trigonometry (or “trig” for short) is a related, but more speciﬁc,
branch that describes the relationships between the sides and angles
of triangles, speciﬁcally right triangles (triangles with one angle of 90
degrees). All triangles have some fundamental properties:
●
A triangle’s interior angles always add up to 180 degrees.
●
Any triangle (regardless of orientation and type) can be
split into two right triangles.
●
The relationships between any given side and angle of a
triangle are deﬁned by ratios that are known as the trigonometric functions.
You have probably heard of the three most common trig functions; they are sine (sin), cosine (cos), and tangent (tan). They
each relate to different sides of a triangle. The longest side of the
triangle (and, in a right triangle, the side opposite the right angle)
is the hypotenuse (hyp). In Figure 10.3, we relate to the other two
Chapter 10 FOUR LETTER WORDS: M-A-T-H
opposite
=
30
opposite = 20
e
A = 45°
adjacent
B
se
nu
opposite = 15
Figure 10.5 A triangle where we
know one angle and one side.
e
ot
tan B ϭ 20/15
e
tan A ϭ 15/ 20
90°
p
hy
Using a calculator, this would reveal the hypotenuse to have a
length of ϳ28.3 and the adjacent side to also be 20.
Now let’s look at an example (Figure 10.6) with a triangle where
we know the lengths of the two shorter sides but no angles and
no hypotenuse.
Because we know the opposite and adjacent sides, the obvious
choice would be to use the tangent equation to determine the
value of angle A (and ﬂip the two sides to ﬁnd the value of B):
Figure 10.4 Using the
information about one angle and
one side, we can use the trig
functions to ﬁnd the values of the
other two sides.
us
en
adj ϭ opp/tan A , or adj ϭ 20/(tan 45)
A = 50°
adjacent
ot
hyp ϭ opp/sin A, or hyp ϭ 20/(sin 45)
90°
p
hy
If you used a calculator with the trig functions on it, you would
quickly determine that the value of the adjacent side is ϳ19.3 and
the value of the opposite side is ϳ23.
In Figure 10.5, we can see that we now know one angle (45°)
and the length of the side opposite that angle (20).
Once again, we simply manipulate the equations to determine
the other two sides, this time using tangent instead of cosine, as
cosine has nothing to do with the opposite side:
us
en
opp ϭ sin A * hyp, or opp ϭ (sin 50)* 30
ot
adj ϭ cos A * hyp, or adj ϭ (cos 50)* 30
p
hy
sides of the triangle based on the angle we’re interested in—in
this case, A. The vertical side of the triangle is opposite (opp)
angle A, while the horizontal side is adjacent (adj) to it.
The aforementioned trig functions work with these sides as
follows:
●
The sine of an angle is equal to the opposite side’s length
divided by the hypotenuse’s length; thus, sin A ϭ opp/hyp.
●
The cosine of an angle is equal to the adjacent side’s length
divided by the hypotenuse’s length; thus, cos A ϭ adj/hyp.
●
The tangent of an angle is equal to the opposite side
divided by the adjacent site; thus, tan A ϭ opp/adj.
As you can see, these functions are very helpful if you only
know a little bit of information about a triangle and need to
determine the other components. Let’s look at a few examples. In
Figure 10.4, we know the value of angle A is 50° (and, by extension, the other missing angle would then be 40°). We also know
that the length of the hypotenuse is 30.
To ﬁnd the lengths of the other two sides, we rewrite the sine
and cosine equations as follows:
155
90°
A
adjacent = 20
Figure 10.6 A triangle where we
know just two of the sides, but no
angles and no hypotenuse.
156
Chapter 10 FOUR LETTER WORDS: M-A-T-H
However, now we’re stuck. We want A and B, not the tangent of
A and B. Luckily, there is a way to reverse each trig equation using
what are known as inverse trig functions. The names of these
functions match their counterparts, but they are preﬁxed with
the word arc. In this case, we need to use arctangent to ﬁnd the
value of each of these angles:
A ϭ arctan (15/ 20)
B ϭ arctan ( 20/15)
Based on these equations, angle A would be ϳ37° and B would
equal ϳ53°. If you add these together with the right angle of 90°,
you can see that we indeed have a proper triangle of 180°.
For our ﬁnal theoretical example, look back again to Figure
10.6. Suppose all you needed was the hypotenuse and you
weren’t interested in the angles at all. You could do what we did
previously, using arctangent to get the values of the angles and
then use those angles with either sine or cosine to determine the
hypotenuse. However, as this is a multiple-step process, it is inefﬁcient when we have a much quicker way. In addition to the standard trig functions, another equation, known as the Pythagorean
theorem, can be used to determine the third side of a right triangle when you know the other two. It states that the hypotenuse of
a triangle, squared, is equal to the sum of the squares of the other
two sides. Let’s look at this as an equation, calling the two shorter
sides a and b and the hypotenuse c:
a2 ϩ b2 ϭ c2
To ﬁnd any one side when you know the other two is just a simple permutation of this equation, like the following:
c ϭ (a 2 ϩ b 2 ), b ϭ (c 2 Ϫ a 2 ), a ϭ (c 2 Ϫ b 2 )
For our purposes, we know sides a and b are 15 and 20 (or 20
and 15; it doesn’t really matter). Based on these values, the hypotenuse would therefore be equal to:
(152 ϩ 202 ) ϭ 25
Now that we have these functions deﬁned and have seen how
to use them, let’s look at a couple of practical examples in Flash
and how to apply the functions there.
A fairly common use of the trig functions is ﬁnding the angle
of the mouse cursor relative to another point. This angle can
then be applied to the rotation of a DisplayObject to make the
object “look” at the mouse. If you open the MousePointer.ﬂa ﬁle,
Chapter 10 FOUR LETTER WORDS: M-A-T-H
157
on the website, you’ll ﬁnd just such an example set up. It consists
of a triangle MovieClip called “pointer” on the stage. One of the
corners of the triangle has been colored differently to differentiate the direction it is pointing. For simplicity, the ActionScript to
perform this math is on the timeline; if you were using this code
as part of something larger, it would make sense to put it in a