Blog

Article

Posted april,17th - 2015

2D Animation in Canvaleon

In the last post our colleague Joan Redondo exposed to you how we did and distributed the backgrounds from Canvaleon.

Following in the graphic paragraph I will now explain what we do when we make an animation.

The first thing we have to think about when animating is how many stages this animation is going to have. Before starting we need to know if it is going to walk or if it is going to jump, etc. and once we have this clear it is time to draw a first sketch (we can do it by hand or computer), and after that we can start animating it.

To explain this process we will us a very concrete example:

As everybody who follows us will know there is an enemy that follows you in order to absorb the color from your camouflage and let it unusable if you enter in his vision spectrum.

Well, after trying the game for several times, we have observed that people tend to associate Aspi (the enemy who absorbs the color) as a friend and not as something hostile which you should avoid. This is produced by a fault in our original design which has already been solved rebuilding the design from scratch.

Foto 12D Animation in Canvaleon

To avoid making the same mistake we have decided to do Aspi’s new design more aggressive than his predecessor. We decided back in the early stages the role he is going to have in the game, defining every basic status he would have, like walking, to inhale or the idle (static phase), so it was just a graphic change without adding extra work to other departments.

After that, using only the contour line we do the animation without departing from an established set of rules present in the entire spectrum of animation which we have to respect in order for them to seem like if belonging to the same videogame (frame number, size, timing, etc.).

With all the animations created we proceed to paint with a base color to later apply two layers of shadow and one layer of bright. To emphasize a concrete movement, for example, we can add a shining or some effects, depending on the visual effect we want to recreate.

Having the animation complete, the first thing we have to do is save the file in .gif format which will help the programmers to orientate themselves when introducing the animation on the game.

The programmer requires us to send him the animation in a specific way because it will help in the yield of the game when it has to load files (spritesheet).

Foto 22D Animation in Canvaleon

With them the programmer needs some indications, like the breadth and the height of each frame and how many of these does an animation or state require to be able to work.

The most hard-working process is, indeed, the animation making. Making each frame coincide with the following one and get a good result can provoke more than one headache. The painting process is more mechanic and only requires some time and dedication to finish it, but undoubtedly it will be what gives life to our creations.

Javier Gilo