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 * 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 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