Programming games

1
Programming games

• Show your version of Bo the dog.
• Start cannonball
• Preview video, audio
• work session (cannonball)
• Homework Cannonball with ball in a parabolic
  arc. Phase 2 checks for ball hitting ground or
  target. Phase 2a target collapsing/exploding.
  Next project sound or video.

2
Animation

• Is created by displaying sequences of pictures so
  that our eyes see movement.
• Cel animation (aka frame by frame) is a sequence
  of distinct frames. The programmer creates the
  distinct frames.
• Computed animation is generated by code changing
  what is on the screen. This could be moving
  things around, changing shape, color, visibility,
  alpha, etc.

3
Tweening

• Flash provides a quick (quicker) way of producing
  the sequence of frames for cel (frame by frame)
  animation.
• Motion tweening specifying a movie clip instance
  or a shape moving along a path
• Shape tweening specifying a first and last shape
• This is still called frame by frame animation.
  Flash authoring environment helps out during
  creation time.

4
Reprise on animation

• Cel animation use distinct frames
• all drawn by programmer/creater or
• some created by Flash itself
• Examples rock-paper-scissors, collapsing target
  in cannonball, Bo's legs
• Computed animation
• code (written by programmer/creater) changes
  objects on Stage
• Examples ball in bouncing ball, ball in
  cannonball, movement of all of Bo.

5
Reprise Text fields

• Text fields are created by the programmer and
  given initial values.
• Read-only (Static) text fields do not change
  during runtime. Label parts of the Stage.
• Selectable (Dynamic) text fields can be changed
  by code (written by the programmer during
  creation time) during run time. Show results.
• Editable (Input) text fields can be changed by
  the player AND by code. Presumably, code (written
  by the programmer) reads/examines the input text
  fields changed by the player.

6
Programmer versus player

• Programmer (creator/developer) uses Flash to
  create (build) an application.
• Player is the name I give to the end-user of our
  applications.
• Programmer uses the Flash environment to build an
  application, including coding, drawing, etc.
• Flash, 'the computer', does nothing by itself.
• Take ownership of what you do!

7
Hitting walls Bouncing ball

• Angle of incidence equals angle of reflection
• Because the walls are horizontal and vertical,
  this means the change is pretty simple
• Hitting horizontal wall causes the vertical
  component to change sign
• Hitting vertical wall causes the horizontal
  component to change sign

8
Cannonball

• Player changes/sets angle of cannon and speed of
  cannonball out of the mouth of the cannon
• Using a time event, ball moves according to
  simple model of ballistic motion ball under
  effect of gravityparabolic arc.
• You will NOT see any quadratic equation. You will
  see mathematical expressions.
• This is computed animation
• Code checks for hitting ground and hitting
  target. If ball hits target, target crumbles (or
  explodesit is up to you).
• This will be cel animation. You will draw the
  crumbling/exploding target.
• Demonstrate.

9
Overview cannonball

• 1 frame
• target symbol has several frames
• 3 layers for organization
• May use additional layers for graphical effects
  putting ground on top of ball.
• 5 symbols in Library
• ball movie clip
• ground movie clip
• cannon movie clip
• target movie clip
• fire button
• Instances of those 5 symbols on the Stage (each
  named)
• Two editable/input text fields and two read-only
  text fields

10
(No Transcript)
11
ActionScript

• Main movie, actions layer
• Global variables, including Timer object,
• register listeners for Timer event and fire
  button event,
• Function for starting the cannon ball flight
• Function for Timer event that advances the
  cannonball
• Later add code to check for collisions
• target symbol initial design 1 frame
• Later design add frames and stop() in first
  frame and last frame

12
Angles

• Flash (and most other programming languages) use
  radians for measuring angles.
• Actually, Flash uses degrees for rotation
  attribute of objects and radians for trig
  functions.
• Radians is an intrinsic unit of measure. There
  are 2 pi radians in a circle. Math.PI is a
  built-in constant.
• Math.PI is equivalent to 180 degrees
• Math.PI/2 is equivalent to 90 degrees
• Math.PI/4 is equivalent to 45 degrees
• angle_in_radians angle_in_degrees Math.PI /
  180
• We don't ask our player to think in radians! Our
  code does the conversion work.

13
Cannonball

• Phase 1 get arc working
• Phase 2 add checks, add frames to target
• target crumbles
• target movie clip symbol has cel animation
• You add frames to the target symbol in the
  Library
• The instance of the target symbol you have placed
  on the Stage will now have/be the new target
• After hit, ActionScript code in the Main movie
  will be target.goToAndPlay(2) to advance the
  target to its frame 2 and subsequent frames.

14
Layers, hints

• Put all the material in the board layer of the
  first frame.
• Give everything an instance name.
• Add layer for the interface elements text field
  and buttons
• Input text fields need the INSTANCE name.
• Add layer for actions
• If you want the target to sink into (behind)
  ground, you may make a new layer and move (cut
  and paste in place) ground instance to it. The
  layer with the ground is above the layer with
  everything else.

15
Advice

• The firecannon code positions the ball. If your
  cannon is different than mine, you may need to
  modify this part of the code.
• The hitTestPoint examines the material (occupied
  pixels) in the target clip versus the balls x
  and y position.
• Make sure the origin of the ball is in its
  center!
• The check for reaching the ground is done in
  terms of the ground's origin
• Make sure this is on the ground!

16
CB issues

• You need 4 text boxes!!
• The read-only/static text field containing the
  word speed
• The editable/input text field with instance name
  speed. It holds text representing a number.
• The read-only/static text field containing the
  word angle (could be degrees)
• The editable/input text field with instance name
  anglein. It holds text representing a number.
• NOTE the application starts with values in speed
  and anglein

17
CB issues

• The default for Flash is to go frame to frame
  so.
• For the crumbling target you need to put stop()
  in the first frame and the last frame

18
Classwork/homework

• Read tutorial! Read the whole thing and then go
  back and create the application, starting with
  just getting the ball to go in an arc.
• You need to create cannon, ball, ground, and
  simple, 1 frame target symbols. Move to Stage and
  name.
• You need to get a button from Common Library.
  Name.
• You need to write code.
• Create 1 Timer object.
• Code for event handling (addEventListener) for
  button and timer.
• Can add code for checking for hitting ground and
  target later.

19
Homework

• Cannonball phases. GET first phase working BEFORE
  GOING ON.
• Note testing the program means to test when the
  ball hits the target AND when it does not hit the
  target. You also should include going all the way
  over the target.
• Can wait to create frames of collapsing/exploding
  target until rest of program works.
• Advance notice Video or Audio
• read tutorials. Look at source files
• Think about how you will acquire video or sound
  files.