Computer Graphics and Animation

Sprite Animation

I created walkcycles on two different platforms. The objective of one of them was to dig deeper into keyframing, and this was explored through Maya. The other task was simply trying to implement some sort of character animation (I did keyframing here as well) in an Android application.

Let me begin with the documentation of the latter task first.

Exploring keyframing for a sample of character animation cycles (walk, dance, etc) using Sprite Animation on Android.


  1. Install the latest Android Studio in your system from
  2. Start Android Studio.
  3. From the Android Studio menu select File > New > Import Project.
  4. Select SpriteAnimation
  5. Build and Run the app. Instructions for the same for Studio are in
  6. Android-powered devices have a host of developer options that you can access on the phone, which let you:
  • Enable debugging over USB.
  • Quickly capture bug reports onto the device.
  • Show CPU usage on screen.
  • Draw debugging information on screen such as layout bounds, updates on GPU views and hardware layers, and other information.
  • Plus many more options to simulate app stresses or enable debugging options.

To access these settings, open the Developer options in the system Settings. On Android 4.2 and higher, the Developer options screen is hidden by default. To make it visible, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options at the bottom.

Here it is.

Sprite sheets already exist since the first days of computer games. The idea is to create one big image that contains all animations of a character instead of dealing with many single files. They got less important for some time after more and more 3d games showed up – but got their big comeback with mobile devices and 2d games.
An animation strip is the simplest form of a sprite sheet: It’s just placing each animation frame next to each other. All frames have the same size, and the animation is aligned in each frame.

It might also contain multiple lines if the animation is longer – or if several different animations are combined. A tileset is not different from a sprite sheet: It contains building blocks for game levels. This is an example for a tile map:

It’s easy for a game to retrieve the sprites since they all have the same width and height. The disadvantage is that the sprites waste a lot of memory because of all the additional transparency.
The developers of game engines are aware of the wasted memory in the simple sprite sheets and started to optimize the space.
The easiest way I found was to remove the transparency surrounding the sprite and shrink it to the bounding box. An even better solution is only to use the polygon containing the sprite.
This allowed me to create sprite sheets that are way more compact and waste less memory. They also shrink the download size for the game.
The easiest way to create optimized sprite sheets is using TexturePacker. TexturePacker is a tool that specializes in creating sprite sheets. The free version allows you to create sprite strips and tile maps.
Spritesheets are made up of two parts: frames and cycles.
A frame is a single image (or sprite) from the spritesheet. Each picture of the cartoon character shown above in the image would be a frame. When the frames are put in an order that creates a continuous movement, it creates a cycle. Putting the photos of the character in the order that they were taken produces a “run” cycle since the character is running (as opposed to a “walk” or “idle” cycle).
Coding technique:
The algorithm to obtain the bitmap objects from a series of sprite images is shown below.

// load bitmap from assets
Bitmap btmBmp = getBitmapFromAssets(this, filename);

if (btmBmp != null) {
    // cut bitmaps bmp to array of bitmaps
    bmps = new Bitmap[NB_FRAMES];
    int currentFrame = 0;

    for (int i = 0; i < COUNT_Y; i++) {
        for (int j = 0; j < COUNT_X; j++) {
            bmps[currentFrame] = Bitmap.createBitmap(btmBmp, FRAME_W
                    * j, FRAME_H * i, FRAME_W, FRAME_H);

            // apply scale factor
            bmps[currentFrame] = Bitmap.createScaledBitmap(
                    bmps[currentFrame], FRAME_W * SCALE_FACTOR, FRAME_H
                            * SCALE_FACTOR, true);

            if (++currentFrame >= NB_FRAMES) {

I built an array of bitmap images after scaling them.

 for (int i = 0; i < NB_FRAMES; i++) {
        animation.addFrame(new BitmapDrawable(getResources(), bmps[i]),


    // start animation on image Runnable() {

        public void run() {



In the next block of code, I added each frame the Animation class which can render those sprites at a defined frame rate. This animation is done in a separate thread as shown above.

There was no specific aspect of the task which was difficult. If I had more time on the project, I would add more types of character animation and more examples of sprite animations to the project. Following at the end of this blog post is a neat discrimination between this task and the Maya based walk cycle. Stay tuned or go to the very bottom!

Exploring setting of keyframes to create expressive animation.

Here it is.

The design of the walk cycle of Norman started with the analysis of the movements of the different body parts during a human walk cycle. Based on these movements, the poses of the walk cycle were designed and implemented in a suitable computer program. For this project the 3D computer animation program Autodesk Maya 2017 was used.
The Different Poses of a Walk Cycle A walk cycle can be described by four distinct poses, “key-poses’: CONTACT, RECOIL, PASSING and HIGH-POINT . After these steps were created they can be repeated over and over to create the walk cycle. This type of animation is called a pose-to-pose animation.
CONTACT: During normal walk movements, the first and the last position are called ”contact position”. In this position the legs are furthest apart. The heel of the front leg and the toe of the leg in the back are touching the ground. The two contact positions are the same but inverted. When the left leg is forward, the left arm goes back and vice versa. This is called “counter pose” and helps the character to keep its balance. The legs are in their most extreme position in the contact position.
RECOIL: The second position in the walk cycle is the recoil. This is where the character lifts the leg in the back and moves it up and forward. The recoil position is usually where 7 the characters body is at its lowest position. The bent leg in the front takes all the weight and the foot is placed right under the body to balance it. In this position the arms are furthest apart
PASSING: The passing position is in the middle of the walk cycle. Here the character has one leg straight and the other slightly lifted and bent. Because the leg is straight in the passing position, it is going to lift the body and head upwards.
HEIGHT-POINT: As the name says, this is the highest point in the walk cycle. In this position the foot is pushing off and lifts the body and head, before the other leg is thrown out and catches us in the contact position.
Timing and Key frames: There are many different ways of animating characters and objects, to bring them to life. One of the most common ways of animating is key frame animation. Time is corresponding to frames (e.g. 24 frames per second) and these key frames are used to define distinct postures and Autodesk Maya is then calculating the in-between frames. In a normal medium speed walking movement, a person takes about two steps per second. Each step takes about half a second.
Gravity: To be able to create a believable walk cycle it is important to add the impression of weight to it and to know where the weight should be placed. During a walk cycle the moment when a foot hits the ground is the most important moment where gravity should be noticeable. At this very moment, also the rest of the body should, to some extent, follow this downward movement that is stopped when the foot-ground contact is made. During this phase, typically the foot is moved downwards to the ground with a certain vertical speed, and when it hits the ground this vertical movement is rather abruptly stopped. Taking into account this aspect can increase the credibility of the character being immersed in its surroundings and avoids the impression that the character is floating or sliding.
I found the rig of norman here.
I used the tutorials provided by Udemy and Lynda to implement the walkcycle.

I found this task very challenging indeed. I had not used Maya prior. It took me a long time to get the hang of it. If I had more time on the project, I would add more types of walkcycles. I would do more expressionism. Next up is a neat discrimination between this task and the Sprite based walk cycle.

An important point of difference is that in the Maya based keyframing, we create and customize the keyframes. The Android app just renderes existing keyframes (sprites) and renders them at a specific rate. With Maya, I can edit as many keyframes as I want. With the application I made on Android, the features are limited. Basically, it is apples and oranges to compare the two tasks. They are not really related except for the fact that both implement animation using keyframes: one using in Maya, and the other via a tool to render images which are played at a fast rate. In essence, the sprite animation is more traditional


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s