Programming games

1
Programming games

• Demonstrate cannonball
• Homework (bouncing ball due today) Cannonball
  Phase 1 due next week.
• Complete cannonball due following week.

2
Text fields

• Static does not change
• Dynamic can be changed by code
• Requires an instance name
• Input can be changed by code OR by the player
• Requires an instance name

3
Event handling

• Setting up Flash to listen for an event and do
  something when it occurs.
• Examples
• flipbtn.addEventListener(MouseEvent.CLICK,flip)
• rockbtn.addEventListener(MouseEvent.CLICK,
  function(ev) computerturn("rock") )

4
Event handling other mouse events

• mybtn.addEventListener(MouseEvent.MOUSE_DOWN,show
  pic)

5
Event example for timing

• mytimer.addEventListener(TimerEvent.TIMER,movebal
  l)
• Note you need to havevar mytimerTimer new
  Timer(50)
• And also
• mytimer.start()

6
Event example for video

• cam.addEventListener(ActivityEvent.ACTIVITY,activ
  ityHandler)
• Note this needed prior coding to set up camcam
  Camera.getCamera()
• cam.setMotionLevel(75,3000)
• See tutorial, examples on my site

7
Event handling

• Requires creating something
• by moving to Stage and naming buttons or other
  instances OR
• By creating things (using new term) in code
• Registering the event listener objectname.addEven
  tListener(name of event , function to be called)

8
General comments

• In ALL programming, 'things' need to be named in
  order to manipulate them.
• In Flash, this means
• For dynamic and input text fields, you need to
  put a name into the Var field in the Properties
  panel
• For movie clips (such as the ball for bouncing
  ball), you need to put a name into the instance
  field.

Flash 8 9 give instance name and use .text
property
9
Passing of time JavaScript

• The passing of time was handled/signaled using
  the
• setInterval(code, interval_length) sets up
  repeated events
• setTimeout(code, timed_amount) sets up one event

10
Passing of time Flash

• One way use frames
• Default 12 frames/second
• Cel animation uses this.
• Bouncing ball used Timer object.
• Also use this for cannonball

11
Reflect on Bouncing ball

• Computed animation
• Timer object, TimerEvent.TIMER registered (using
  addEventListener) to moveball
• mytimer.addEventListener(TimerEvent.TIMER,
  moveball)
• moveball(ev) ... Moved ball in straight line

12
Bo the dog

• Look at source file.
• The movie clip symbol uses cel animation (aka
  frame by frame animation) to show movement of
  legs.
• first frame Bo sitting. Later frame, starting
  with frame with label shows movement. This is
  like rock-paper-scissors!
• The movie clip instance on the Stage is moved
  around much like the bouncing ball computed
  animation.
• Note no walls. Bo goes off on top/bottom/either
  side and then reappears.

13
Cannonball

• Example of ballistics aka projectile motion
• Simulation of effects of gravity
• Make the vertical displacements change!
• Horizontal displacements remain the same
• No wind resistance
• Initial vertical and horizontal motion calculated
  from angle of cannon

14
Cannonball (Flash)

• Interface
• angle of cannon specified, (not separate
  horizontal and vertical velocities)
• Requires the code to use trig functions to
  'resolve' the vectors. This means calculate
  vertical and horizontal components from the
  (initial) velocity out of the cannon.
• Possible outcomes
• Hit ground
• Hit target target crumples
• Achieved by cel animation in the movie clip
  symbol for the target

15
Cannonball collisions

• Collisions must be detected by coding!
• There are no ball, ground, target.
• I use target.hitTestPoint, a method that checks
  if the point (x,y) occupies the same position as
  any material of the target
• There also is hitTestObject, which compares
  bounding boxes
• I use if (ball.y gt ground.y) for the check for
  hitting (reachinggoing beyond) the ground
• Be sure that the origin/registration point for
  the ground is on the ground, not way above it!

16
Crumbling Target

• Instance of movie clip defined/added to Library
• Frame 1 shows original target. Actions panel has
• stop()
• When target is determined to be hit in the
  Actions panel of Scene 1target.goToAndPlay(2)T
  arget Last frame has stop()

17
Reflection

• Mixture of computed and cel (frame by frame)
  animation
• Computed animation similar to bouncing ball
• Cel animation (in target movie not main movie)
  similar to rock-paper-scissors

18
More on angles

• Your code will rotate the cannon movie instance
  to 'be' the angle specified.
• Your code determines the (initial) horizontal
  movement and the (initial) vertical movement.
• The code does not check for a bad angle, meaning
  one 90 degrees or more.
• Opportunity for improvement

19
Angles

• Standard definition of angles is 360 degrees to a
  circle. This is what the player is shown
• Initial setting is 45 degrees.
• Most computer packages use radians, not degrees.
  Radians are an intrinsic measure. Take the radius
  of the circle and lay it around the circumference.

20
Radians
21
Radians

• Wrap a radius length around the circle. This
  defines an angle

22
Conversion

• See tutorial for this code.
• Built-in Math methods for trig functions.
• If you 'know' R and angle A
• P R Math.sin(A)
• M R Math.cos(A)

R
P
A
M
23
Animation

• Timer object, set up similar to Bouncing Ball
• The moveball function (for the final phase of
  cannonball) makes checks for the ground and the
  target
• I stress similarities so you can make use of
  concepts in your own work.

24
Animation

• done by re-positioning ball based on
  calculation done with ActionScript.
• NOT by making new drawings in each frame.

25
Graphics (material)

• Can be 'off stage'
• For example, cannonball is positioned at mouth of
  cannon when FIRE button is released.

26
Homework

• Bouncing ball due today
• Start of Cannonball due next week.
• Just get the ball going in an arc first.
• Then create crumbling target and put checking for
  hitting in the code.
• Complete cannonball due following week.
• NOTE this division of the project is done to
  teach you to plan and do this with your own
  projects!