Programming games

Registration experiment. Drawing.Equations of motion. Odds and ends. First phase of cannonball due. Preview video,

audio.Homework: (1 week) Finish cannonball.

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!

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

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.

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)

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

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

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

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

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

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)

Comment

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

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) { }

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.

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.

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.

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.

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

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

• ?

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

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 fact…at least I don’t think so.

Layers on timeline

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

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.

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

Basic coding

import fl.video.*; //get the builtin classes

var flv:FLVPlayback; //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

addChild

• Adds to the Display list.

• In my tutorials, you also will seecanvass.addChild(stuff);

• This adds the newly created stuff object as a child of canvass. This will determine the positioning of stuff.

SkinsThese 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.

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

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.

• ???

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.

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….

Sample sound code

import flash.media.Sound;import flash.net.URLRequest;var req:URLRequest=new URLRequest("missle.mp3");var msound:Sound=new Sound();msound.load(req);

function playsound(event) { msound.play();}playbtn.addEventListener(MouseEvent.CLICK,playsound);

could be any URL

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