Arcade Game Animation

64 Pages·2000·0.53 MB·English

Chapter 9
Arcade Game
Animation
In this chapter, you’ll learn about:
(cid:1) Animation
(cid:1) Animation properties and fundamentals
(cid:1) Sprites and grid squares
(cid:1) Core arcade game animation techniques
(cid:1) Creating animation sequences for arcade games
(cid:1) General animation tips
293
294
Chapter 9 / Arcade Game Animation
What is Animation?
Animationistheprocessthatproducestheillusionofmovement.Itworksbydis-
playingtwoormoreimagefragmentscalledframes(alsocommonlyreferredtoas
cells).Whentheseframesaredisplayedinrapidsuccessionwithsubtlechanges
madetotheircontent,oureyesregisterthesechangesasmovement.
Animationisnotamysticalart.Rather,it’sawell-establishedprocessthatcom-
binestheaestheticsofdesignwithreal-worldphysicsinordertobreathelifeinto
whatareotherwisestaticobjectsandscenes.Thischapterwillintroducethefun-
damentalconceptsbehindanimationtoyousothatyoucancreateandimplement
animationinyourownarcadegameprojects.
Animation Properties and Fundamentals
Tobeabletocreateeffectiveanimation,youmustlearnhowtodividetheele-
mentsofmotionintotheirbasiccomponents.Thismeansbreakingthemdown
intoasequenceofeasy-to-followframes.However,beforeyoucandothis,you
mustfirstlearnandmastertwothings:theartofobservationandthecharacteris-
ticsofbasicmotion.
Thesecretbehindcreatinggreatanimationliesinkeenobservationandtheability
tofocusonthesubtledetailsofhowdifferentobjectsmove.Everyobjectexhibits
certainpeculiaritiesasitmoves.Someoftheseidiosyncrasiesareslightwhile
othersaremorepronounced.Assuch,thereareseveralcharacteristicsofmotion
thatyoushouldbeawareofbeforeattemptingtoanimateanobject.Thesecharac-
teristicsincludesuchthingsas:
(cid:2) Motionlines
(cid:2) Motionangles
(cid:2) Key-framesandin-betweens
(cid:2) Weightandgravity
(cid:2) Flexibility
(cid:2) Secondaryactions
(cid:2) Cyclesandloops
(cid:2) Tempo
Motion Lines
Amotionline(sometimesreferredtoasanaturalpath)isaninvisiblelinecreated
byanobjectasitperformsaseriesofsequentialmovements.
295
Chapter 9 / Arcade Game Animation
Motion Line
FIGURE9-1:MotionLineExample
Motionlinesareessentialtocreatingeffectiveanimations,andmanipulatingthe
motionlinecanaddrealisticemphasistoanimatedobjects.Forexample,youcan
createverysmoothanimationsbymakingsmallalterationstothemotionline.
Conversely,youcanproduceverydramaticanimationsbymakinglargeorexag-
geratedchangestothemotionline.
Evenmoreinterestingtotheanimatorishowobjectsproducedifferentshaped
motionlinesdependingonhowtheymove.Forexample,abullethasamotionline
thatisstraightandevenwhileabouncingballhasamotionlinethatiswavyand
uneven.Thisbeingsaid,motionlinesmustbeconsistentwithanobject’sreal-
worldbehaviorinordertoproducerealistic-lookinganimation.Otherwise,the
qualityoftheanimationwillsuffer.Therefore,youcanuseanobject’smotionline
asameansofdeterminingwhetherornotitisbeinganimatedcorrectlyand
convincingly.
Thebestwaytofollowanobject’smotionlineistolocateitscenterofgravity.The
locationofthecenterofgravityvariesaccordingtothetypeofobjectinvolved.
Tohelpyouaccomplishthis,Table9-1providessomeexamplesofwherethecen-
terofgravityisforanumberofcommonobjects.Usingthisinformation,you
shouldthenbeabletoidentifythecenterofgravityforothertypesofobjects.
TABLE 9-1: Location of the Center of Gravity in Different Objects
ObjectType EstimatedCenterofGravity
2-legged animals Head
4-legged animals Chest
Flying animals Torso
Humans Head
Insects Torso
Spaceships or airplanes Hull or fuselage
Tracked or wheeled vehicles Turret or body
296
Chapter 9 / Arcade Game Animation
Motion Angles
Motionanglesareoneofthemostobviouscluesastoanobject’sdirectionasit
moves.It’simportanttopointoutthatthereisadirectrelationshipbetweenan
object’sdirectionanditsmotionangle.Almostanychangeinanobject’sspeedor
directionwillrequireasimilaradjustmenttoitsmotionangle.Therefore,the
sharperthemotionangle,thefasterorthemoreextremethechangeinthe
object’smotionordirectionwillbe.
Motionanglesareparticularlyusefulforconveyingasenseofrealisminanimated
objects.Forexample,ajetfightermakingasteepbankwillhaveamotionangle
thatissharperthanajetfighterthatisflyingstraightandlevelasshowninFigure
9-2.Inthiscase,youcanuseitsmotionangletovisuallydiscernthatitistravel-
ingatahighspeed,whichultimatelyhelpstoreinforcetheillusionofrealism.
Althoughtheactuallocationofmotionanglesvaries,mostmotionanglesare
locatedalongthespineofanobject,i.e.,thebackboneofahumanbeingorthehull
ofaspaceship.
StraightMotionAngle
SharpMotionAngle
FIGURE9-2:MotionAngleExample
Key-frames
Mostpeopleareawareoftheextremesthatoccurduringmovement,i.e.,such
noticeablethingsastheflappingofwingsorkickingoflegs.Inanimation,werefer
totheseactionsaskey-frames.
Beingabletodeterminewhichframesinananimatedsequencearethe
key-framesisanextremelyimportantpartoftheanimationprocess.Thisis
becausekey-framesserveastheframeworkfortheentireanimationsequence.
Inaddition,thereisadirectrelationshipbetweenthenumberofkey-framesused
andhowsmoothaparticularanimationappears.Thepresenceofmorekey-frames
inananimatedsequencemeanssmallerincrementalchangesintheanimationand
297
Chapter 9 / Arcade Game Animation
resultsinsmootheroverallmovement.Havingfewerkey-framespresent,onthe
otherhand,resultsincoarserandjerkieranimation.Pleasekeepthisveryimpor-
tantrelationshipinmindasithasadirecteffectonthequalityofanyanimation
youcreate.
Key-framesaremosteffectivewhentheyincorporateveryexaggeratedordra-
maticelements,sincetheseactionscanbeusedtoemphasizethemostcritical
movementsinananimatedsequence.Inaddition,exaggerationcanhelpyouto
betterdeterminethemosteffectivestarting,middle,andending
pointsforananimatedsequence.Forexample,Figure9-3shows
thetwokey-framesforabirdflying.Noticehowtheymirrorthe
twoextremestatesoftheaction,i.e.,thewingmovingupand
thewingmovingdown.Thesetwoframesareextremelyexag-
FIGURE9-3:
gerated,whichmakesthemideallysuitedaskey-framesbecause Key-frame
theirdifferencesareclearlydistinguishabletotheobserver. Example
It’simportanttorealizethatthemorekey-framesaparticularanimationhas,the
morecomplexitisandthelongeritwilltaketodesign.Thisiscertainlysome-
thingtoconsiderwhendesigningtheartworkforanarcade-stylegame,especially
whenworkingunderatightdeadline.Inadditiontotakinglongertocreate,com-
plexanimationsmakeiteasiertointroduceerrorsandmistakesintotheanimation
sequence,whichcanhaveanegativeimpactontheanimation’soverallqualityand
effectiveness.
Inreality,however,theactualsituationdictateswhichapproachtotakeandhow
manykey-framestouseforagivenanimation.
Therewillbeinstanceswhereyoucangetawaywithusingfewerkey-framesthan
inothers.Inmostcases,youcanuseasfewastwoorthreekey-framesperobject
inarcade-stylegames,withlittleornodetrimentalimpact.However,youshould
lookateachgameonacase-by-casebasisbeforedecidingonaparticularnumber
ofkey-framestouse.Ifyoudon’t,youruntheriskofreducingthequalityofyour
game’sanimationsand,ultimately,thequalityofthegame.
PleaserefertoTable9-2forgeneralsuggestionsonkey-frameusageindifferent
arcadegamegenres.
TABLE 9-2: Object Key-frame Quantity Suggestion Chart
ArcadeGameType Key-frameUsageSuggestions
Pong games 2 per animated object
Maze/chase games 2-3 per animated object
Puzzlers 2-3 per animated object
Shooters 2-4 per animated object
Platformers 2-6 per object
298
Chapter 9 / Arcade Game Animation
NOTE: These are subjective estimates only. Each game situation will be differ-
ent and will depend on the design time, the game’s target platform, and the
overall level of animation quality you want to achieve.
It’simportanttonotethatkey-framescanoccuratanypointwithinananimated
sequence.However,certainfactorssuchasthetypeofanimationinvolvedandits
relativecomplexitycaninfluencewhereinthesequencetheymightactually
appear.Forexample,non-repetitivemotionssuchasexplosionshavemany
key-framesandtendtobelocatedatseveralpointswithintheanimationsequence
orwhereverthereisamajorchange.Incomparison,repetitivemotionssuchas
walkingorflyinghaveonlyafewkey-frames(i.e.,twoorthree).Thesetendtobe
distributedatthestart,middle,orendoftheanimationsequence.
Afterthekey-framesoftheanimationareidentifiedandestablished,the
in-betweenframesmustthenbeadded.In-betweensareframesofanimationthat
areusedtosmoothoutthetransitionbetweenindividualkey-frames.
Inanimation,key-framesareimportantfordefiningtheobject’sprimarymove-
ments,whilein-betweensareresponsibleformakingtheentireanimationlook
smoothandconvincing.Introducingslightorsubtlechangestoeachframe
betweenkey-framescreatesin-betweens.Thisprocessisalsoknownastweening,
andgreatcaremustbetakentoensurethatthesechangesaresmallinorderto
maintaintheillusionofcontinuousandrealisticmovement.
Figure9-4showsanexampleofhowin-betweensco-existwithkey-frames.This
exampleshowsananimationofamanswingingastick.Thestartofthesequence
showsthemanwiththestickupattheshoulderandreadytoswing,whilethe
finalframeshowstheendoftheswingingprocesswiththestickfullyextended.
Thesearethekey-framesoftheanimationwhiletheframesthatoccurin-between
themarethein-betweensoftheanimation.
Key-frame Key-frame
Key-frame
In-Between
In-Between
FIGURE9-4:Key-frameandIn-BetweenExample
299
Chapter 9 / Arcade Game Animation
Creatingin-betweensisoneofthemosttediousandtime-consumingaspectsof
designingarcadegameanimation.Fortunately,mostpaintingprogramsallowyou
toeasilyduplicateexistingframessothateachin-betweendoesn’thavetobe
re-createdentirelyfromscratch.Intraditionalanimation,theprocessofduplicat-
inganexistingframeofanimationtocreateanewoneiscalledonionskinning.
Determiningthenumberofframesnecessaryforcreatingaparticulartypeofani-
matedmovementtakestimeandexperiencetofigureout.Tohelpyouonyour
way,Table9-3liststhenumberofframesrequiredtoproduceavarietyofdifferent
animationeffects.Usetheseasageneralguideiftheissueiseverinquestionin
yourowngameprojects.
TABLE 9-3: Common Frame Animation Frame Requirements
Object Minimum#ofFrames Maximum#ofFrames
4-legged animal running 4 16
Animal biting 2 5
Crawling 2 12
Explosions 5 16
Falling 3 5
Flying 2 12
Jumping 2 10
Kicking 2 6
Punching 2 6
Rotating/spinning 4 16
Running 2 12
Swinging (an object) 2 8
Throwing (an object) 2 6
Vehicle flying 2 4
Vehicle moving 2 8
Walking 2 12
Weight and Gravity
Ifyouintendtocreaterealistic-lookinggameanimations,youmustconsiderhow
theelementsofweightandgravitycanaffectyourwork.Whendesigninganima-
tion,youmustrememberthatreal-worldphysicsshouldalwaysapplytothe
sequencesthatyoucreate.Oneofthemostimportantoftheseinfluencesisthatof
weight.Weightaffectsspeed.So,forexample,thelargertheobject,theheavierit
isandthesloweritislikelytomove.
300
Chapter 9 / Arcade Game Animation
Inadditiontoinfluencingthespeedatwhichobjectstravel,weightcanalsoaffect
howeasilyanobjectcanmove.Forexample,thinkabouthowfastaracecarmoves
incomparisontoabattletank.Thetankwillplodacrossthegroundwhereasthe
racecarwillquicklyskimacrossit.Thisisbecausetheracecarweighsless.
Thenthere’stheissueofgravity.Gravityalsoinfluencesthemotionofobjects.In
therealworld,gravitywillexertmoreforce(resistance)againstheavierordenser
objectsthanitwillagainstlighterones.Toseehowthisworks,considerhow
quicklyabombfallsfromtheskywhencomparedtoafeather,orhowarock
bouncesoffthegroundincomparisontoarubberball.Rememberthatpeople
aren’talwayseasilyfooled.Believeme,theyarewellawareofsuchthingsand
failingtoaccountforthesebehaviorsinyouranimationscanhaveanegative
impactonhowtheyareperceivedinagame.
Incidentally,theprinciplesofweightandgravitycanbeappliedtovirtuallyany
animatedobject.Therefore,themoreattentionyoupaytothem,themorerealistic
youranimationscanbe.
Flexibility
Flexibilityisessentialtoproducingconvincingandfluidanimation,particularly
whendepictingcomplex,jointedobjectssuchasanimals,insects,andhuman
beings.Animationswithoutproperflexibilitycanappearstiffandrigid,whichfor
thesetypesofobjectsisalessthandesirableeffect.
Thekeytoaddingflexibilitytoyouranimationsiscarefulplanningcoupledwith
carefulobservationofhowdifferentobjectsbehavewhentheymove.Whenever
youanimateajointedobject,youmustalwaysdeterminewhichpartsoftheobject
(i.e.,arms,legs,etc.)leadthemovementandwhichonesfollowit.It’sveryimpor-
tanttorealizethatnotallbodypartsactuallymoveatthesametimeonallobjects.
Forexample,considerhowaswordsmanmightslashwithhissword.Theswords-
manleadswithhislegsfirsttogainasolidfootingandthenfollowsthroughwith
hisarmtocompletethecuttingmotion.Inanimation,thisflowofmovementis
calledtherangeofmotion.
Whenattemptingtoincorporateflexibilityintoananimationyoumusttakecareto
accountforthelimitsofanatomy.Thatistosay,neverattempttounrealistically
extendtheavailablerangeofmotionthatagivenobjecthas.Don’tdepictobjects
movinginwaysthataren’tpossibleintherealworld.Examplesofthismight
include,butaren’tlimitedto,suchthingsasbendingajointbackwardorinaposi-
tionthatisnotnormallypossibleforonetomake.
301
Chapter 9 / Arcade Game Animation
Secondary Actions
Asmentionedintheprevioussectiononflexibility,notallpartsofanobjectmove
simultaneouslywhenanimated.Therearepartsthatleadtheflowofmovement
andpartsthatfollowit.Thepartsthatfollowthemovementarecalledsecondary
actions.
Secondaryactionsareextremelyimportanttotheanimationprocessbecausethey
addanextradimensionofrealismtoanimations.Essentially,anythingthatisfree
movingcanqualifyasasecondaryaction.Thisincludeseverythingfromhairand
clothingtoeyesandlips.So,forexample,ifacharacterinagameiswearinga
capeandwalking,thesecondaryactionofthisactionwouldoccurwhenthechar-
acter’scapebouncesandswaysasthecharactermoves.Figure9-5showsthisin
frames1and2.
Secondary Action
1 2 3 4
FIGURE9-5:SecondaryActionExample
Secondaryactionsarenotlimitedtosmalldetailssuchasclothingorhair.It’s
importantthatyouunderstandthattheycanbevirtuallyanythinginananimation
sequencethatisn’tthemainfocus.
Cycles and Loops
Inanimation,cyclesaretherepetitiousmovementsthatmanyanimatedobjects
makewhendisplayedinasequence.Asyourabilitytoobservehowobjectsmove
innatureimproves,youwillsoondiscoverthatmanyobjectsincludecyclesin
theirmovements.
Cyclescanbeconsideredthetimesaversoftheanimationprocess.Theyhelpus
avoidthetediumofconstantlyhavingtore-createframestoconstructbasic
actions.Forexample,withoutcyclesyoumighthavetodrawhundredsofframes
ofanimationtoshowabirdflyingacrossthescreen.However,byusingcycles,
yousimplyhavetoidentifytheobject’srepeatedmotionsanddisplaythem
instead.So,ifyourbirdanimationused30framestodisplaythecompleteanima-
tionsequenceyouwouldonlyhavetodrawthethreeorfourframesthatbest
302
Chapter 9 / Arcade Game Animation
representthemajorpointsofmovement.Althoughkey-framesusuallyfallinto
thiscategory,it’simportanttorealizethatthereisn’talwaysadirectone-to-one
relationshipbetweenkey-framesandcycles.
Whilecyclesfocusonrepeatingtheoccurrenceofspecificframeswithinananima-
tionsequence,loopsemphasizetherepetitionoftheentiresequenceasawhole.
Forexample,ananimatedsequenceofamanwalkinggoesthroughanumberof
framestoproducetheillusionofmovement.Byloopingthesequence,youcan
simulatetheeffectofconstantmotionsothatthewalkingsequenceappearstobe
continuous.Therefore,itcanbesaidthatloopshelpustokeepanimatedmove-
mentconstant.
However,thisbeingsaid,it’simportanttounderstandthatnotallobjectsrequire
constantmotionwhilebeinganimated.Loopsareadevicetohelpusachievethis
buttheyshouldn’tbeusedinallanimations.Infact,quiteafewtypesofanimation
don’trelyonloopsatall.
Inadditiontoaddingrealismandcontinuitytoyouranimations,loopingcanalso
saveyoutimebypreventingyoufromhavingtomanuallyrepeattheindividual
framesoftheentireanimationsequence.
Figure9-6showsanexampleofhowcyclesandloopsworktogetherinanima-
tions.Here,frames1and5arecyclesbecausetheyarerepeatingthesameframe
ofanimation.Whenthesequencereachesframe5,itwouldloopbacktoframe1to
createtheillusionofcontinuousmovement.
FIGURE9-6:CycleandLoopExample
Tempo
Everyanimatedobjectcandisplayataspecificedtempo,orspeed.Tempocanbe
usedtocontroltherateatwhichentireanimationsequencesareshownaswellas
thespeedoftheindividualframesthatcomprisethesequence.
Tempoisimportantbecauseitallowsustocreatemorerealistic-lookinganimation
sequences.Itsusefulnessbecomesimmediatelyapparentwhenyouconsiderthat
mostreal-worldobjectsmoveatdifferentratesduringthecourseoftheirmove-
ments.Forexample,considertheaveragemarathonrunner.Whenrunning,a
marathoner’slegsmovefasterduringmid-stridethantheydowhentheyarefully
extended.Youcanaccountforthisfactinyourownanimationsbyusingthedis-
tanceoftheobjectbetweensuccessiveframesasameansofdepictinganimations