Sprite animation for games

How to make game graphics in details

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 sprite animator screenshot
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.

Why Anatomy animator?

Real time editing
This feature allows you regardless your drawing skills or anatomy knowledge produce professional 2D animations. Software has 2 view panels: preview panel plays an animation in a loop while you do changes on the edit panel. As a result you can always see which tweaks make your animation look better.
Skeleton-based model
All movable parts of a model are represented as bones with textures. Replacing texture for a selected bone will automatically replace texture in an entire animation. This makes it possible to create different characters using the same model but different textures.
Transition effect
This feature allows to create a transition state for a bone by averaging coordinates between two different key-frames. Transition is used for fast animation of model parts or could be applied to a whole frame to make the animation smoother.
JSON compatible
Software produces JSON formatted text file that contains all bones configurations for all frames. Game engine can use that info to combine all textures together according to a model. This might save you a lot of space especially if you have too many animations in a game scene.
Cross platform
Anatomy is a Chrome app and would be available via your Chrome apps. Use it wherever you go - just log in your google account. And yes - it works offline!

How to create animation with the Anatomy tool

Different textures for the same model
Fig.1 Reuse of the same model
Textures for animated photo
Fig.2 Animation of a static picture or a photo
Combination of textures
Fig.3 Composition from different images

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