Table Of Content30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
Subscribe to DeepL Pro to translate larger documents.
here !
Visit www.DeepL.com/pro for more information.
login / registration
▸ Profile
▸ Password
▸ Disconnection
A perfect game
Naughty Game Designer ! X
Replayability (II)
Pixel art class 10: There's a lack of animation around here!
By Thomas Chassin | October 1, 2012 22:00:00 | Categories: courses, graphic design, pixel art
No tutorial on pixel art, especially in the context of creating a video game, can do without animation, which is why we offer you today an article on
the subject.
Let's start with a quick explanation of the animation principle as we will consider it here.
If you have ever seen a film reel, you know that it is composed of a series of still images displayed very quickly one after the other (usually 24
frames/second). Pixel art animation is based on the same principle: the display of a succession of frames, although the number of unique images per
second is generally much lower than that of classic animation, due to the resolution.
I won't talk about the management of frames within a program or their organization within a file, since this depends on the way your image is read, but
you should know that in the vast majority of cases, the frames are all grouped together in a single image called a spritesheet.
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 1/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
A little preparation.
To your pencils!
Before animating, it is important to know roughly what you want to achieve as a result. The easiest way to do this is to put it on paper: yes, you're going to
draw it for me (don't be afraid, you don't have to be good)! Of course, it would be absurd to draw all the frames, but it is important to visualize the main
"crossing points" or key frames of your animation, i.e. the key steps that define your movement, but also the steps of complex movements, such as
transformations that are not in the image plane (a character in a platform game turning on itself for example).
This is what is called pose to pose animation: you decide on a certain number of intermediate steps and then add transition frames between them.
Drawing the key frames, even in a rough way, will allow you to better visualize the work to be done and will help you greatly when you create your
sprite.
Let's take an example to clarify this somewhat obscure statement: a sword strike. This one is divided as follows: the character is at rest, he arms his blow,
strikes and then rearms, which makes a total of 4 "passage points" to be defined in order to animate your character, the rest of the images serving as a
transition between them.
References are your friends for life.
If you are not sure how your animation is going to be cut, the great secret of life and death is to document yourself, both on the animation side (look at what
is being done in general) and on the reality side (nothing better than observation to get rid of your preconceived ideas).
Note that for character animation, it is possible to mimic the movements yourself, but this option is not recommended when you are at work, or even
in public in general. Normally, this should be enough to get a satisfactory cut of t h e animation, but don't worry if you have some difficulties, the
knack comes with practice, and if possible constructive criticism.
A little theory.
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 2/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
Two, three generalities.
Now let's get into the more technical part of this article, if you don't mind (in fact, you have no choice). For your animation to be successful, it is important
to have a good control of the distribution of the movement in the frames. Indeed, movement is defined by the difference in position between two
representations of the same element from one frame to another.
In fact, the more frames you devote to a movement, the slower it appears, and conversely, the more intermediate frames you remove, the faster it appears.
The first logical consequence is that duplicating a frame allows you to pause the movement, the second is that the more you want to represent fast
movements, the more frames you will need for the same time interval (we can also talk about sample rate).
A bit of dynamism and stylization.
Elasticity.
If you don't live in a colony of golems deep in a cave, you may have noticed that there are rigid and more elastic materials. The latter have the ability
to deform under the forces applied to them.
The squash and stretch technique consists of stretching or compressing a body in contact with a solid, while maintaining its volume (this is
important). The most obvious example is that of a bouncing ball: initially spherical, it crashes when it touches the ground, then stretches when it
bounces. This principle can be generalized to many movements in animation, whether we animate a face, a character, an object, etc.
A quick .gif preview
The stronger the compression and the crushing, the more you get a "toon" effect. This principle allows to fluidify the actions and to give them more
strength.
Inertia and kinetics.
Don't worry, I'm not going to give you a physics lesson! Forget your lessons, we're only going to look at some physical effects useful for animation,
namely that a moving body tends to stay that way and that the same is true for a stationary body. Three effects follow from this:
The continuity of the movement.
Continuity of motion (or follow through) means that when a non-rigid body stops, its parts remain in motion for a few moments before stopping in
turn. You can see this phenomenon in a very simple way: take a few steps and then stop. Unless you have your whole upper body in a cast, your arms
will not become absolutely immobile the second you stop moving: their movement will continue for a few moments because of the accumulated
kinetic energy and then they will stop moving in turn.
The pull effect.
The drag effect is very close to the continuity of the movement: it is more precisely its opposite. The drag effect can be observed when a force is
exerted on a soft body, for example fabric. The whole body will not move simultaneously if you pull on it: first the part you pull, then the rest, from
the point of traction to the ends.
Overlapping movements.
The overlapping action is the result of the combined action of the two previous phenomena. When a body goes from a movement A to a movement B,
there is an instant where the two movements "overlap": the part at the origin of the movement B moves
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 3/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
in agreement with the latter but the rest of the body, because of the drag, still continues to follow movement A. There is thus a coexistence of two
possibly antagonistic movements until the whole body follows movement B. As explained before, the transition of movement is made progressively
from the part at the origin of the movement to the rest of the body.
The transition phases.
You thought that inertia was over? No way, my friends: here it comes again! Any body that moves, unless it receives or transfers suddenly a significant
amount of kinetic energy, goes through a regime called transient at the beginning and end of the movement. In concrete terms, this means that the body
needs to accelerate when a movement is initiated, and then needs to decelerate before stopping. These transition phases, in addition to making your
animation more credible, allow you to convey additional information to the player. For example, a slow acceleration and/or deceleration indicates that
the moving object is heavy: think of a sledgehammer for example, it is a slow weapon, but once it has started, it is very difficult to stop (hammers and
big swords in Monster Hunter are a good example).
To show off at social dinners (continued): the motion blur.
Motion blur, or kinetic blur for those who are mad at Shakespeare and his buddies, is an optical phenomenon that we live with every day: when observing
a fast motion, we can see a blurred trail behind the moving body. This trail is in fact due to retinal persistence and is only an optical illusion. Does that
make you feel good? And yet it is a very useful principle for animation.
During a very fast movement, there is an important displacement that takes place from one frame to another, which risks to make your animation not very
understandable by the spectator, and this risk increases proportionally to the complexity of the trajectory followed.
So how do you combine fast motion with understandable animation? Any ideas? If you answered "The motion blur!", maybe we'll do something with
you, if not, go back to square one.
To succeed in a motion blur, the best is often... not to worry about it! Indeed, the motion blur comes after the cutting of your animation and the
realization of your frames. The ideal is to make your animations by noting the frames that need motion blur, then come back to work on them afterwards.
If you are using a software that manages layers (which the whole team strongly recommends), trace the trajectory followed by the moving element from
one frame to another on a separate layer, which will serve as a basis for the motion blur. What happens next? Well, all you have to do is follow a few
rules:
The "drag" is between the start and finish position and follows the path of your movement. The faster a movement,
the longer the "drag".
Think of your trail as a solid, and the rules of perspective and so on normally apply to it. You can use a
gradient to accentuate the blur effect.
Protips.
Start simple.
If you start by making hyper-complex frames with multi-source lighting, ambient lighting and all the rest, you'll be crying your eyes out the day you
realize you've messed up your animation. Start by making shapes based on colored flats to animate quickly. Once you are satisfied with the animation,
increase the level of detail gradually, checking each time that the result is what you expected.
Animate the different parts separately.
Work with layers. Seriously. It is infinitely easier to edit an animation whose elements are on separate layers. Ideally, you should create one layer per
element if you're not sure. Also note that some animations only rely on moving certain elements relative to each other, without any deformation.
Take the animation as a whole.
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 4/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
When you are working on any kind of animation, you are working on a set of successive frames. The important thing is that your animation is
successful, not that each individual frame is a flawless masterpiece that you spent half an eternity on.
Not only will keeping this in mind allow you to avoid wasting a lot of time and energy, but it will also allow you to improve the quality of your work.
Indeed, if each frame is a success, it will not guarantee that your animation will be good, since, on the contrary, the transition frames will often look
"ugly".
It's an inevitable fact. Just watch any animated short or feature film and randomly pause it while the characters change their pose. The likelihood of them
looking ridiculous is very high, yet the animation as a whole is of good quality.
The strength of the details.
The difference between a good animation and a very good animation lies (among other things) in the care given to the details or secondary actions.
These secondary actions have as main role to support the main animation, to make it more alive and to give it more strength. For example, when a
character moves and wears a cape and/or has long hair, they are not static: they react to the main action, in this case walking. However, it is important to
prioritize the different actions, so that the main action is clearly identifiable: if this is not the case, all the work done on the secondary animations will
only serve the action as a whole.
And now drool over what the big guys are doing!
And have a good cry while you're at it.
How to Make Her Turn, by Syosa
Maska, by KO-KI
Arrgh, I guess, by the great fool
Tweeter Curtir 2
Add a comment
Your comment will be posted as anonymous.
You should log in or register (it takes less than 5 seconds).
Your comment: You can format your comment with markdown.
Send
Comments
By anonymous on February 23, 2020 20:55:36
thank you for this great and very complete course
By anonymous on September 8, 2014 6:52:56 PM
Well done for this great tuto, probably one of the clearest, well written and interesting ones I've read! By anonymous
on April 17, 2014 10:51:56 AM
Yes, it does. It feels good to shed a little tear. Thank you for
this great tuto!
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 5/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
By anonymous on August 11, 2013 5:53:25 pm
great tutorial
By nemj on May 15, 2013 12:43:06 PM
Very interesting and fun to read, frankly thank you! By
Rose on October 22, 2012 9:22:18 PM
Thank you for this tuto, I learned a lot! Thanks again for your "lessons"!
Last comments
Pixel art lexicon
By tile_down12 | December 31
Numbers, emotions and behavior By
babaorhum | December 17
Game Design & MOBA
By babaorhum | December 17
I think something is going on... By
babaorhum | December 17
Tolkien, Beethoven, Vision
By babaorhum | December 17
Archives
August 2015
A perfect game
August 2014
Naughty Game Designer! No cookie for you! X
March 2014
Replayability, part 2: game mechanics February 2014
Replayability, Part 1: Narrative
October 2013
Review of Ludum Dare #27
Artistic Direction (Part 2) September 2013
Artistic direction (first part)
Naughty Game Designer! No cookie for you! IX
April 2013
Video Game Creation Contest How
many endings for my game?
February 2013
Craft, alchemy and other object creations
Naughty Game Designer! No cookie for you! VIII
January 2013
Review of Ludum Dare #25 The text
November 2012
My AAA blog - episode 2
Breaking the rules (Ernest goes to the movies)
October 2012
A bit of advertising
Pixel art class 10: There's a lack of animation around here!
September 2012
Report of Ludum Dare #24
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 6/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
Elements of Anatomy
August 2012
Eight ways to make a bad tutorial July
2012
Game Design & Ace Attorney
Naughty Game Designer! No cookie for you! VII
June 2012
The joys of game over
April 2012
My AAA blog - episode 1
February 2012
Music and gameplay
January 2012
Game Design & Dark Souls
Making of : a tree for Lije Happy
New Year (and good news) Level
design elements II Level design
elements I
December 2011
Whose fault is that? It's not me!
Review of Ludum Dare #22
Why write a Game Design Document?
November 2011
Introduction to GraphicsGale
It's time to bring back adventure games
October 2011
Game and identity
Modes of difficulty and dynamic adjustment of difficulty September
2011
Vicious circles
Figures, emotions and behavior
August 2011
Review of Ludum Dare #21 The
kind that wouldn't die
How to get started in the game industry
Free narrative
July 2011
Blending and Shading
Naughty Game Designer! No cookie for you! VI Why
Game Endings Suck
DLCs and micro-payment purchases
Naughty Game Designer! No cookie for you! V June
2011
Game Design & MOBA
The difficulty in video games
I think something is going on...
Costumes and character design
Introduction to Photoshop
November 2010
The delicate marriage of narrative and gameplay
June 2010
Achievements: the geek's sweetener October
2009
Naughty Game Designer! No cookie for you! IV
Naughty Game Designer! No cookie for you! III
Shut up and work on your game!
Tolkien, Beethoven, Vision
Simplification
Naughty Game Designer! No cookie for you! II
December 2008
Methods and tips for mapping October
2008
Arne's drawing lesson
Balancing games with positive feedback August
2008
Pixel art class 9: A world of tiles Death
(and Planescape: Torment)
Three Problems of Interactive Storytelling
A Lesson in Symmetry
Trade in RPGs
Pixel art lesson 8: textures and dithering
Creating names: an art
July 2008
Pixel art lesson 7: anti-aliasing Let's
give magic back to magic
Pixel art class 6: colors and palettes Pixel
art class 5: light and shadow
How to get to the point and give the players what they want Pixel Art
4: Perspectives
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 7/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
Naughty Game Designer! No cookie for you!
Representation and stylization
Methods and tips for working well Creature
Design elements
Pixel art lexicon
Pixel art lesson 3: drawing lines Pixel art
lesson 2: the right tools Pixel art lesson
1: preface
Categories
Business
Character Design
Color Analysis
Course
Creature Design
Editorial
Design
Ernest Adams
Game Design
Graphics
Level Design
Ludum Dare
My life
Michael Molinari
Music
No cookie
Photoshop
Pixel art
Tiles
Universe
Scenario
A magnifying glass
Click to zoom in on details Images from
VGMaps Technologies at work
HTML 5
markdown Easy
list splitter
Django
Dreamhost
LESS CSS
jQuery
A propSolismdbeosxF2orges
SQLite
Editorial
Index of articles
Regular authors
To be published on the Forges
Terms of use
Contact
Send us an e-mail Subscribe to
our RSS feed
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 8/9
30/09/2022 21:20 Les Forges | Pixel art class 10 : There is a lack of animation around
here !
Follow us on Twitter Find us
on Facebook
Do you read the footers?
Try the following articles instead
w ww.lesforges.org/article/pixel-art-chapitre-10-animation?scroll_to=article 9/9
