top of page

2d Skeleton Animation

Kenneth Harper

The Game

To develop my skills in visual game effects I worked on a 2D puzzle platformer by the name of Ellumi the Fire Sprite, where the character traverses through various levels with increasingly complex puzzles. The goal was to develop the main character and a companion: Ellumi, the fire sprite, and the air sprite.

my role

As with most games, character animation played an important role in the overall feel of the game, and thus I took on the challenge of researching and implementing the animation of both Ellumi and the air sprite. I discovered that Unity has a 2D bone animation system that allows animation styles like puppet animation to be developed within the engine, which is fortunate as the concept art I had developed works best with this style. 

Untitled_Artwork (22).png
Ellumi_Neutral1.png
Untitled_Artwork (1).gif
Ellumi_-_Mockup (1).gif
Untitled_Artwork (22).png
Ellumi_Neutral1.png

The process

I started the animation process by first separating the already designed characters into various moving parts such as the limbs, bodies, and heads so that each could be moved independently when rigged in Unity. However, problems arose during the rigging process.

All the sprites comprising each character to the right

Air_Sprite_Skeleton Img.jpg
AirSprite Weights Shown.jpg

In order to fix this, I first tried retouching the weights of each bone to as close to the shape of each sprite as possible, however, this still left stretching around the edges of the different sprites, as their geometry was being considered connected.

I then tried separating the weights by the sprites they can influence and not just the geometry they could influence. Thus, in the sprite editor, and subsequently skinning editor, I manually restrained all bones to only influencing one sprite of the many comprising the rig. After this step, each limb was able to move independently without altering the geometry of the other parts. 

The bones used to manipulate the air sprite rig

The weights of each bone shown over the air sprite

When rigging a character, you first establish the skeleton and then adjust the area on the sprites that each individual bone affects, also known as each bone's weight.

For the animation of these characters, they needed to have each part solely influenced by one or two bones, but due to the overlapping sprites, there were many overlapping weights, which resulted in the sprite being manipulated into undesired shapes when attempting to animate.

The Skeletal problem

The Fusion Problem

Untitled_Artwork (2).gif

After rigging was completed, the next issue that arose was a particularly unique issue involving Ellumi. Due to the design of the character, the animations involved needed to consist of an animated head, as well as full-body animations. However, when rigging a character, only still sprites are used to comprise the rig, meaning that adding in an animated piece of the body is not possible within the rigging process. Therefore, I had to try another way.

I first attempted to solve this issue by having a separate game object with the animated fire constantly being set to the same position as the head. Unfortunately, this left a stuttering effect and was overall inefficient. 

Ellumi_Neutral1.png

For my second attempt, I decided to try and replace the pre-existing head sprite with the animated flame object. This method saw improved results, however, the rig would not fully recognize the piece as being a part of the rig. For full-body animations, the animated object's position had to be recorded, which allowed for issues where during transitions the flame would separate from the body.

For my final attempt, I instead altered the pre-existing head sprite to be the animated flame object, as this would not change the references the rig had assembled, and would hopefully prove to have the best result. This solution fixed the issue resulting in the flame being animated while also being a part of the larger full-body animation.

The Results

After working with skeletal animation, it is clear how effective it can be for animating characters in a convincing way, with the right amount of ingenuity. Finally, the characters come to life in the showcase below.

bottom of page