Tag: Animation

Posted on

Step-by-Step Guide: Stick-Figure Animation in Blender and Unity

I am writing this post more for my own reference. I wanted to created a character in Blender, rig and animate it and then use it in Unity. Following videos show how I did this. I created a simple, stick-figure like, character in Blender and used it in Unity. In Unity I used Character controller, new input system and animation controller to move the character.

Stick-Figure Modelling in Blender

I started with an empty project (other than the default cube) in Blender and created a stick-figure character. I collapsed all the vertices of the cube to a single vertex, applied mirror modifier, skin modifier and subdivision surface modifier. Then extruded different parts of the character.

Continue reading “Step-by-Step Guide: Stick-Figure Animation in Blender and Unity”
Posted on

Sprite Animation in HTML5 Canvas with KineticJS

If you want to simulate motion with repeated display of a set of images, where each image correspond to one position in a series of positions in motion, then you can do this easily with sprite. Sprite is individual image in this series of images that constitute motion. The example of sprite is a person walking, where his/her motions of hands and legs are repeated during the walk. However sprite animation is not limited to repeated motion only. You can simulate, for example, explosion of an object, with series of images (sprites), each showing different stages of the explosion.

In my simple HTML5 game, the planet stops moving (and the game ends) when it hits any asteroid or boundaries of the Canvas. I modified it so that the planet explodes when it hits any obstacle. And for this I used Sprites. KineticJS makes animating Sprites very easy. This is how my sprite sheet looks like (sprite sheet is one image that contains small individual sprite images) –

Continue reading “Sprite Animation in HTML5 Canvas with KineticJS”

Posted on

Improving Animation Performance in HTML5 Canvas – Part II

In this post I had described how I was able to improve performance of animation in HTML5 Canvas by using a backup Canvas. The trick was to draw static part of the main Canvas on the backup Canvas and whenever any object moves (during animation), draw the content of backup Canvas on to the main Canvas first and then draw moving objects. I had optimised this by copying only a part from the backup Canvas that was exposed by the moving object. This gave me much better animation performance than redrawing scene every time.

Though the animation was better, I was still not happy with the performance. It worked fine on small devices like phones, but animation was still not very smooth on tablets. So I started looking for ways to improve it further.
Continue reading “Improving Animation Performance in HTML5 Canvas – Part II”

Posted on

Improving Animation Performance in HTML5 Canvas

I have been working on an application that performs some animation in HTML5 Canvas. The animation involves drawing of stokes,images and moving images. Initially I took the easiest path for coding animation, which is clearing canvas every time and drawing new positions of objects. When tested this application on my laptop, in Chrome, everything worked fine and performance was satisfactory.

However when I ran the same application on my Xoom tablet, animation was extremely slow. Obviously clearing canvas and redrawing everything again and again was not a good idea. I did know that this approach was bad for animation, but since it worked fine on my laptop, I did not bother to change it initially. However I was surprised by how bad it performed on Android. I saw many complaints about performance of Canvas on Android in many forum posts and blogs. Apparently, as per many posts, performance of Canvas is much better on iOS than Android, but I can’t confirm this.
Continue reading “Improving Animation Performance in HTML5 Canvas”

Social