Wednesday, April 21, 2010

2D Animation: Part 1 The Basics

This is the first part in a five part series about 2D animations, I hope you will learn from this tutorial and if you have any questions, need help or whatever feel free to post a comment and I will get back to you asap. Now before I go into detail about animating in 2D I thought I would explain how exactly animating in 2D works, the different types of animating and my overall approach to simple animations. First 2D animations are not really animating at all, instead there just changing images very quickly to make it look like there animating, this is just like when you draw on multiple pages of a book and quickly flip the pages to see something move. To make this work you can either create a lot of images and draw them one after another but this can be very troublesome so instead most people create sprite sheets.

Sprite sheets are essentially a lot of images combined together to create one large image. These images are either arranged in a very specific order that the programmer can then use or after the sprite sheets are created there is an accompanied text or xml file that will give the programmer the correct locations of each image. I created a sprite sheet creator a while back that I have finalized and posted a few days ago, click here for the sprite tool ( I will be doing a video tutorial on how to create the sprite tool from start to finish in a while so check back later for that ).

I consider 2D animations as one of two types, the first and easier way is the frame animation. Frame animations will be completed in Part 3 of this tutorial. A brief description of this is that frame animations revolve around one image being drawn until something happens in which case another image will be drawn, this does not technically mean it is the next image in the sprite sheet. Lets say you want to draw someone rolling a dice, you would create a sprite sheet with the 6 dice options. Then when you want to show them animating you can draw one number, wait a little bit, then draw another random number until the user presses a button to stop the dice from rolling.

The other type is normal animating, this will be completed in part 4, where all the frames of the animation are drawn one after another with only a short pause in between. This is more common and is only slightly more difficult then frame animations. One aspect of animating that I would like to point out is that very rarely does the main object have only one animation so in Part 5 we will go over using multiple animations.

To do these animations it is fairly simple once you understand the concepts. Part of the XNA spritebatch draw method is the source rectangle parameter and in my opinion this is the main component of using sprite sheets. So if we look at the sprite batch draw method that has all of the variables we want it would be number 6.

void SpriteBatch.Draw(
Texture2D texture,
Vector2 position,
Rectangle? sourceRectangle,
Color color,
float rotation,
Vector2 origin,
float scale,
SpriteEffects effects,
float layerDepth);

All of these variables are really basic except for the sourceRectangle which will require some extra work but is not very hard. My approach to do this is by creating an array of rectangles that we load in with our texture and we send in the rectangle that corresponds to the current index of the animation into the draw call. This was a brief overview of 2D sprite animating check back soon for more info, source code and examples.

There are no downloads for this part.



  2. an excellent reference

  3. First 2D animations are not really animating at all, instead there just changing images very quickly to make it look like there animating

    You may want to check out what animation is.

    1. This comment has been removed by the author.

  4. How is 2D different from 3D? Aside from distinct images closely packed together, can we also use varied GIF files and combine it to form one movement? If sprite sheet maker is not available for me, what other tools can you suggest for me to create an animation?

  5. We don't need to draw on a huge paper to make 2D animation. We can make it by using our computer and some tools that will help us to do it.

    Cris | 2D Animation Philippines

  6. This comment has been removed by a blog administrator.

  7. Keep up the great work, I read few posts on this internet site and I believe that your blog is really interesting and contains bands of wonderful info.2d animation studios

  8. I hope to read more of your post which is very informative and useful to all the readers. I salute writers like you for doing a great job!2d animation studios

  9. The information about the 2D animation was perfect and I really enjoy the worthy information. Thank you so much for sharing this article. 2d animator