Picking up on a post from earlier this week, (Breathing Life into Animated Objects), why not have a go at creating some simple animations of your own.
I came across Pencil the other day, a desktop application that works on Macs, Windows and Linux, that provides an excellent environment for creating your own line drawing animations. (Just reading through the user manual is also quite instructive in terms of finding out what sorts of support computer applications offer an animator today!)
Here’s a rather blurry tutorial of how to do a ‘traditional’ bouncing ball animation in pencil (the lines are faint at times - try watching the video in full screen view…): the bouncing ball tutorial (pencil).
Whilst not quite animation in the traditional sense, SketchCast offers another interesting way of telling stories through drawing…
If you’d rather just play a game, it being Friday and all, then why not try Grid16? There are no instructions given (apart from the hint that you need to use the arrow keys!). The game is made up from 16 minigames, each of which tests a particular style of game mechanic. See if you can work out what the aim of each minigame is, and then see if you can improve your score!
And if game playing is even too much for you, just sit back and watch this: Animator vs. Animation ;-)
In several of the most recent, previous posts, we’ve considered how stories can be plotted in a variety of ways around narrative events that take the characters in the story on an emotional journey (and hopefully take the audience with them on that emotional journey too!).
So how can an animator create a character that the audience comes to identify with on a physical level, as communicated to the the audience through animation?
The Twelve Principles of Animation
Although the techniques for doing much of the hard work of animation have been revolutionised by digital media, the pioneering work in ‘traditional’ film animation done by Walt Disney and Disney Studios on how to animate characters in a lifelike way still holds good today…
So for example, if you were to search for “principles of animation”, you’re quite likely to come across references to “the 5 principles”, or “the 12 principles”, or even “the 28 principles”. Most commentators, however, would go with 12 - the twelve principles - as developed by a core team of animators from Disney Studios in the 1920s and 1930s.
The principles refer to a set of techniques that describe how the characters might move from scene to scene as characters:
If you find any short movie examples of any of the principles, or create one yourself, please link it back to this post - over time, I’d like to be able illustrate each of the principles with “found” resources from the web…or the Digital Worlds’ readership… ;-)
Squash and stretch
If you bounce a rubber ball, it squashes up as it hits the ground, and then it stretches out, as the first 10 seconds of this high speed movie clip demonstrate:
Although the squash and stretch effect can be exaggerated, it is important that the “mass” of whatever is being transformed is preserved. For example, if you are animating a bouncing rubber ball using clay, you would not add or take away any of the clay as you record each frame.
Anticipation
Before a character performs an action, it should physically “wind up” to perform that action. Anticipation draws the attention of the viewer, so that they focus on a particular area of the screen and prepare themselves for something to happen there. The classic example is of throwing a ball, in which the character draws their arm back in a possibly exaggerated way, before performing the action. Without anticipation, you have surprise - or maybe even an unnatural looking action. Suspense draws on a slightly different sense of anticipation, in which the viewer has an expectation that an action is will occur, but they are not sure where or when.
Staging
Staging refers the set - or setting - of the scene, and the way in which it is portrayed. Staging is an important element of all the dramatic arts, from theatre, set design and stagecraft to film cinematography. In animation, staging a scene is likely to involve “set design”, “lighting” and choice of camera angle and other camera techniques (close-ups, slow-motion etc.), as well as visual composition of the scene in much the same way that a photograph is composed.
Straight Ahead Action and Pose to Pose
Straight-ahead action refers to a production technique, such as stop motion animation, in which a scene is captured in frame order - for example, using motion capture or a dynamic computer simulation. Pose to pose refers to the key frame technique of animation, in which certain key frames, or poses, are drawn first, and then in-between frames are added that “move” all the elements from one pose to the next.
Follow Through and Overlapping Action
Follow through refers to the way a character behaves whilst completing an action, and can often be used to communicate a character’s feelings about that action or the likely consequences of it. In the case of throwing a ball, the action continues after releasing the ball, both in terms of how the character’s arm moves, but maybe also their facial expression as they realise how good their throw was. Overlapping action relates to the follow through behaviour of ’secondary’ features, such as the motion of hair or clothing. The main focus is on the motion of the arm, but this must be dressed with overlapping action to make it look real.
Slow In and Slow Out (aka Ease in, Ease Out, or Acceleration, Deceleration)
Most actions start slowly and end slowly. If you think of a car, it doesn’t go from 0 to 60 instantaneously, nor it is likely to stop immediately from traveling at any speed. Slow in and slow out models this acceleration and deceleration.
Arcs
Most things don’t move in straight lines. if you throw a ball, it doesn’t fly horizontally for a bit, then drop vertically down. Gravity acts on it all the time, pulling it in a downward arc. For body parts, if you swing your arm round, your hand doesn’t describe a square shape - it follows a circle, an arc, centred on your shoulder.
Secondary Action
Secondary actions are the incidental actions that make things look more realistic and may add to the anticipation of an action. For example, our ball thrower might be playing with the ball in their hands, or bouncing it from one hand to another, before actually performing the main throwing action. The movement of hair or clothing, or body twitches and facial gestures, are often likely to count as secondary action.
Timing
In its simplest form, timing refers to the choice of when an action is started and how long it takes to perform. Many comedians are highly rated not just because of (or even in spite of!) what they say, but the exact moment at which they choose say it…
Exaggeration
Exaggeration can be used to focus attention, and stress a particular action. Exaggeration can also be used to develop character, as for example in the case of a caricature.
Solid Drawing (Solid Modeling)
Getting the drawing - or computer model - right. Whatever you’re animating should be a solid drawing, well crafted and executed and apparently capable of responding appropriately to the physics of the world it is performing in.
Appeal and Character Personality
The characters should appeal to the audience. They should be able to provoke an emotional response and also demonstrate their own “emotions” through their actions and gestures.
Putting (Some of) The Principles into Action
Hopefully, uncourse readers will start linking back resources that demonstrate the twelve principles back to this post - so keep checking back to see any new links/comments below! (Remember, you can always subscribe to the comments feed using an RSS feed reader…)
In the meantime, the following page has an excellent walkthrough of how to create a bouncing ball animation, illustrating along the way the principles of Squash and Stretch, Timing/Spacing, Solid Drawing, Slow in/Slow out and Arcs:
Why not have a go at making your own simple bouncing ball animation, full of stretch and squash goodness?;-) You don’t even need a computer… remember the flip book in Making Pictures Move? ;-)
Developing a little further the story of Making Pictures Move and the tale of convergence that is Bringing the Digital World Alive, we shall have a quick peek at what was going on in the middle of the 20th century.
The development of electric ‘cathode ray displays’ - that is, CRT (Cathode RayTube) displays meant that it became possible to create electronic images on a small screen directly, rather than projecting light through a series of rapidly changing fixed film images on a movie reel. If you have ever seen a traditional oscilloscope, this a CRT in it’s ’simplest’ guise.
This new media was soon appropriated by experimental digital artists such as John Whitney. Here’s a video of his 1961 showreel: “Catalog”.
Whitney pioneered techniques in the creation of both digital imagery and electronic music. If you search for “John Whitney” on Youtube you are sure to turn up several other examples of his work.
If you search a little more widely, you may also turn up Whitney’s essay Computational Periodics, in which he writes:
We may assume that a time will come when that which I am about to describe will name itself—but for now: ‘Computational periodics’ is a propositional and tentative term which may help to designate a new unified field for a heterodimensional art; a field whose special dimension is time. An art which is temporal, as music itself; being, that is, spatio-temporal. An art whose time has come because of computer technology and an art which could not exist before the computer.
As we shall see later, creating soundtracks for computer games has required innovations in the composition of repeating elements that may have to play for many minutes, even hours, and early scrolling background imagery also used to require repeating elements. I wonder too, whether ‘games’ like flow, which I introduced In the Beginning…, may be said to demonstrate some sort of “computational periodicity”?
‘Tennis for Two’ is often claimed as the earliest ‘video game’, dating back to 1958, and created as an entertaining diversion for visitors to the Brookhaven National Laboratory, and intended to demonstrate some an analogue computer working with a CRT display. (To this day, much of the most exciting university research demos are put together for visitor open days!) You can read more about it here - The First Video Game - and here: Video Games – Did They Begin at Brookhaven?. If you do follow the links, about how long did it take to put the demo together? ;-)
The other game that competes for the mantle of first computer game is Space War (1962):
What was the aim of Space War? What might a design document for it look like?
This review of the Space War ‘project’ has some interesting things to say about the design brief that informed the creation of the game: SpaceWar! - the First Computer Game.
What guidelines did the design team adopt regarding what the game should achieve? To what extent have the games you have created with Game Maker so far conformed to the guidelines? ;-)
Many sources explain the psychophysical basis of frame based animation in terms of the ‘persistence of vision’ effect, whereby it is claimed that the retina of the eye retains an afterimage of one frame and somehow blends it with the next, thus providing an illusion of continuous motion.
Unfortunately, while this explanation is the one that is typically offered as the mechanism by which we experience the illusion of motion from frame-by-frame animations, it is not the reason that is accepted by cognitive psychologists. (The actual explanation is beyond the scope of this post; you need a proper Cognitive Psychology/Psychology of Perception course for that! maybe something like this? Signals and perception: the science of the senses)
In a short essay entitled “Persistence of Vision”, Stephen Herbert provides a brief history from cinema of how this popular misunderstanding came to be. You can read the article here: Persistence of Vision.
A more comprehensive refutation of the persistence of vision explanation, along with some simple experiments (using animated GIFs ;-) that demonstrate both the actual persistence of vision effect, as well as how it does not account for the illusion of motion, is given by Rod Munday in this ‘lecture’ on The Moving Image. Links to several other academic papers on the subject are also provided.
PS I’ve placed this post in the Springboard category, as well as a couple of other categories. Springboard posts will be light on content, (’incomplete’ would be another word for it!) but will always link out to one or more hopefully reputable sources, from where you can go on to find out more about a particular topic.
I’ve also categorised it as an Aside, so it’s slightly off the main topic the uncourse…
Please feel free to comment back with anything you find out from following the links that is relevant to the springboard topic. For example, in this case, it might be a summary of how the ‘persistence of vision’ argument came to be proposed and commonly accepted; a review of an experiment that attempts to refute the persistence of vision hypothesis; or an explanation of what is thought to explain our perception of motion from a watching a sequence a fixed images presented at a rate of several images per second.
In Bringing the Digital World Alive, I introduced the idea that contemporary computer games represent a convergence of ideas, techniques and technologies from the separate worlds of computing, entertainment, art and games.
In this post, I’m going to focus on the early history of moving images, to provide a bit of background about how to bring worlds and characters alive through animation.
Perhaps the simplest form of animation comes in the form of a flipbook - a series of images are drawn on separate pages of a book, in about the same position, representing snapshots of something moving, or someone performing an action. Flicking through the pages quickly gives the appearance of motion.
If you have a pack of post-it notes handy, why not try to create your own simple flipbook animation? Think about what would make a good animation. For example, a stick figure kicking a ball, or a rubber ball bouncing after it is dropped from a height. Plan what each still picture will look like and imagine each picture as a “frame”. Sketch it in pencil so you can make changes and keep flipping through the to see how it looks.
Even cycling quickly between just two images can create the illusion of motion, as these thaumatropes show:
If you have a couple of elastic bands handy, why not try making one? ,a href=”http://www.randommotion.com/html/thauma.html”>How to make a thaumatrope.
Next up in the level of complexity are what we might term mechanically aided animations. Again, the viewer is presented with a series of static images that represent different snapshots of an action being performed; the viewpoint is held fixed, and the the sequence of images rapidly shown one after another:
For example, here’s a praxinoscope (which is a refinement of a zoetrope - please comment back with a link if you find a movie of a good one;-):
The images are arranged around a the inside of a cylinder and then viewed in a series of centrally mounted mirrors. (By contrast, how does the zoetrope work?)
As well as the difficulty of drawing each of the frozen images, the makers of this animated toys faced the problem of not really know what each ‘frame’ should look like.
Time lapse photography, in which a series of still photographs were taken one after another, provided the first “scientific” glimpses of ‘frozen motion. Using a series of cameras that were triggered one after another (an approach popularised more recently by which sci-fi film of the last 10 years?!;-), Eadweard Muybridge was allegedly able to settle a wager about whether all four of a galloping horse’s hooves were ever off the ground at the same time.
Viewing these images quickly one after another gives the impression of motion.
Realising that objects could be made to appear to move by displaying a sequence of images that differed slightly several times a second, one ofter the other, the pioneers of drawn animation developed a technique that remained largely unchanged for much of the 20th century.
Images were hand drawn and painted onto transparent celluloid sheets (from which we get the word cel), and overlaid to build up a single ‘frame’. Fixed background images were placed at the bottom of the stack of cels, and cels detailing foreground imagery aid on top. An overhead camera could then grab a snapshot of the apparently flat image. Drawing images over several multiple layers meant that background imagery could often remain unchanged and the background cels reused in multiple frames.
The second classic animation technique is known as stop-frame animation. Rather than using cels, stop-frame animation is used to produce animations of physical objects, which are moved slightly in between each frame. The Aardman studio, creates of Wallace and Gromit, and the Creature Comforts short movies, are perhaps the world’s bexst known contemporary stop-motion film producers.
Animated GIFs - A Flipbook Equivalent
You will no doubt be familiar with the idea of ‘animated’ adverts on many websites. These are often displayed using a particular image format known as an animated gif. A single image file is loaded into the page, but it actually contains within it a series of frames that are cycled over to produce a changing sequence of images, rather than the illusion of movement. In essence, it operates very much like a computerised flipbook.
The above image of the running horse is one such example of an animated GIF.
(This idea of ‘many images in one image’ is one we shall return to when looking behind the scenes at tilesets and just what makes an animated sprite tick in a computer game.)
If you have a spare few minutes, why not create your own animated GIF? To do this, you will need to create a series of static images, and then load them into an animated GIF generator.
For creating quick image doodles, I tend to use CanvasPaint, an online equivalent of the popular Windows Paint programme. The Animated GIF Generator Tool is ideal for creating animated GIFs. (Note that the animated GIF image generator works by sequencing a series of images from your desktop; which means you will have to save the images you want to animate there beforehand…)
And finally, something to mull over before the next post: can you think of any problems or difficulties that are likely to be associated with using traditional animation techniques in the creation of animations for computer games?
Recent Comments