IS660Z Programming

Games Using Visual Basic

Overview of Cannonball
Cannonball
Computer graphics coordinate
system
Using a timer
Ballistics
Drag and drop
Coordinates and
Positioning
Visual Basic
controls are
positioned
through Top and
Left properties
Width and Height
properties
determine the
size
Coordinates for lines
Lines are
positioned in
terms of x1, y1,
x2, y2 values
X1,Y1 is one point
X2,Y2 is the
second point
But notice Y2 is
less than Y1?
Coordinate system
Computer systems are
backwards on Y axis
The Left/X values
increase moving to
the right
The Top/Y values
increase moving
DOWN the screen
Therefore when you
use code to move
things you need to
know this!
Timer control
Has very few
properties
Interval must be non-
zero for timer to work
Enabled = true turns
on the timer, enabled
= false turns it of
Can use multiple
timers
Managing timers
Timer appears in
design view, but not
when the game is
running
Interval is in
milliseconds -- If a
timer named timFalling
has Enabled set to True
and Interval set to 500
then timFalling_Timer
will happen every
second
Ballistics
Try out Cannonball if
you havent already
Notice the ball takes
an arc like path
This is natural
motion of object
subject to gravity
The calculation of the
motion of an object
subject to gravity is
call ballistics
Simulation has two parts
Ball is moving both horizontally
(across) and vertically (up and
down)
Our simulation uses two formulas to
the ball in both directions and take
gravity into account
Horizontal motion continues with no
acceleration (no change)
Vertical motion is changed by gravity
Physics & computer graphics
requires: when cannonball is shot
out of cannon at an angle, your
code must resolve the initial
velocity vector into horizontal and
vertical components (see p. 86)
Velocity is defined as speed and
direction
Timer event and ballistics
Timer event carries out the
animation
At each occurrence of the timer
event, a new position for the ball is
calculated and the cannonballs
positional properties are updated
These calculations apply formulas
from ballistics
Animating the cannonball
Step 1: resolving the vectors, i.e.
determining initial horizontal and
vertical speed (based on angle of
cannon and speed from scrollbar)
Step 2: repositioning the
cannonball over time
What Events?
Step 1: FIRE! Click
event
Step 2: Timer
event
Resolving the vectors
Angle
Angle (traditional name is theta)

vx = v * Cos (Theta)
vy = v * Sin (Theta)

Where v is velocity coming out of cannon,

theta is the angle, vx is horizontal velocity,
vy is vertical velocity.
Formulas to calculate
motion
Constant velocity (horizontal)
Distance traveled = velocity * time
New_position = velocity*time + old_position

Acceleration (vertical)
let g=acceleration
New_velocity = g * time + old_velocity
Average velocity = .5 * g*time+old_velocity
New_position = .
5*g*time*time+old_velocity*time+old_position
Horizontal and vertical
velocities (VB code)
X2,Y2 is endpoint of cannon, TT is
elapsed time
xx, yy is new (recalculated) position
Horizontal velocity (vx) is constant:
xx = vx * TT + X2

Vertical velocity (vy) changes

(decelerates):
yy = .5 * g *(TT * TT) - vy * TT + Y2
 Overview of cannonball

FIRE ! Command button calculates initial

horizontal and vertical velocity from scroll
bar and the angle of the line representing
the cannon
Timer event will increment variable for
time and apply the equations of motion to
the cannonball (a shape control object)
Timer event also does calculation to determine
if cannonball has hit the ground or hit the
target
3 Stage implementation
Staged implementation is highly recommended
for all but the smallest of projects.

1. Cannonball moves through the air. No

checks to stop it! Stop execution by clicking
on stop button on toolbar.
2. Check for hitting ground or hitting target.
3. Implement event handlers for changing
speed, moving tip of cannon & target.
Drag and drop (Stage 3)
player is able to
change the angle
of the cannon
player is able to
move the target
Three mouse
events are used
to do this
Three Mouse Events
Drag and drop looks like
one event, but it is
actually implemented
across three Form events
MouseDown signals
beginning of drag
MouseMove signals re-
positioning of object
MouseUp signals drag
and drop is over
Drag and drop logic
MouseDown - if mouse
arrow is cannon tip or
target, drag and drop
begins (Boolean is set to
True)
MouseMove - as long as
Boolean is True
cannon/target is
repositioned
MouseUp - drag and
drop ends (Boolean is
False)
Drag and drop Booleans
blnCannonMove
set to True in MouseDown if mouse arrow is
over cannon tip
set to False in MouseUp
blnTargetMove
set to True in MouseDown if mouse arrow is
over cannon tip
set to False in MouseUp
Both are globals
Is mouse arrow over
cannon?
MouseDown event has x,y parameters
containing mouse arrow location
closetocannon function (p. 105)
returns True if mouse arrow is near
cannon
Test is if x,y is within 100 twips of end
of cannon (it would take great
dexterity to hit it EXACTLY. Why?)
Is mouse arrow over
target?
Is X between Left
and Left + Width?
Is Y between Top
and Top - Height?
If both are True,
mouse arrow is
over target.
See p. 92
Moving the cannon
Cannon is repositioned in
MouseMove (if blnCannonMove is
True)
Endpoint of cannon (X2,Y2) is
changed to X,Y (mouse arrow
location)
see p. 93
Moving the target
In MouseDown ofset (distance) from
mouse arrow to Top, Left is stored in
sngDragx, sngDragy
Target is repositioned in MouseMove
(if blnTargetMove is True)
Left is changed to X - sngDragx
Top is changed to Y - sngDragy
see p. 94
 Why do we need
sngDragx, sngDragy?
Top, Left is here
Wrong:
Left = X
Top = Y
Mouse arrow (X,Y) is here
Right:
Left = X - sngDragx
Top = Y - sngDragy

Target would move here without sngDragx, sngDrag

Review
Computer coordinate system
Using timers
Simulating flight using ballistics
Drag and drop