Video Game Design 3 | History of Animation, Interactive Animations, Computer-Assisted Animation…

Series: Video Game Design

Video Game Design 3 | History of Animation, Interactive Animations, Computer-Assisted Animation, Skeletal Animation, Root Motion, and Inverse Kinematics

  1. History of Animation

(1) Early Animations

  • Cave Art: speculation that flickering fire cave arts randomly illuminated different parts of an image (e.g. a figure can have extra legs)
  • Shadow Play: initially involved in many cultures and the shadows are projected by the light of puppets
  • Puppetry: perhaps about 4,000 years old. Now we use 3D forms to create them
  • Magic Lantern: it is actually a one-lived technology that was used to show some moving projected images
  • Automata: a technology of 1,000 years old with machine animation. It was created by gears, levers, wind-up springs, and etc. Disney later developed their own animatronics
  • Phenakistoscope: it is a plane wheel with a stick on it and the spinning of it was used to create the animation. It was developed in 1833
  • Zoetrope: another kind of rotating mechanic product in 1833
  • Kineograph/Flipbook: a kind of book that was developed in 1868. It was made of photographies that can be flipped to create animations
  • Early Films: the earliest movie-like trial is called Arrival of a Train at La Ciotat and it was made in 1895 with a camera
  • Early Cartoon: one of the earliest cartoons is called Fantasmagorie and it was made in 1908
  • Rotoscope: this machine was developed by Max Fleischer in 1915. The idea is that people can sketch over on paper and capture it one frame at a time. Then we alternate the speed to make animations. He actually developed that in a studio where he made his first cartoon called KoKo the Clown
  • Disney Studio: use rotoscope to create animations with actresses, and was famous for the Snow White. It later developed a technique called the live-action reference and finally abandoned rotoscoping.

(2) Early Interactive Automata Games

  • Penny Arcades: an indoor area with coin-operated mechanical games like bowling, baseball, etc.
  • Board Games: like Hungry Hungry Hippos, Rock’em Sock’em Robots
  • Early Simulators: like the link trainer in WWII, Dehmel Flight Simulator, Aerostructor, Aneta Drivotrainer, etc.

2. Interactive Animations in Video Games

(1) Vector Graphics Games

Vector graphics are computer graphics images that are defined in terms of points on a Cartesian plane, which are connected by lines and curves to form polygons and other shapes. The benefit of vector graphics is that you can have very smooth lines instead of pixels. Candidate of video games that uses vector graphics include,

  • Tennis for Two (1958): Made by William Higinbotham with analog logic
  • Spacewar! (1962): Made by Steve Russel for PDP1 (Programmed Data Processor-1)

(2) Raster Display Games

Opposit to games based on vector graphics, we also have some raster display games. The downside is that this kind of game is pretty difficult to develop, but it doesn’t rely much on hardware performance. These include,

  • Pong (1972): Made with discrete logic, which means that there is not a central processing unit. Individual logic gates are physically distributed. Discrete logic used for a number of arcade machines was much cheaper at the time compared to using a CPU

(3) Sprites Games

Sprites means manipulating arrays of pixel data that are copied to output pixel locations to support animation.

  • Taito Basketball (1974): the first video game using sprites

(4) Text Mode Games

These are not really games because these games only work in text mode. Developers need to draw lines across the screen according to the text rows and columns and then link them together properly. The data can be quickly swept out to create animations.

  • Castle Adventure (1984)

(5) Sprite Animations

Later on, animated sprites were developed. They swept from one frame to another but it looks like smaller raster frames of animation. These animations were superimposed onto the game scene created via Bit blit or hardware sprites because, at that time, there wasn’t enough memory for a frame buffer. So, sprites continued to contribute to the golden age of video games. We can see some of them like,

  • Super Mario Brothers

(6) Color Cycling Palette

The color cycling palette is the notion that we can animate a color palette. It is a technique used in computer graphics in which colors are changed in order to give the impression of animation. This palette is quite common in PC games.

(7) Quick Time Events (QTEs)

QTEs are brisk gameplay mechanics that require players to enter a specific button command in a limited amount of time.

  • Dragon’s Lair: A game that is really closely tied to the fundamentals of hand-drawn animation, but introduces interactivity. It avoided some limitations of sprites and other techniques of the era but sacrificed interactivity because it only used QTEs, but it is still a historically important interactive animation. This game is developed by Don Bluth, who was an 80's animator and game designer, and he created cartoons like An American Tail, The Land Before Time, Space Ace, etc.

(8) Examples of Rotoscoped Gaming

  • Karateka (1984)
  • Prince of Persia (1989): developed for Apple II version with film clips
  • Dragon’s Lair (1989): computer-supported rotoscoping for Amiga Version. It actually used rasterized vectors instead of sprites
  • Another World (1991): developed by Eric Chahi who was inspired by Amia Dragon’s lair port for cinematic cut scenes
  • Flashback (1992)
  • The Last Express (1997)

3. Computer-Assisted Animation

(1) Examples of 2D Sprites with Scaling and Rotation

Games with 2D sprites with scaling and rotation are also called modern retro games. For example,

  • Super Mario World: developed with super Nintendo Mode 7, which is a special background texture rendering pipeline

(2) 3D Games with 2D Billboards

Some games basically eliminate some sort of the 3D environment to generate some indoor areas in real-time. The solution of drawing enemies is by using the 2D billboards for scaling and rotating.

  • Wolfenstein
  • Doom
  • Wing Commander

(3) Animated 3D Mesh

Animated 3D meshes work because of all keyframes with no interpretations of different poses, and the frame rate should be 10 FPS. Each frame is an array of order vertexes that are applied to model triangle mesh.

(4) Animated 3D Mesh: Storage Problem

Because we use models’ triangles to obtain vertex indexes of the current frame’s vertices, it is going to have a huge impact on memory consumption. If we add more details in the animation, the animation storage increases as model mesh detail increases. And an increasing frame rate introduces an entire new vertex table per additional frame. So this is not a very efficient solution for 3D animation.

(5) Computer-Assisted Animation

Computer-assisted animation is a technique that we can make the keyframes and then the computer can fill the frames in between them. This process is also called interpolation.

  • Alone in the Dark (1992): this is one Of the first games with interpolated keyframe animations

(6) Applications of Computer-Assisted Animation

  • Procedural Animation: Computer-assisted animations can be used for procedural animation, and it uses algorithms to animate the objects. This method is usually used when we have some easy algorithms to use. For example, the things like clocks and machines, or some sorts of objects with repeating animations.
  • Physically-based Animation: Another application of computer-assistant animation is physically-based animation, which assigns physical properties (e.g. masses, forces, inertial properties) to the objects. It may involve simulating physics by solving equations.
  • Motion Capture (Mocap): Many modern games use motion capturing rather than using complicated programs. For example, we have this technology used in 4D Sports Boxing, Naughty Dog Mo-cap, The Last of Us, etc. It is useful for capturing styles, subtle nuances, and creating realism, but you must observe someone do something and it is also difficult to edit or modify.

4. Skeletal Animation and Root Motion

(1) Skeletal Animation

Skeletal animation is important to us because it allows us to decouple movements from the models. Skeleton deforms mesh as it moves and we only need to create keyframes for the skeleton because the computer-assisted animation can be used to fill in between them.

The skeleton is basically like a tree structure and we can start from 3 to 6 degrees of freedom depending on the rotation only or translations. And also we have the other bones and for each of them, we can think about applying 1 to 3 degrees of freedom to represent detailed poses.

  • Rigging: an approach that the skeleton or bones can work as we wish. This is used to manipulate the 3D model like a puppet for animation.
  • Half-Life: one of the first games with skeletal animation developed in 1998

(2) Skeletal Animation Evaluation

There are some advantages for skeletal animation,

  • Memory savings relative to mesh animation
  • Animation blending
  • Animation portability/reuse
  • Animation authoring is simplified

However, it also has some disadvantages,

  • Implementation difficulty
  • Computational Overhead: can be dealt with by GPU!
  • Problems with realistic mesh deformations: we need more details like preserving mesh volume, muscle flex, physical algorithms, etc.

(3) Body Transform

The body transform is the mass center of the character. It is used in Mecanim’s retargeting engine and provides the most stable displacement model. The body orientation is an average of the lower and upper body orientation relative to the avatar T-Pose.

(4) Root Motion

The basic concept of root motion is that embedded within the animation of our skeleton, we include translations. For example, the movement of the other bones has to follow along based on the hierarchy of the dependencies. Therefore, we have to take kinematics into our consideration. This motion can be applied to the game object resulting in locomotion.

In Unity 3D, the Root Transform is a project on the Y plane of the body transform and is computed at runtime. At every frame, a change in the Root Transform is computed. This change in transform is then applied to the Game object to make it move.

(5) Generic Root Motion and Loop Pose

This works essentially the same as humanoid root motion, but instead of using the body transform to compute or project a root transform, the transform set in the root node (e.g. the hips) is used. The Pose (all the bones which transform below the Root Motion bone) is then made relative to the root transform.

(6) Root Motion Benefits

There are of course some benefits of the root motion,

  • Better Cohesion: we can avoid capsule separation and movement aligned with footfall in order to better interact between artist vision and world simulation
  • Declarative: movements can be specified independently of code

(7) Root Motion Constraints in Unity

Root transformations can only be limited to certain dimensions (like rotations, Y-axis, or XZ), and the green light indicates candidates for bake into pose. If a root motion is baked into pose on Y-axis, it allows falling according to physics.

(8) Animation Blending

The idea of animation blending is to achieve variations between different extremes of similar animations. This means that just a few animations can define a whole range of movement possibilities. The basic principle for animation blending is that the animations must be similar, and then we interpolate in between by computer-assisted animations.

  • Bunny Hop: the character hops with both legs because we blend two walking animations together

Even root motions can be blended too.

(9) Retargeting Skeletal Animations

Retargeting means mapping animation from one skeleton to another based on Unity’s Muscle Space. However, we should worry about interpenetration and joint limits.

(10) Other Tools Useful in Unity

  • Avatar Masks: the avatar masks allow more control oF blending or layering of animations
  • Animation Layers: the animation layers are good for dissimilar animation blending
  • Match Targets: Unity method Animator.MatchTarget() for Lerp (linear interpolation) or Slerp (spherical linear interpolation) with animation timeline and transforms. This is used for standing in a specific spot, jumping and land at specific spots, pressing a button, and grabbing hold of a ledge
  • Euler Angles: An Euler angle is a rotation about a single axis. Any orientation can be described by composing three rotations around each coordinate axis. We can visualize the action of the Euler angles, and each loop is a rotation around one coordinate axis.

5. Inverse Kinematics (IK)

(1) Forward Kinematics

Given the skeleton parameters p and the position of the sensor in the local coordinates vs, what is the position of the sensor in the world coordinates vw? We can easily calculate it by,

(2) Inverse Kinematics (IK)

Suppose we are given the position of the sensor in the local coordinates vs and the position of the sensor in the world coordinates vw, what are the skeleton parameters p? This is much harder because we have to solve the inverse of S(p). This results in solving p when,

We need to minimize p because there can be infinite results to solve that equation.

(3) Inverse Kinematics Function

IK can be used to facilitates manual animation creation or puppetry because it will automatically calculate the skeleton parameters we need to have.

(4) Early IK Animation

  • Terra Nova Strike Force Centaauri (1996)
  • Trespasser (1998)