Principles of Computer Game

Design and Implementation

Lecture 6
 We already knew
• Game history
• game design information
• Game engine

2
 What’s Next
• Mathematical concepts (lecture 6-10)
• Collision detection and resolution (lecture 11-
16)
• Game AI (lecture 17 - )

3
Mathematical Concepts
3D modelling, model manipulation and
rendering require Maths and Physics
• Typical tasks:
– How to position objects?
– How to move and rotate objects
– How do objects interact?

5
 2D Space
• We will start with a 2D space (simpler) and
look at issues involved in
– Modelling
– Rendering
– Transforming the model / view

6
 2D Geometry
• Representation with two
axes, usually X (horizontal)
and Y (vertical)
• Origin of the graph and of
the 2D space is where the
axes cross (X = Y = 0)
• Points are identified by their
coordinates

7
 Viewports
• A viewport (or window) is a rectangle of pixels
representing a view into world space
• A viewport has its own coordinate system, which may
not match that of the geometry.
– The axes will usually be X horizontal & Y vertical
• But don’t have to be – rotated viewports
– The scale of the axes may be different
– The direction of the Y axis may differ.
• E.g. the geometry may be stored with Y up, but the viewport has
Y down.
– The origin (usually in the corners or centre of the viewport)
may not match the geometry origin.
8
 Example
• Example of changing coordinate system from world
space to viewport space:
400 800

20
600 P
10

10 20 30 40

P = (20,15) in world space. Where is P’ in viewport

space? 9
 Rendering
• Rendering is the process of converting geometry into
screen pixels
• To render a point:
– Convert vertex coordinates into viewport space
– Set the colour of the pixel at those coordinates
– The colour might be stored with the geometry, or we can
use a fixed colour (e.g. black)

10
 Rendering Lines and Shapes
• Need to determine
400 800
which part of the
line is visible, where
it meets the
viewport edge and 600

how to crop it.

10 20 30 40

• In “Ye good old days” this was rather difficult

• With support from rendering libraries easy
11
 Points and Vectors
• Point: a location in space
• Vector: a direction in space

y y

. (1, 1.2) . (1, 1.2)

x x
12
 What’s the Difference?
• The only difference is “meaning”

• But think about

– “move a picture to the right
– “move a picture up”
– “move a picture in the direction …”
• Vectors specify the direction

13
 Moving an Object
• Translation of an object
– Moving without rotating or reflecting
– Apply a vector to all points of an object
– Vector specifies direction and magnitude of
translation

y y

. (1, 1.2) . (1, 1.2)

x x
14
 Vectors
A vector is a directed line segment
• The length of the segment is called the length
or magnitude of vector.
• The direction of the segment is called the
direction of vector.
• Notations: vectors are usually denoted in
bold type, e.g., a, u, F, or underlined, a, u, F.

Same direction,
red is twice as long
15
 Translation Recipe
• In order to translate (move) an object in the
direction given by a vector V, move all points.
P’ = (xp + 2xv, yp + 2yv)
y y .
P’ = (xp + xv, yp + yv)
.P(xp, yp) .
2V

V(xv,yv)

x x

V = (xv, yv)
P = (xP, yp) P’ = (xp + xv, yp + yv)
16
 Multiplying a Vector by a Number
• Multiplying a vector by a positive scalar
(positive number) does not change the
direction but changes the magnitude
• Multiplying by a negative number reverses the
direction and changes the magnitude

V -V

2V -2V

17
 In Coordinates
• V=(x,y) a vector, λ a number

λV = (λx, λy)

Example:
2(2, 5) = (4, 10)
0.7(2, 5) = (1.4, 3.5)
-2(2, 5) = (-4, -10)

18
 From A to B
• Which vector should be applied to move a
point from (xA,yA) to (xB,yB)?
-(xB - xA, yB-yA)

y
.(xA, yA)
.(xB, yB)

x
19
 Sum of Two Vectors
• Two vectors V and W are added by placing
the beginning of W at the end of V.

V+W
y
V

x
20
 In Coordinates
Let
• V = (xv,yv)
• W = (xw,yw)

Then
V + W = (xv+xw, yv+yw)

21
 Vector Difference
• V – W = V + (-1)W

y
V

V-W W

-W

22
 In Coordinates
Let
• V = (xv,yv)
• W = (xw,yw)

Then
V - W = (xv-xw, yv-yw)

23
 Applications
• Apply vector V to an object then apply W
– Apply V + W
– Representing motion as a combination of two

• If V takes you to A, W takes you to B, what

takes from A to B?
– Apply W – V
– Shooting, targeting

24
 From 2D to 3D
Y
• 3D geometry adds an extra axis
over 2D geometry
– This “Z” axis represents “depth”
– Can choose the “direction” of Z X

Y Z
Y

X
X

Z 25
 “Handedness”
• Use thumb (X), index finger (Y) & middle finger
(Z) to represent the axes
• Use your left hand and the axes are left-handed,
otherwise they are right-handed

Y Y
Z

X X

Z Right-Handed System Left-Handed System

26
(Z comes out of the screen) (Z goes in to the screen)
 Left- vs Right-Handed
• In mathematics, traditionally, right-handed
axes are used
• In computing:
– DirectX and several graphics applications use left-
handed axes
– OpenGL use right-handed

Neither is better, just a choice

27
 Vectors in 3D
• Still a directed interval
• x, y and z coordinates define a vector

Y
• V=(xv,yv,zv) a vector, λ a number
λV = (λxv, λyv, λzv)
. (2,2,2,) • V = (xv, yv, zv); W = (xw, yw, zw)
V + W = (xv+xw, yv+yw, zv+zw)
X • V = (xv, yv, zv); W = (xw, yw, zw)
V - W = (xv-xw, yv-yw, zv-zw)
Z
28
 Vectors in jMonkeyEngine
• jME defines two classes for vectors
– Vector3f
– Vector2f
• Constructors
– Vector2f(float x, float y)
– Vector3f(float x, float y, float z)

• Lots of useful methods (see javadoc)

29
 Translation (setting position) in JME
protected void simpleInitApp() {
Geometry box =…;

Vector3f v= new Vector3f(1,2,0);

box.setLocalTranslation(v);
Position of an object
rootNode.attachChild(box);
}

30
 Translation And the Scene Graph
• Let’s model a table Boxes

31
 Boxes for Tabletop and Legs
Box tableTop = new Box(10, 1, 10);
Box leg1 = new Box(1,5,1);
…
Geometry gTableTop = new
Geometry("TableTop", tableTop);
gTableTop.setMaterial(mat);
Geometry gLeg1 = new
Geometry("Leg1", leg1);
gLeg1.setMaterial(mat);
…
32
 Beware of Floats
• If you think that the table top is too thick and
change
Box tableTop = new Box(10, 1, 10);
Double
to
Box tableTop = new Box(10, 0.3, 10);
you will see an error:
The constructor Box(int, double,
int) is undefined

33
 Use the “f” word! 
Box tableTop = new Box(10,
0.3f, 10);
float

Many jME methods take “single precision” float

numbers as input

No need “double precision”

34
 Position the legs
…
leg1.setLocalTranslation( 7, 0, 7);
leg2.setLocalTranslation(-7, 0, 7);
leg3.setLocalTranslation( 7, 0,-7);
leg4.setLocalTranslation(-7, 0,-7);

Attach all to rootNode

35
Oops…

36
 A Better Scene Graph
rootNode

table

tableTop legs

leg1 leg2 leg3 leg4

37
 What are “table” and “legs”
• Internal nodes
rootNode
Node table = new
table
Node(“Table”);
… legs
Node legs = new
Node(“Legs”); … … … …

38
 Putting it Together
rootNode

legs.attachChild(gLeg1);
Table
legs.attachChild(gLeg2);
legs.attachChild(gLeg3); tableTop Legs

legs.attachChild(gLeg4); Leg1 Leg2 Leg3 Leg4

table.attachChild(tableTop);
table.attachChild(legs)

rootNode.attachChild(table);

39
 But Does It Change the Picture?
No

40
 Transforms Are in All Nodes!
legs.move(0,-5f,0);

rootNode

Table

tableTop Legs

Leg1 Leg2 Leg3 Leg4

41
Summary: Manipulation of Vectors

w
v
2v v
(-1)v (1/2)V v+w

Vector addition
Scalar multiplication of sum v + w
vectors (they remain parallel)

y
w
P
v-w
v v

-w
Vector difference O x
v - w = v + (-w)
Vector OP 46
 Summary: Vector Arithmetic
• V=(xv,yv,zv) a vector, λ a number
λV = (λxv, λyv, λzv)
• V = (xv, yv, zv); W = (xw, yw, zw)
V + W = (xv+xw, yv+yw, zv+zw)
V - W = (xv-xw, yv-yw, zv-zw)

What about a product of V and W?

And why?

47
 Summary: Vector Algebra
• a+b=b+a (commutative law)
• (a + b) + c = a + (b + c) (associative law)
• a+0=a
• a + (-a) = 0
• λ (μa) = (λ μ)a
• (λ + μ)a = λ a + μa
• λ(a + b) = λ a + λ b
• 1a = a

48