Programming games

1
Programming games

• Registration experiment. Drawing.
• Equations of motion. Odds and ends. First phase
  of cannonball due. Preview video, audio.
• Homework (1 week) Finish cannonball.

2
Reflection

• Now that you have worked in Flash, time to
  reinforce certain concepts.
• Always good to reflect on what you have done.
• Why is the code written as it is?
• Note the code can be written different ways,
  just as prose can be different!

3
Registration/origin

• Defines the position of a movie clip
• Origin and transform point may be different. Can
  adjust either one.
• Not necessarily the center of occupied pixels of
  the object
• YOU decide where you want that to be.
• Remember if/when you change a symbol in the
  Library, it changes everywhere!
• unlike changing the contents of a frame

4
Cannonball

• Tutorial gives the check for hitting the ground
  to be in terms of registration point of ball
  versus registration point of ground.
• This is a very quick test (quicker than
  hitTestPoint or hitTestObject) but will only work
  if the registration point for the ball is in the
  circle representing the ball and the registration
  point for the ground is on the ground.

5
Advice

• Experiment
• create simple movie clips in the Library
• Brush size. Stroke vs Fill.
• Move/make instances of them to the Stage
• Observe the positions (X, Y) in the Property
  Panel
• Notice the origin (cross-hairs) and the
  transformation point (empty circle)
• Write trace statements to reveal positions
  (properties .x and .y)

6
Bit map versus vector graphics

• When bringing an image created elsewhere into
  Flash, may need to convert to vector graphics
• in order to slice up, manipulate,
• Import / Import to StageModify Bitmap / Trace
  Bitmap
• copy and paste, thenModify Break Apart Modify
  Break Apart

7
Caution

• Transparent areas may need to be erased.
• They do represent material! This could matter for
  hitTestPoint or hitTestObject.
• Note and modify as need be
• origin
• transformation point

8
Equations of motion

• displacement time velocity
• Traveling 20 miles/hour for 2 hours
• 40 miles
• Traveling 30 miles/hour for .5 hours???
• Traveling 40 miles/hour for .75 hours???

9
Equations of motion

• change in velocity time acceleration
• Traveling at 30 miles/hour, accelerating
  (changing velocity) 2mile/hour/minute, then after
  5 minutes, now going 30 10 miles/hour 40
  miles/hour

10
Discrete calculations

• Going one speed at the start of an interval and a
  different speed at the end, calculate
  displacement using the average
• displacement
• time (vspeed1 vspeed2).5

11
Ballistics

• Initial movement
• cannonball leaves cannon at initial speed and
  direction ('at an angle')
• BUT we can only move things by moving them
  horizontally and vertically!
• Also, the vertical velocity will change because
  of gravity
• Use trig functions to calculate horizontal speed
  initial vertical speed (will change)

12
Comment

• Games involving pieces/avatars/etc. moving in 2D
  or 3D do make use of mathematical concepts!
• Algebra
• Geometry
• Trigonometry

13
Syntax note

• The brackets make multiple statements the
  equivalent of a single statement
• You may see
• if (condition) statement
• But using the brackets means you won't make a
  mistake if/when you add a statement
• if (condition)

14
Data types

• Numbers are not character strings (text)
• The number 12 is different from '12'.
• The latter is the character string numeral 1
  followed by numeral 2.
• Contents of text boxes are text, that is,
  character strings.
• If your player is inputting a speed or an angle,
  your code must convert this to a number.
• Multiplying will do it! (and you probably didn't
  notice that a data type conversion (also called a
  cast) was taking place.

15
Compiling

• The Flash program translates / combines all the
  coding to make the thing that runs (the .swf
  file).
• This translation process is called compiling.
  Errors found during it are called compiler
  errors.
• Publishing is doing the translation and producing
  an .html file and a .swf file. You upload both
  (plus in certain situations other files) to the
  server. Links are to the .html file.

16
Flash .swf files

• are relatively small because
• they make use of the Flash plugin. The code in
  your program includes calls to routines in the
  plugin.
• Much of the graphics may be vector graphics
  stored as formulas and not bit maps.
• Check out the file sizes.

17
Common problems

• Copying and pasting anything that looks like code
  from tutorial to your project.
• NOT naming things or being inconsistent.
• The name of the Instance on the Stage is what
  matters for the coding
• If there are compiler errors, it will not work.

18
Issues

• My cannonball has nothing drawn directly on the
  Stage. It does have instances of symbols brought
  to the Stage and given names!
• ball, cannon, ground, target
• It does have 2 input/editable text fields and 2
  static/read-only labels
• You can add other things
• graphics/drawings directly on Stage
• other instances

19
Caution

• A cannonball project is due in 1 week.
• You can do a fancier cannonball for your Flash
  project.
• Note fanciness needs to include some
  enhancements to the code
• For example,
• Multiple targets
• Target undergoing different stages
• Different behavior by cannon or ball
• ?

20
Note

• I use the name cannon. To be more accurate, it is
  the barrel of the cannon, the part that rotates.
  The base of the structure does not change

21
Stroke and fill

• Certain tools (rectangle, oval) produce a stroke
  (outline) and a fill. You need to think about
  what you want!
• A stroke is not produced after the factat least
  I dont think so.

22
Layers on timeline

• Used for graphical effects
• Put the ground ABOVE the rest
• Put interface ABOVE the rest

23
Video in Flash

• More than one way to incorporate video into Flash
  
• bring in whole video that plays along with the
  frames. We will not use this way!
• For this class, we will use a FLVPlayback object
• Requires an import statement
• This allows shorthand names for built-in parts of
  ActionScript
• Requires statement adding to Display list
• Objects created in code (as opposed to put
  directly on the Stage) need to be added to the
  Display list to be shown.

24
Videos

• Different types of videos (like different types
  of images)
• Flash video playback requires videos of type .flv
• Can use Adobe Flash Media Encoder (part of the
  Adobe CS5 package) to take one type of video and
  produce an flv

25
Basic coding

• import fl.video. //get the builtin classes
• var flvFLVPlayback //set up variable
• flv new FLVPlayback() //give it a value
• flv.source "dickey2.flv" //set source attribute
• flv.x 10 //position on screen horizontally
• flv.y 10 // and vertically
• addChild(flv) // make visible by adding to
  // Display list

26
addChild

• Adds to the Display list.
• In my tutorials, you also will seecanvass.addChil
  d(stuff)
• This adds the newly created stuff object as a
  child of canvass. This will determine the
  positioning of stuff.

27
Skins

• These are the video clip controls.
• Appropriate when you want to give the
  player/user/customer more controls
• You may choose NOT to give user control in
  certain cases
• Many choices
• USE HELP!
• Requires you to upload an .swf file to the
  server.

28
Files for your application

• Your application will consist of the following
  files. Say your application is called mywork.fla
• mywork.html
• mywork.swf
• For each video f1.flv, f2.flv, etc. The names
  f1, f2, need to be replaced by the names you gave
  the video. (Remember no blanks!)
• For each skin the name of the skin file
  xxxx.swf

29
Video examples

• Play back single video
• Play back choice of video (two ways)
• Bouncing Ball
• Used mask to make the playback a circle
• Jigsaw puzzle turning into video
• This can be your final project, not this 1 week
  assignment.
• ???

30
Video

• Use camera
• Need to upload
• If not .flv, use Flash Media encoder to made an
  .flv
• Use http//file2hd.com/ (or other sites) to
  download video from YouTube
• Note I prefer you to use your own. If you use
  someone else's, you must make 'value-add' to the
  project.

31
Audio

• The name of the Flash object is Sound. The object
  for video is FLVPlayback. So I tend to say video
  and sound.
• Two ways for including audio
• associate with a frame
• See Bo the Barking Dog.
• use code
• to get the sound file
• to set a Sound object
• to start and stop and.

32
Sample sound code
could be any URL

• import flash.media.Sound
• import flash.net.URLRequest
• var reqURLRequestnew URLRequest("missle.mp3")
• var msoundSoundnew Sound()
• msound.load(req)
• function playsound(event)
• msound.play()
• playbtn.addEventListener(MouseEvent.CLICK,playsoun
  d)

33
Homework

• Finish Cannonball (Due in 1 week)
• When you finish start Sound or video project. Do
  something simple. You can build on it for the
  final project.
• Buttons for choosing
• Video With or without skin
• With saving using SharedObject
• As part of other project
• Bouncing ball
• Rock-paper-scissors
• Cannonball (add sound when hitting target!)
• ??? Ask