How 2D animation works

In 2D game graphics, a sprite is an animation that is integrated into a game background. 2D sprite animation is presented as a sequence of static key-frames and called a sprite sheet. Sprite sheet can contain multiple animations for a given character (or even for a game scene). During runtime engine of a game uses a sprite sheet to select neened key-frames for a current animation. The easiest way to make an animation and a sprite sheet is to use an animator.

Anatomy 2D animator

Anatomy animator was developed to create 2D animated sprites and sprite sheets quickly and easily. Animator represents animation model as a skeleton that consists of adjustable bones. Each bone represent movable part of a model and requires a texture. Each frame of an animation corresponds to a specific set of bone's coordinates. This structure allows you to modify animation in a very efficient way. Changing bone configuration modifies separate frame but changing texture configuration modifies bone appearence for an entire animation. This makes it possible to re-use models applying different textures. Software automatically packs all frames of an animated sprite into a single sprite sheet image or saves animation as a set of frames.

How to create animation with the Anatomy tool

How to make textures

Every animation needs textures for all movable parts of a model. Textures could be drawn as a vector or as a raster graphics. Vector texture usually has less details but is infinitely scalable without losing image quality. This is important when you don't know the exact size for your animation. The most imortant is that vector files are not "flattened". All shapes of a vector image exist separately on different layers which makes it very easy to edit or paint. This could be very useful in the case when you want to create a similar character. Textures for models on Fig.1 were created by applying different colors on the same texture set.

Another approach is to cut textures from an existing image or even a photo. Here is important to understand that each texture should have some margins from a joint sides to avoid gaps. In other words textures should overlap other textures on every joint. Animated photo on Fig.2 is a good example of this approach.

Finally you can find all needed textures separately. As an example "dancing girl" animation on Fig.3 was composed from free vector and raster images with minimum editing. Shirt and girl in jeans were taken from free stock vector images. Head sketch and the shoe are raster images.

How to animate

Create all body parts in animator by attaching textures to bones of a skeleton. Drag, scale and rotate bones to compose the first frame. Add the second frame and compose final state of your action. Now add another frame in between and apply transition effect which will set average coordinates for all bones in the middle frame. Depending on your animation the middle frame can require additional editing. Anatomy animator allows to edit frames intuitively. Preview panel plays an animation in a loop while you change selected frame on the edit panel. As a result you can always see which tweaks make your animation look better. In a similar way you can add as many frames as you want. See our video tutorials for more information.

How to make a sprite sheet

Animated model could contain several actions. All of the actions could be exported in one sprite sheet image or as a sequence of frame images. This output is fully compatible with all modern game engines like Unity, Construct, Cocos, etc.

Anatomy animator gallery