IS660Z Programming Games Using Visual Basic

Overview of Cannonball

Computer graphics coordinate system

Using a timer Ballistics Drag and drop

Cannonball

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 off

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 haven’t 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 cannonball’s 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

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.

Angle (traditional name is theta)

Formulas to calculate motion Constant velocity (horizontal)Distance traveled = velocity * timeNew_position = velocity*time + old_position

Acceleration (vertical)let g=accelerationNew_velocity = g * time + old_velocityAverage 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) positionHorizontal 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 implementationStaged 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 offset (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

Mouse arrow (X,Y) is here

Target would move here without sngDragx, sngDragy

Wrong:

Left = X

Top = Y

Right:

Left = X - sngDragx

Top = Y - sngDragy

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