2D Animation - Cornell University

thegamedesigninitiativeat cornell universityLecture 122D Animation

Animation Basics: The FilmStrip Animation is a sequence of hand-drawn frames Smoothly displays action when change quickly Also called flipbook animation Arrange animation in a sprite sheet (one texture) Software chooses which frame to use at any time So programmer is actually the one doing animation22D Animationthegamedesigninitiativeat cornell university

Anatomy of AnimationNode Class/*** Sets the active frame as the given index.** @param frame the index to make the active frame*/void AnimationNode::setFrame(int frame) {this- frame frame;int x (frame % cols)*bounds.size.width;int y (frame / tPolygon(bounds);}32D Animationthegamedesigninitiativeat cornell university

Anatomy of AnimationNode Class/*** Sets the active frame as the given index.** @param frame the index to make the active frame*/void AnimationNode::setFrame(int frame) {this- frame frame;int x (frame % cols)*bounds.size.width;Actual code hasint y (frame / cols)*bounds.size.height;some n(bounds);}42D Animationthegamedesigninitiativeat cornell university

Adjusting your Speed Do not want to go too fast 1 animation frame 16 ms Walk cycle 8/12 frames Completed in 133-200 ms General solution: cooldowns Add an int timer to your object Go to next frame when it is 0 Reset it to 0 at new frame Simple but tedious Have to do for each object Assumes animation is in a loop52D Animationthegamedesigninitiativeat cornell university

Combining Animations Characters to a lot of thingsLanding Animation Run, jump, duck, slide Fire weapons, cast spells Fidget while player AFK Want animations for all Is loop appropriate for each? How do we transition? Idea: shared boundaries End of loop start of another Treat like advancing a frameIdling Animation62D Animationthegamedesigninitiativeat cornell university

Combining Animations Characters to a lot of thingsLanding AnimationNot a Loop Run, jump, duck, slide Fire weapons, cast spells Fidget while player AFK Want animations for all Is loop appropriate for each? How do we transition? Idea: shared boundaries End of loop start of another Treat like advancing a frameIdling Animation72D Animationthegamedesigninitiativeat cornell university

Combining Animations Characters to a lot of thingsLanding AnimationTransition Run, jump, duck, slide Fire weapons, cast spells Fidget while player AFK Want animations for all Is loop appropriate for each? How do we transition? Idea: shared boundaries End of loop start of another Treat like advancing a frameIdling Animation82D Animationthegamedesigninitiativeat cornell university

Animation and State Machines Idea: Each sequence a state Do sequence while in state Transition when at end Only loop if loop in graphidle A graph edge means shoot Boundaries match up Transition is allowable Similar to data driven AI Created by the designer Implemented by programmer Modern engines have tools92D Animationwalkthegamedesigninitiativeat cornell university

Animation and State Machines Idea: Each sequence a state Do sequence while in state Transition when at end Only loop if loop in graphidleContinuingAction A graph edge means shootOne timeaction Boundaries match up Transition is allowable Similar to data driven AI Created by the designer Implemented by programmer Modern engines have tools102D Animationwalkthegamedesigninitiativeat cornell university

Complex Example: 12D Animationthegamedesigninitiativeat cornell university

Complex Example: JumpingstandJump Pressstand2crouchJump ReleasecrouchhoptakeofffloatJump ReleaseNear Groundland122D Animationthegamedesigninitiativeat cornell university

Complex Example: JumpingTransition stateneeded to alignthe d132D Animationthegamedesigninitiativeat cornell university

Aside: Sync Kills142D Animationthegamedesigninitiativeat cornell university

The Responsiveness IssueTightness ofthe gameplaystandstand2crouchAdditional delaypreventing jumpcrouchhoptakeofffloatland152D Animationthegamedesigninitiativeat cornell university

Fast Transitions: Crossfade BlendingABt 0.0 Linear interpolation on colorsrc tra (1 t)rb16gc tga (1t)gbbc tba (1t)bbNote weights sum to 1.02D Animationthegamedesigninitiativeat cornell university

Fast Transitions: Crossfade BlendingABt 0.3 Linear interpolation on colorsrc tra (1 t)rb17gc tga (1t)gbbc tba (1t)bbNote weights sum to 1.02D Animationthegamedesigninitiativeat cornell university

Fast Transitions: Crossfade BlendingABt 0.6 Linear interpolation on colorsrc tra (1 t)rb18gc tga (1t)gbbc tba (1t)bbNote weights sum to 1.02D Animationthegamedesigninitiativeat cornell university

Fast Transitions: Crossfade BlendingABt 0.8 Linear interpolation on colorsrc tra (1 t)rb19gc tga (1t)gbbc tba (1t)bbNote weights sum to 1.02D Animationthegamedesigninitiativeat cornell university

Fast Transitions: Crossfade BlendingABt 1.0 Linear interpolation on colorsrc tra (1 t)rb20gc tga (1t)gbbc tba (1t)bbNote weights sum to 1.02D Animationthegamedesigninitiativeat cornell university

Combining With AnimationACycle thefilmstripnormally21BCycle thefilmstripnormally2D AnimationCombinewith alphablendingthegamedesigninitiativeat cornell university

Related Concept: TweeningAB Act of linear interpolating between animation frames Because we cycle filmstrip slower than framerate Implements a form of motion blur If animation designed right, makes it smoother222D Animationthegamedesigninitiativeat cornell university

Tweening Works for Transforms TooAB Any transform is represented by a matrix Can linearly interpolate matrix components Gives a reasonable transform “in-between” Aside: This is a motivation for quaternions Gives smoother interpolation for rotation232D Animationthegamedesigninitiativeat cornell university

Supporting Tweened AnimationsActionsActionManager Represents animation type Manages active animations Moving, rotating, scaling Filmstrip sequences Maps actions to scene graph Allocates animation state But not active animation Has a separate update loop Can be reused and replayed Can be copied safely Initialization step at start Update step to increment Think of as a “template” Similar to asset manager Defines the tweening But has no internal state Animations have key id Run update() to fit budget242D Animationthegamedesigninitiativeat cornell university

Supporting Tweened AnimationsActionManagerInitialize Manages active animations Maps actions to scene graph Allocates animation stateUpdateAssetLoader Has a separate update loopAccess Similar to asset manager Initialization step at start Update step to increment Animations have key id Run update() to fit budget252D Animationthegamedesigninitiativeat cornell university

Executing Actions: Transformsauto mgr ActionManager::alloc();auto action RotateBy::alloc(90.0f,2.0f);mgr- activate(key,action,sprite);while (mgr- isActive(key)) {mgr- update(TIMESTEP);}// No clean-up. Done automatically262D Animationthegamedesigninitiativeat cornell university

Executing Actions: TransformsActionManagerActionauto mgr ActionManager::alloc();auto action RotateBy::alloc(90.0f,2.0f);mgr- activate(key,action,sprite);Map Action towhile (mgr- isActive(key)){ startkey andTweensrotationmgr- update(TIMESTEP);}Increments// No clean-up. animationDone automaticallystate272D Animationthegamedesigninitiativeat cornell university

Executing Actions: Transformsauto mgr ActionManager::alloc();auto action RotateBy::alloc(90.0f,2.0f);How longto spendmgr- activate(key,action,sprite);Tweensrotationwhile (mgr- isActive(key)) {mgr- update(TIMESTEP);}// No clean-up.28Maps toframerateDone automatically2D Animationthegamedesigninitiativeat cornell university

Executing Actions: FilmStripsauto mgr ActionManager::alloc();std::vector int frames;frames.push back(f1); frames.push back(f8);auto action Animate::alloc(frames,2.0f);mgr- activate(key,action,sprite);while (mgr- isActive(key)) {mgr- update(TIMESTEP);}// No clean-up. Done automatically292D Animationthegamedesigninitiativeat cornell university

Executing Actions: FilmStripsauto mgr ActionManager::alloc();std::vector int frames;frames.push back(f1); frames.push back(f8);Sequenceindicesauto action Animate::alloc(frames,2.0f);mgr- activate(key,action,sprite);while (mgr- isActive(key)) {Does nottweenmgr- update(TIMESTEP);}// No clean-up.30FramesdisplayedDone automaticallyuniformly2D Animationthegamedesigninitiativeat cornell university

Executing Actions: FilmStripsauto mgr ActionManager::alloc();std::vector int frames;frames.push back(f1); frames.push back(f8);auto action Animate::alloc(frames,2.0f);mgr- activate(key,action,sprite);while (mgr- isActive(key)) {mgr- update(TIMESTEP);}// No clean-up. Done automatically312D Animationthegamedesigninitiativeat cornell university

Easing Function1 Basic approach to tweening Specify duration to animateSet t 0 at beginningNormalize t 1 at endInterpolate value with t How does t change?t0startendDuration Usually done linearly Could be some other way Easing: how to change t Used for bouncing effects Best used for transforms322D Animationthegamedesigninitiativeat cornell university

Easing Function1 Basic approach to tweening Specify duration to animateSet t 0 at beginningNormalize t 1 at endInterpolate value with tt0start How does t change?endDuration1 Usually done linearly Could be some other wayt Easing: how to change t Used for bouncing effects Best used for transforms332D t cornell university

Classic Easing Functions342D Animationthegamedesigninitiativeat cornell university

Classic Easing Functions352D Animationthegamedesigninitiativeat cornell university

Problem With Decoupled Animationauto mgr ActionManager::alloc();auto action RotateBy::alloc(90.0f,2.0f);mgr- activate(key,action,sprite);36What if we change ourmind before 2 seconds?2D Animationthegamedesigninitiativeat cornell university

Problems With Decoupled Animationauto mgr ActionManager::alloc();auto action RotateBy::alloc(90.0f,2.0f);mgr- activate(key,action,sprite);37Compatible: CombineIncompatible: Replace2D Animationthegamedesigninitiativeat cornell university

Problems With Decoupled AnimationTransform TweeningPhysical AnimationComplete Disaster382D Animationthegamedesigninitiativeat cornell university

Recall: Modular Animation Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter, Spine Great for visualizing design392D Animationthegamedesigninitiativeat cornell university

Recall: Modular Animation Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter, Spine Great for visualizing design402D Animationthegamedesigninitiativeat cornell university

Recall: Modular Animation Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter, Spine Great for visualizing design412D Animationthegamedesigninitiativeat cornell university

Recall: Modular AnimationLoose hitboxes Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Inside hit box can safely Example: Spriter Great for visualizing design422D Animation Transform with duration Tween animations Manage multiple actionsthegamedesigninitiativeat cornell university

Aside: Skinning432D Animationthegamedesigninitiativeat cornell university

Aside: SkinningWay to get extra usageof hand-drawn frames442D Animationthegamedesigninitiativeat cornell university

Spine Demo452D Animationthegamedesigninitiativeat cornell university

Basic Idea: Bones462D Animationthegamedesigninitiativeat cornell university

Basic Idea: Bones472D Animationthegamedesigninitiativeat cornell university