43
\$\begingroup\$

Where can I learn how to do simple 2d animation well? Or is it really just literally drawing every single frame of something in photoshop? Is there tips or tricks? Tutorials to help get started?

Also, what software options are there (preferably open source or even just free)?

\$\endgroup\$
5
  • 1
    \$\begingroup\$ If you're going to do something "complicated" like a stick figure walking/running while the background changes, and then suddenly the stick figure turns into an eraser and attacks mutant stick bird kids with a flying dog (from Maximum Ride by James Patterson), you're going to have to use Flash. \$\endgroup\$ Jan 28, 2011 at 6:13
  • 14
    \$\begingroup\$ @muntoo Why does one have to use Flash? Does it have a button that does that stuff automatically for you? No. You can do that with any animation software. Or draw it by hand and scan the images... \$\endgroup\$
    – bummzack
    Jan 28, 2011 at 9:05
  • \$\begingroup\$ @bummzack Sorry, I meant "you could use Flash". \$\endgroup\$ Jan 28, 2011 at 22:04
  • \$\begingroup\$ Many 2D game graphics today are actually based off 3D model, this has many reasons: 3D models are a lot more adaptable than 2D imagery; The sprites make spatial sense, since they are literally made from rendering 3D objects; Sprites can easily be made off multiple directions; and can be easily animated just by rendering the animated 3D model. --- The bad side is that, for this, you'll need to create and texture the 3D model for your sprite's object, but the overall process, in my opinion, is not much harder, and the return (result and adaptability) is well worth it. \$\endgroup\$ Oct 15, 2012 at 19:02
  • 2
    \$\begingroup\$ Check out Spine, it's a pretty new piece of software which actually doesn't require you to be master animator. There are also runtimes to execute the animation within game environments afterwards. \$\endgroup\$ Apr 24, 2013 at 13:55

8 Answers 8

19
\$\begingroup\$

Right now, I can think of a few ways you can do a 2-D animation:

  • Moving an object's x,y coordinates around (e.g. to slide a rectangular menu - you change the y-coordinates every few ms)
  • Drawing every single frame out in an image editor and choosing the right frame to draw at the right moment (e.g. drawing a flame animation)
  • combining the two above (e.g. having a sprite walk across a screen)

It's all about giving the illusion of movement.

How to do it well?

  • It has to be timed properly to make it appear smooth (be aware of hardware constraints)
  • The more frames you have, the more details you can show, and the better it will look (however you end up having to draw more frames)

Tips and tricks?

Software options?

  • I would say it depends on what you are trying to animate. If you want to animate sprites or simple objects, then MS Paint will probably suffice
  • GIMP is an open source alternative to Photoshop
  • Photoscape is another free photo editor. It also allows you to make animated GIFs - good for testing the timing in your animations
  • Synfig Is the libre alternative to ToonBoom for doing animations without taking care about the tweening and then export them to video, gif, or maybe saving some frames as images for the sprites
  • InkScape Is a vector vector graphics editor that is the libre alternative to Adobe Illustrator

As for tutorials, I think this depends a lot on your goal. If you are doing a flash game, then search flash tutorials. Drawing is one thing, but you also need to time (and possibly move) the images to animate it properly - and so you might as well learn how to do it in the platform you are going for.

\$\endgroup\$
10
\$\begingroup\$

Classical 2D animations are created frame by frame. What you'll see often is that they use a reduced framerate (eg. every frame is displayed twice) to lower the amount of images that have to be drawn.

Flash is a very good tool for 2D animation. It provides you with onion-skinning (previous frames shine through while you're drawing your new frame), tweening and shape-morphing. Since version CS4, it also comes with bones and inverse kinematics which makes animating characters with limbs so much easier.

There's also "Toon Boom". They have a lot of different software-packages available, for hobby/fun up to professional animation software.

Tools like GIMP and Photoshop also provide some functionality for animation but that's really just for very basic stuff.

Another, not so obvious option for 2D animation is using a 3D Program. Did you know that later episodes of Southpark were animated using Maya?

With an orthographic camera projection, proper lighting and flat-shading you can create animations that look 2D, but are created in a 3D software. Most 3D programs have sophisticated animation tools like bones, inverse kinematics, constraints, soft-bodies etc. Blender would be a good (free) choice to get started.

\$\endgroup\$
4
\$\begingroup\$

There are plenty of resources available to do this.

Heres a good tutorial to get you started on one particular method using Sprite Sheets. Sprite Sheets are just that, a sheet of sprite that you run in code similar to a flip book animation in real life. But you use code to do it. It can be difficult to get started, but I feel is the most rewarding and grants the most control.

http://www.dreamincode.net/forums/topic/194878-xna-animated-sprite/

Here is the first thing I found using flash which is also a good tool. I personally have not used flash perhaps another poster can chime in with their experience.

http://animation.about.com/od/2danimationtutorials/2D_Computer_Animation_Tutorials_StepbyStep_Lessons_in_Flash.htm

\$\endgroup\$
4
\$\begingroup\$

2D animation is a whole art and profession. And actually a very hard one to master. Not every animator out there does good animation, indeed. But for basic animation as you said... It depends. It's mostly simple to achieve an ok level of sprite animation for mobiles using like 4 frames for a walk cycle 24x24 pixels sprite. You can do that indeed just with Gimp and using layers transparency to have the previous or next frame in overlay as a guide.("onion skinning") .It has other features to help in this.

As you go trying to do higher resolution 2d animation, the thing gets more complex. A fast advice is to draw, in a, for example, 13 frames walk cycle, the frames 1, 7, 13. Then draw ibetweens of those, like 4, 10. Then the remaining ones. (is a bad example, tho)

All this, using onion skinning feature. There are many softwares, I'd advice using Pencil and Gimp. For pixel art, low res sprites, might want to check as well GraphicsGale. And of course, is a lot about checking constantly the flow and animation.

\$\endgroup\$
2
\$\begingroup\$

I would recommend you the book "The Animators Survival Kit", it's not directly targeted at 2D animation using computer software but more about general animation techniques (and quite entertaining to read).

Amazon link

\$\endgroup\$
1
\$\begingroup\$

Just go for this book with your eyes closed! The ILLUSION OF LIFE: DISNEY ANIMATION.

I can't emphasis enough how awesome this book is.I am just quoting form wikipedia.

The Twelve Basic Principles of Animation is a set of principles of animation introduced by the Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation. Johnston and Thomas in turn based their book on the work of the leading Disney animators from the 1930s onwards, and their effort to produce more realistic animations. The main purpose of the principles was to produce an illusion of characters adhering to the basic laws of physics, but they also dealt with more abstract issues, such as emotional timing and character appeal.

The book and its principles have become generally adopted, and have been referred to as the "Bible of animation."[2] In 1999 the book was voted number one of the "best animation books of all time" in an online poll.[3] Though originally intended to apply to traditional, hand-drawn animation, the principles still have great relevance for today's more prevalent computer animation.

For free and open source 2d art application I like MyPaint very much. Painting here feels very natural. Though it lacks a lot basic features. For complimenting basic features there is old friend GIMP.You can even try Krita. Its brush engine is better then Gimp.

For animation + painting there is another solution called Pencil where you can create basic animation with some basic drawing tools. Its very fun to work with.

You can try out Alchemy(painting only) too.

\$\endgroup\$
1
\$\begingroup\$

I'd suggest taking what I refer to as a development detour ... something where you take off 3-6 months to dig deep into an adjacent domain, which when you become competent, really supports your current thrust of work. for this, I'd highly suggest taking the time to learn 3D Mesh Modeling, specifically Blender. The concepts you'll learn will greatly support your gaming efforts from the primary objects you are looking to create to the effects you seek to create in supporting your game. Blender animations can also be exported as transparent PNG's which can be combined to form sprite sheets (very useful) fairly easily. I think it'd be worth your time.

\$\endgroup\$
2
  • 2
    \$\begingroup\$ -1 Matthew asked for a simple 2D animation techniques, you suggested to spend 3-6 months on learning 3D. \$\endgroup\$ Oct 15, 2012 at 21:17
  • 2
    \$\begingroup\$ If you peruse the 3rd answer of the 1st post (which received a 19 vote) they argue: "Many 2D game graphics today are actually based off 3D model, this has many reasons: 3D models are a lot more adaptable than 2D imagery; The sprites make spatial sense, since they are literally made from rendering 3D objects". This is my line of reasoning also. The investment in learning 3D mesh modeling to any competency is a 3-6 month investment. Unless you are resort to trolling the web for ready made images, or are willing to learn 2D Drawing (an investment as well), there is really no other way. :-) \$\endgroup\$ Oct 16, 2012 at 5:59
1
\$\begingroup\$

Climb aboard a brief Google of the name Sculptris. You should, in your journey, discover a three-dimensional modeling program of the same name. In my own two-dimensional-sprite-modeling endeavours, I too came to the conclusion that ProfVersaggi has. Unfortunately, I dissolved countless frustrated hours letting my brain slither over the program know as Blender. I found that I share a need with many others for a more rapid return on my "labors". Sculptris gave me this. Also, it's free as of this posting. A caveat; this program is still in development, and does experience crashing. That said, the creators of Sculptris were kind enough to implement a crash recovery feature, making the crashes little more than a mild nuisance. Open wide. Drink deep. Swallow no frustration. Digest only knowledge. Make us proud. To summarize, Sculptris is an easy way to create a 3d models for your sprites. Then, you can even press the "prtsc" or "print screen" button to copy an image of whatever is displayed on your screen to be pasted in a 2d animating software like Graphicsgale or a paint program like Paint Shop Pro. I simply cannot make it any easier for you short of doing it for you lol

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged .