Download - Web Games Programming
![Page 1: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/1.jpg)
UFCEKU-20-3Web Games Programming
Web Games Programming
Game Math
![Page 2: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/2.jpg)
UFCEKU-20-3Web Games Programming
Agenda
Revise some basic concepts Apply Concepts to Game Elements
![Page 3: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/3.jpg)
UFCEKU-20-3Web Games Programming
The Natural Numbers
1 2 3 4 5 6 7
The Natural Numbers 1..infinity
![Page 4: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/4.jpg)
UFCEKU-20-3Web Games Programming
The Integers
-3 -2 -1 0 1 2 3
The integers = whole numbers
positive, negative or zero
Computer data type
int, uint (AS3)
name depends on language in use
![Page 5: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/5.jpg)
UFCEKU-20-3Web Games Programming
Rational Numbers
-3 -2 -1 0 1 2 3
The Rationals = fractions with an exact decimal value e.g 1/2 = .5
positive or negative
Computer data type
long, double ,float, real, Number (AS3)
name depends on language in use
![Page 6: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/6.jpg)
UFCEKU-20-3Web Games Programming
Irrational Numbers
-3 -2 -1 0 1 2 3
The irrationals = fractions without an exact decimal value e.g 1/3 = .33333
positive or negative
Computer data type as for rationals
long, double ,float, real, Number
![Page 7: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/7.jpg)
UFCEKU-20-3Web Games Programming
The Number Line: Root 2
-1 0 1 2 3 4 5
Square root of 2 1.41421
![Page 8: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/8.jpg)
UFCEKU-20-3Web Games Programming
The Golden Ratio - Phi
-1 0 1 2 3 4 5
The Golden Ratio 1.618033897
![Page 9: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/9.jpg)
UFCEKU-20-3Web Games Programming
The Natural Logarithmic Constant e
-1 0 1 2 3 4 5
e = 2.7182818284…
![Page 10: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/10.jpg)
UFCEKU-20-3Web Games Programming
The Number Line
-1 0 1 2 3 4 5
PI the Relationship between the diameter of a circle and its circumference 3.142 (easy)3.141592654 (calculator)
valueForPI = Math.PI; // AS3 (3.141592653589793)
Hmm… pie
![Page 11: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/11.jpg)
UFCEKU-20-3Web Games Programming
The Number Line
Attributes of a Circle:
RadiusDiameterCircumferenceArea
Radius =rDiameter =2rCircumference = C = PI x DArea = PI x r x r
![Page 12: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/12.jpg)
UFCEKU-20-3Web Games Programming
ActionScript
const PI:Number = Math.PI;// define a constant
public function areaOfCircle(radius:Number):Number {
var area:Number;area = PI * radius * radius;return area;
}
![Page 13: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/13.jpg)
UFCEKU-20-3Web Games Programming
RadiansRadian is a natural measurement of angular rotation
There are 2PI radians in a circle (~= 6.284)
![Page 14: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/14.jpg)
UFCEKU-20-3Web Games Programming
Radians v Degrees
There are 2 PI radians in a circle = 3.142 x 2 = 6.284
There 360 degrees in a circle
One radian = 360 / 6.284 approximately 57.288 degrees
Formula for changing radians to degrees :
degrees = (360 / 2PI)
Formula for changing degrees to radians :
radians = degrees x (2PI / 360)
![Page 15: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/15.jpg)
UFCEKU-20-3Web Games Programming
Pythagoras
a
b
c
a2 = b2 + c2
![Page 16: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/16.jpg)
UFCEKU-20-3Web Games Programming
Pythagoras
a2
b2
c2
![Page 17: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/17.jpg)
UFCEKU-20-3Web Games Programming
Pythagoras
a = 5
c = 3
b = 4
![Page 18: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/18.jpg)
UFCEKU-20-3Web Games Programming
Pythagoras
a2 = 42 + 32
a = 16 + 9
a = SQRT (25)
a = 5
![Page 19: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/19.jpg)
UFCEKU-20-3Web Games Programming
Application to Gamesx
y
P1 (x1, y1)
P2 (x2, y2)
Length = x2 - x1
Length = y2 - y1
![Page 20: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/20.jpg)
UFCEKU-20-3Web Games Programming
Application to Gamesx
y
P1 (10, 15)
P2 (80,50 )
Length = x2 - x1 = 80 - 10 = 70
Length = y2 - y1 = 50-15 = 35
a
![Page 21: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/21.jpg)
UFCEKU-20-3Web Games Programming
Application to Gamesx
y a
distance a = SQRT((x2-x1)2 + (y2 - y1)2)
![Page 22: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/22.jpg)
UFCEKU-20-3Web Games Programming
ActionScript
// distanceXY calculates the distance between two points x and y// and returns the resulting value
public function distanceXY(pointX1, pointY1, pointX2, pointY2:int):Number{var distance:Number;distance = Math.sqrt((pointX2-pointX1) *(pointX2-pointX1) + (pointY2-pointY1) * (pointY2-pointY1));
return distance
}
![Page 23: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/23.jpg)
UFCEKU-20-3Web Games Programming
Trigonometry
1-1
1
-1
cosine
s
I
n
e
Tan
![Page 24: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/24.jpg)
UFCEKU-20-3Web Games Programming
Sine Values
1-1
1
-1
cosine
s
I
n
e
Rotate line through some angle
Read value off sine axis
![Page 25: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/25.jpg)
UFCEKU-20-3Web Games Programming
33 degrees
Sineread sine value
angle
about 0.52
![Page 26: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/26.jpg)
UFCEKU-20-3Web Games Programming
Cosine Values
1-1
1
-1
cosine
s
I
n
e
angle 45 degrees
![Page 27: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/27.jpg)
UFCEKU-20-3Web Games Programming
Tan Values
1-1
1
-1
tan
Rotate line through some angle (45)
Read value off tan axis
tan
tan(45) = 1
![Page 28: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/28.jpg)
UFCEKU-20-3Web Games Programming
Tan Values
1-1
1
-1
cosine
s
I
n
e
Rotate line through some angle(65 degrees)
Read value off tan axis(about 2.7)
![Page 29: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/29.jpg)
UFCEKU-20-3Web Games Programming
Tan Values
1-1
1
-1
cosine
s
I
n
e
Rotate line through some angle(89 degrees)
Read value off tan axis(about 57.289)
![Page 30: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/30.jpg)
UFCEKU-20-3Web Games Programming
Tan 90 !
1-1
1
-1
cosine
s
I
n
e
Rotate line through some angle(90 degrees)
Lines parallel -tan 90 not defined
![Page 31: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/31.jpg)
UFCEKU-20-3Web Games Programming
Tan > 90
1-1
1
-1
cosine
s
I
n
e
Rotate line through some angle(135 degrees)
value read fromthis axis (-1)
![Page 32: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/32.jpg)
UFCEKU-20-3Web Games Programming
Trigonometric Ratios
sine of the angle = opposite / hypotenuse
cosine of the angle = adjacent / hypotenuse
tan of the angle = opposite / adjacent
hypotenuse
adjacent
Angle in degrees = 1/sine etc.
opposite
![Page 33: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/33.jpg)
UFCEKU-20-3Web Games Programming
Trig Ratios
sine of the angle = opposite / hypotenuse
cosine of the angle = adjacent / hypotenuse
tan of the angle = opposite / adjacent
SOH CAH TOA
![Page 34: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/34.jpg)
UFCEKU-20-3Web Games Programming
Finding the angle to a point
point(x1,y1)
Point (x2, y2)
angle theta?
![Page 35: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/35.jpg)
UFCEKU-20-3Web Games Programming
Finding the angle to a point
point(x1,y1)
Point (x2, y2)
![Page 36: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/36.jpg)
UFCEKU-20-3Web Games Programming
Finding the angle to a point
point(x1,y1)
Point (x2, y2)
angle theta?
![Page 37: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/37.jpg)
UFCEKU-20-3Web Games Programming
Use the tangent formula
point(x1,y1)
point (x2, y2)
angle theta
tan theta = opposite / adjacent
tan theta= (y2-y1) / (x2-x1)
the angle = 1/tan (theta)
atan(theta)
![Page 38: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/38.jpg)
UFCEKU-20-3Web Games Programming
Calculate for each frame
point(x1,y1)
point (x2, y2) (moving sprite)
angle theta?
![Page 39: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/39.jpg)
UFCEKU-20-3Web Games Programming
Some tan angles point to the same value…
1-1
1
-1
cosine
s
I
n
e
tan 225 =1
tan 45 =1
![Page 40: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/40.jpg)
UFCEKU-20-3Web Games Programming
Using the atan2 function
arctan(x) function may return same angle value for two different points if in certain quadrants - would need to determine which is correct for direction required
Use atan2(y,x) specially designed function, which by usingnumbers in the complex plane, returns one unique valuefor any angle
Value is returned in radians - convert to degrees withappropriate formula
![Page 41: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/41.jpg)
UFCEKU-20-3Web Games Programming
ActionScript
// definition in GameMath.aspublic function pointAtSprite(xPoint:Number, yPoint:Number, pointerX:Number, pointerY:Number):Number {
var dx:Number = xPoint - pointerX;var dy:Number = yPoint - pointerY;
// determine angle and convert to degreesvar pointAngle:Number = Math.atan2(dy,dx);var pointDegrees:Number = 360*(pointAngle/(2*Math.PI));
return pointDegrees;
} //pointAtSprite
stage.addEventListener(Event.ENTER_FRAME, getPointAngle);
function getPointAngle(event:Event){pointAtSpriteAngle= gameMath.pointAtSprite(boat_mc.x, boat_mc.y, pointer.x, pointer.y);pointer.rotation = pointAtSpriteAngle;// instance name of gun turret sprite};
![Page 42: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/42.jpg)
UFCEKU-20-3Web Games Programming
Game Math:Applications
Used to calculate sprite positions and directions Determine distances between game objects (Pythagoras)
Use distance between objects for collision detection purposes Change game state based on game sprites positions in game world
Give sprites speed and a known direction (Trigonometry SOH CAH TOA) Use atan2 to follow or point at moving sprite In 3D games, math is used to orientate objects in three coordinate
systems x,y,z Used to construct formulae which implements sprite behaviours for
physics - such as acceleration, momentum, friction.
![Page 43: Web Games Programming](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e8f550346895da8da62/html5/thumbnails/43.jpg)
UFCEKU-20-3Web Games Programming
The Prime Numbers
2 3 5 7
The distribution of Prime numbers is the most important unanswered question in Mathematics - can you find a formula to say if a given number is a Prime number?
2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97
If you can you will probably win a Nobel prize and be famous forever!
A Prime number is only divisible by 1 and itself